html5+css3 做个圆形导航
展开全部
只写了里面的，外面的不太好写
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
