网站布局多样化是我们前端的拿手菜！最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下：

XML/HTML Code 复制内容到剪贴板 <!DOCTYPE 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 >      

以上就是本文的全部内容，希望对大家的学习有所帮助。