HTML九宫格布局实现方法

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

1. !DOCTYPE html>   
2. html>   
3. head>   
4. meta charset=@H_406_61@"utf-8">   
5. tITle> 全兼容的HTML九宫格布局/title>   
6. meta http-equiv="X-UA-Compatible" content="IE=Edge">   
7. /head>   
8. body>   
9. html>   
10. head>   
11. style type="text/css">   
12. /** 重置浏览器默认标签样式 */   
13. body,ul,li{ margin:0; padding:0; }   
14. .xttblog{   
15.  width: 1200px;   
16.  height: 170px;   
17.  margin-top:50px;   
18.  margin-left: auto;   
19.  margin-right: auto;   
20. }   
21. .box{ margin-left: 5px; margin-top: 5px; list-style-type:none; }   
22. .box:after{   
23.  content: ".";   
24.  display: block;   
25.  line-height: 0;   
26.  width:0;   
27.  height: 0;   
28.  clear: both;   
29.  visibility: hidden;   
30.  overflow: hidden;   
31. }   
32. .box li{ float:left; line-height: 230px; }   
33. .box li a,.box li a:visited{   
34.  display:block;   
35.  border: 5px solid #ccc;   
36.  width: 380px;   
37.  height: 230px;   
38.  text-align: center;   
39.  margin-left: -5px;   
40.  margin-top: -5px;   
41.  position: relative;   
42.  z-index: 1;   
43. }   
44. .box li a:hover{ border-color: #f00; z-index: 2; }   
45. /style>   
46. /head>   
47. body>   
48. div class="xttbLOG">   
49.  ul class="box">   
50.   li> a href="#" title="1"> img src="sh.jpg"/> /a> /li>   
51.   li> a href="#" title="2"> img src="bd.jpg"/> /a> /li>   
52.   li> a href="#" title="3"> img src="tb.jpg"/> /a> /li>   
53.   li> a href="#" title="4"> img src="fh.jpg"/> /a> /li>   
54.   li> a href="#" title="5"> img src="tb.jpg"/> /a> /li>   
55.   li> a href="#" title="6"> img src="tb.jpg"/> /a> /li>   
56.   li> a href="#" title="7"> img src="tb.jpg"/> /a> /li>   
57.   li> a href="#" title="8"> img src="tb.jpg"/> /a> /li>   
58.   li> a href="#" title="9"> img src="tb.jpg"/> /a> /li>   
59.  /ul>   
60. /div>   
61. /body>   
62. /html>   
63.   

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！