网站布局多样化是我们前端的拿手菜！最近看到uc浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下：
xml/html code复制内容到剪贴板
nbsp;html>   html>   head>   meta charset=utf-8>   title>全兼容的html九宫格布局title>   meta http-equiv=x-ua-compatible content=ie=edge>   head>   body>   html>   head>   style type=text/css>   /** 重置浏览器默认标签样式 */    body,ul,li{margin:0;padding:0;}    .xttblog{     width: 1200px;     height: 170px;     margin-top:50px;     margin-left: auto;     margin-right: auto;    }    .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}    .box:after{     content: .;     display: block;     line-height: 0;     width:0;     height: 0;     clear: both;     visibility: hidden;     overflow: hidden;    }    .box li{float:left;line-height: 230px;}    .box li a,.box li a:visited{     display:block;     border: 5px solid #ccc;     width: 380px;     height: 230px;     text-align: center;     margin-left: -5px;     margin-top: -5px;     position: relative;     z-index: 1;    }    .box li a:hover{border-color: #f00;z-index: 2;}    style>   head>   body>   div class=xttblog>    ul class=box>     li>a href=# title=1>img src=sh.jpg/>a>li>     li>a href=# title=2>img src=bd.jpg/>a>li>     li>a href=# title=3>img src=tb.jpg/>a>li>     li>a href=# title=4>img src=fh.jpg/>a>li>     li>a href=# title=5>img src=tb.jpg/>a>li>     li>a href=# title=6>img src=tb.jpg/>a>li>     li>a href=# title=7>img src=tb.jpg/>a>li>     li>a href=# title=8>img src=tb.jpg/>a>li>     li>a href=# title=9>img src=tb.jpg/>a>li>    ul>   div>   body>   html>
以上就是本文的全部内容，希望对大家的学习有所帮助。