HTML九宫格布局实现方法_HTML/Xhtml_网页制作

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

XML/HTML Code复制内容到剪贴板

1. nbsp;html>  
2. html>  
3. head>  
4. meta charset="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.   

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