html5+css3 做个圆形导航

html5+css3 做个圆形导航，要可以点击链接跳转别的页面，如下图所示：类似的。

举报该文章

相关建议 2017-08-18

只写了里面的，外面的不太好写

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形导航</title>
    <link rel="stylesheet" href="css/common.css">
    <style type="text/css">
       .div1{
             width: 405px;
             height: 405px;
             border-radius: 50%;
             margin-top: 40px;
             margin-left: 40px;
             background-color: #fff;
             position: relative;
       }
       .div2{
          width: 200px;
          height: 200px;
          background-color: #999;
          color:#fff;
          text-align: center;
          line-height: 200px;
       }
       .div2:nth-child(1){border-top-left-radius: 100%;}
       .div2:nth-child(2){border-top-right-radius: 100%;}
       .div2:nth-child(3){border-bottom-left-radius: 100%;}
       .div2:nth-child(4){border-bottom-right-radius: 100%;}
       .div3{
             position: absolute;
             width: 200px;
             height: 200px;
             border-radius: 100%;
             top: 100px;
             left: 100px;
             z-index: 5;
             background-color: red;
             color: #fff;
             border: 3px solid #fff;
             text-align: center;
             line-height: 200px;
             box-shadow: 0 0 15px rgba(255,255,255,.6);
       }
    </style>
</head>
<body>
    <div class="div1 clearfix">
        <div class="fl div2 mb-5">导航1</div>
        <div class="fr div2 mb-5">导航1</div>
        <div class="fl div2">导航1</div>
        <div class="fr div2">导航1</div>
        <div class="div3">综合服务</div>
    </div>
</body>
</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://22.t2y.org/zz/fxscsxtcf2c6th2hi2.html

其他看法

无其他回答

相似回答

大家正在搜