网站布局多样化是我们前端的拿手菜！最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>全兼容的HTML九宫格布局</title> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> </head> <body> <html> <head> <styletype="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; } .boxli{float:left;line-height:230px;} .boxlia,.boxlia:visited{ display:block; border:5pxsolid#ccc; width:380px; height:230px; text-align:center; margin-left:-5px; margin-top:-5px; position:relative; z-index:1; } .boxlia:hover{border-color:#f00;z-index:2;} </style> </head> <body> <divclass="xttblog"> <ulclass="box"> <li><ahref="#"title="1"><imgsrc="sh.jpg"/></a></li> <li><ahref="#"title="2"><imgsrc="bd.jpg"/></a></li> <li><ahref="#"title="3"><imgsrc="tb.jpg"/></a></li> <li><ahref="#"title="4"><imgsrc="fh.jpg"/></a></li> <li><ahref="#"title="5"><imgsrc="tb.jpg"/></a></li> <li><ahref="#"title="6"><imgsrc="tb.jpg"/></a></li> <li><ahref="#"title="7"><imgsrc="tb.jpg"/></a></li> <li><ahref="#"title="8"><imgsrc="tb.jpg"/></a></li> <li><ahref="#"title="9"><imgsrc="tb.jpg"/></a></li> </ul> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
【HTML九宫格布局实现方法】相关文章：