css3实例1——实现列表前面带字标题

实现效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3圆形图标</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			.cl{clear:both;}
			.bg1{background: #17AEE6;}
			.bg2{background: #FFFFFF;}
			.bg3{background:#EF7A69;}
			.circle{float: left; margin:20px; width: 50px;height:50px;border-radius:50%;}
			.circle{color: #FFFFFF;font-size: 12px;font-family: simsun;}	
			/*方法一*/
			.circle ul{list-style-type: none;}
			.circle ul li{float:left; width:calc(50% - 2px);height: calc(50% - 2px);text-align:center;}
			.circle .li1{border-bottom:2px solid #FFFFFF;border-right: 2px solid #FFFFFF;line-height:26px;}
			.circle .li2{border-bottom:2px solid #FFFFFF;line-height:26px;}
			.circle .li3{border-right:2px solid #FFFFFF;line-height:18px;}
			.circle .li4{line-height:18px;}
			/*方法二*/
			.circle div{float:left;margin:1px;width:calc(50% - 2px);height: calc(50% - 2px);text-align:center;}
			.div1{border-radius: 30px 0px 0px 0px;line-height:26px;}
			.div2{border-radius: 0px 30px 0px 0px;line-height:26px;}
			.div3{border-radius: 0px 0px 0px 30px;line-height:18px;}
			.div4{border-radius: 0px 0px 30px 0px;line-height:18px;}
		
		</style>
	</head>
	<body>
		<div class="circle bg1">
			<ul>
				<li class="li1">科</li>
				<li class="li2">室</li>
				<li class="li3">阅</li>
				<li class="li4">办</li>
				<div class="cl"></div>
			</ul>
		</div>	
		<div class="circle bg2">
			<div class="div1 bg3">科</div>
			<div class="div2 bg3">室</div>
			<div class="div3 bg3">阅</div>
			<div class="div4 bg3">办</div>
			<div class="cl"></div>
		</div>
	</body>
</html>

　　

 

posted on 2017-12-07 14:24  木之子梦之蝶  阅读(379)  评论(0)    收藏  举报

导航