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>
DO What You Want !