css实现九宫格布局以及边框效果

来源：互联网发布：中国网络日报有无权威编辑：程序博客网时间：2024/05/22 03:47

<div><ul class="clearfix"><li></li><li></li><li></li></ul><ul class="clearfix"><li></li><li></li><li></li></ul><ul class="clearfix"><li></li><li></li><li></li></ul></div>

*{margin: 0;padding: 0;}div{margin-top: 10px;/* 外边框 */border: 1px solid #ebebeb;width: 90%;margin-left: 5%;}ul+ul{/* 中间两横边框 */border-top: 1px solid #ebebeb; }li{width: 33.33333333333333333333%;height: 40px;float: left;list-style: none;/* padding和border计算在盒子模型里面 */-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}li+li{/* 中间两竖边框 */border-left: 1px solid #ebebeb;}/* 伪类清除浮动 */.clearfix:after { content: "." ; display: block ;height: 0 ;clear: both ;visibility: hidden ;}.clearfix{ display: inline-block; }/* Hides from IE-mac */ *html .clearfix{ height:1%; }.clearfix{ display:block; }/* End hide from IE-mac */

阅读全文

0 0