HTML九宮格佈局實作方法_HTML/Xhtml_網頁製作

網站佈局多樣化是我們前端的拿手菜！最近看到UC瀏覽器的預設標籤頁使用的就是九宮格佈局。就研究了下，在這裡，我就分享一下程式碼，共同學習下！效果如下：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4. meta charset=charset=>
5.    title>全相容的HTML🎜> title>  
6. meta http-equiv= -UA-Compatible" content="IE=edge">
7. head>  
8. body>  
9. html>  
10. head>  
11. style type="text/css ">   /** 重設瀏覽器預設標籤樣式 */   
12. body,ul,li{margin:0;padding:0;}   
13. .xttblog{   
14.  width: 1200px;   
15.  height: 170px;   
16.  margin-top:50px;   
17.  margin-left: auto;   
18.  margin-right: auto;   
19. }   
20. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}   
21. .box:after{   
22.  content: ".";   
23.  display: block;   
24.  line-height: 0;   
25.  width:0;   
26.  height: 0;   
27.  clear: both;   
28.  visibility: hidden;   
29.  overflow: hidden;   
30. }   
31. .box li{float:left;line-height: 230px;}   
32. .box li a,.box li a:visited{   
33.  display:block;   
34.  border: 5px solid #ccc;   
35.  width: 380px;   
36.  height: 230px;   
37.  text-align: center;   
38.  margin-left: -5px;   
39.  margin-top: -5px;   
40.  position: relative;   
41.  z-index: 1;   
42. }   
43. .box li a:hover{border-color: #f00;z-index: 2;}  
44. 樣式>  
45. 頭>  
46. 身體>  
47. div class="xttblog" >  
48.  ul class=class=>
  
49.   li>aaaaaaaa> href="#" 標題=標題=
50. 標題 🎜>>img src=src=src/>a>李李李>     li>aa
aaaaaa> href="#" 標題=標題=標題=請問🎜>>img src/>a
51. >李李李李>     
li>aaaaaaaa> href="#" 標題=標題=標題 🎜>>img srctbsrctbsrc/>a>李李李李>     li>aaaaaaaa> href="#" 標題=標題=標題 🎜>>img src=src/>a>李李李李>  
52.   li>aaaaaaaa> href="#" 標題=標題=標題
53. 🎜>>img srctbsrctbsrc/>a>李李李李>     li>aa
54. aaaaaa> href="#" 標題=標題=標題 🎜>>img srctbsrctbsrc
55. />a>李李李李>     li>aaaaaaa
a> href="#" 標題=標題=標題 🎜>>img srctbsrctbsrc/>a>李李李李>
56.      
li>
57. aaaaaaaa> href="#" 標題=標題=標題 🎜>>img srctbsrctbsrc/>a>李李李李>     li>aaaaaaaa> href="#" 標題=標題 🎜>>img srctbsrctbsrc/>a>李李李李>    ul>   div>  
58. body>  
59. html>  
60.   

以上就是本文的全部內容，希望對大家的學習有所幫助。