写一个html显示上下、左右居中的圆50px50px绿色圆上居中显示启动IE点击后打开wwwbaiducom
下面是一个可以实现该要求的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>居中圆</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="circle" onclick="openLink()">
启动IE
</div>
<script>
function openLink() {
window.open("https://www.baidu.com");
}
</script>
</body>
</html>
上述代码使用Flex布局将圆水平和垂直居中显示在页面上。点击圆时,会调用JavaScript函数openLink(),打开百度网站
原文地址: https://www.cveoy.top/t/topic/iMSq 著作权归作者所有。请勿转载和采集!