通過CSS和DIV可以實現對網頁的佈局，具體如下所示。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>CSS+div實現網頁混合佈局</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 font-size: 40px;
11 color: white;
12 }
13
14 #main {
15 width: 800px;
16 margin: 0 auto;
17 }
18
19 #videoLeft, #videoCenter, #videoRight {
20 width: 260px;
21 float: left;
22 }
23
24 #videoCenter, #videoRight {
25 margin-left: 10px;
26 }
27
28 .video_1 {
29 height: 210px;
30 background: red;
31 }
32
33 .video_2 {
34 margin-top: 10px;
35 overflow: hidden;
36 width: 270px;
37 }
38
39 .video_2 div {
40 float: left;
41 width: 125px;
42 height: 100px;
43 background: red;
44 margin-right: 10px;
45 }
46
47 .video_3 {
48 overflow: hidden;
49 width: 270px;
50 }
51
52 .video_3 div {
53 float: left;
54 width: 125px;
55 height: 100px;
56 background: red;
57 margin-right: 10px;
58 margin-bottom: 10px;
59 }
60
61 .video_4 {
62 height: 100px;
63 background: red;
64 margin-bottom: 10px;
65 }
66
67 .video_5 {
68 float: left;
69 width: 125px;
70 }
71
72 .video_5 div {
73 height: 100px;
74 background: red;
75 margin-bottom: 10px;
76 }
77
78 .video_6 {
79 float: left;
80 width: 125px;
81 height: 210px;
82 background: red;
83 margin-left: 10px;
84 }
85 </style>
86 </head>
87 <body>
88 <div id="main">
89 <div id="videoLeft">
90 <div class="video_1"></div>
91 <div class="video_2">
92 <div></div>
93 <div></div>
94 </div>
95 </div>
96 <div id="videoCenter">
97 <div class="video_3">
98 <div></div>
99 <div></div>
100 <div></div>
101 <div></div>
102 <div></div>
103 <div></div>
104 </div>
105 </div>
106 <div id="videoRight">
107 <div class="video_4"></div>
108 <div class="video_5">
109 <div></div>
110 <div></div>
111 </div>
112 <div class="video_6"></div>
113 </div>
114 </div>
115 </body>
116 </html>
運行結果如下圖所示。
上述代碼是通過CSS+DIV實現網頁的混合佈局。