下面是一个可以实现该要求的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(),打开百度网站

写一个html显示上下、左右居中的圆50px50px绿色圆上居中显示启动IE点击后打开wwwbaiducom

原文地址: https://www.cveoy.top/t/topic/iMSq 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录