摘要：傳統(tǒng)布局盒狀模型結(jié)合屬性浮動(dòng)以及定位屬性設(shè)計(jì)的各式傳統(tǒng)布局形式。

1、傳統(tǒng)布局

　　盒狀模型結(jié)合 display 屬性、float 浮動(dòng)以及 position 定位屬性設(shè)計(jì)的各式傳統(tǒng)布局形式。

2、說再多不如動(dòng)手實(shí)踐，下面舉三個(gè)例子

html 部分代碼：

 1     <section>
 2         
 3         <div class="layout-one">
 4             <div class="header">headerdiv>
 5             <div class="banner">bannerdiv>
 6             <div class="content">main-contentdiv>
 7             <div class="footer">footerdiv>
 8         div>
 9 
10         
11         <div class="layout-two">
12             <div class="header">headerdiv>
13             <div class="banner">bannerdiv>
14             <div class="content">
15                 <div class="content-left">content-leftdiv>
16                 <div class="content-right">content-rightdiv>
17             div>
18             <div class="footer">footerdiv>
19         div>
20 
21         
22         <div class="layout-three">
23             <div class="header">headerdiv>
24             <div class="main-banner">bannerdiv>
25             <div class="main-content">
26                 <div class="content1">content1div>
27                 <div class="content2">content2div>
28             div>
29             <div class="footer">footerdiv>
30         div>
31     section>

css樣式部分代碼：

 1         /* 基本樣式 */
 2         section {
 3             width: 1200px;
 4             height: 300px;
 5             margin: 0 auto;
 6             padding: 10px;
 7         }
 8         .layout-one, .layout-two, .layout-three {
 9             float: left;
10             margin-left: 20px;
11         }
12         div {
13             width: 300px;
14         }
15         
16         /* 可復(fù)用樣式 */
17         .header {
18             height: 25px;
19             text-align: center;
20             background-color: bisque;
21             line-height: 25px;
22         }
23         .banner {
24             height: 50px;
25             text-align: center;
26             line-height: 50px;
27             background-color: aquamarine;
28         }
29         .footer {
30             height: 25px;
31             text-align: center;
32             line-height: 25px;
33             background-color: black;
34             color: #ffffff;
35         }
36 
37         /* 結(jié)構(gòu)1 基礎(chǔ)樣式 */
38         .layout-one .content {
39             height: 60px;
40             text-align: center;
41             line-height: 60px;
42             background-color: aqua;
43         }
44 
45         /* 結(jié)構(gòu)2 基礎(chǔ)樣式 */
46         .layout-two .content {
47             height: 60px;
48             text-align: center;
49             line-height: 60px;
50             background-color: aqua;
51         }
52         .layout-two .content-left {
53             width: 100px;
54             float: left;
55             border-right: 1px solid #000000;
56         }
57         .layout-two .content-right {
58             width: 199px;
59             float: left;
60         }
61 
62         /* 結(jié)構(gòu)3 基礎(chǔ)樣式 */
63         .main-banner {
64             width: 200px;
65             height: 50px;
66             margin: 0 auto;
67             background-color: aquamarine;
68             text-align: center;
69             line-height: 50px;
70         }
71         .main-content {
72             position: relative;
73             width: 200px;
74             height: 60px;
75             margin: 0 auto;
76             text-align: center;
77             line-height: 60px;
78         }
79         .content1 {
80             width: 60px;
81             height: 60px;
82             position: absolute;
83             top: 0px;
84             left: 30px;
85             background-color: aqua;
86         }
87         .content2 {
88             width: 60px;
89             height: 60px;
90             position: absolute;
91             top: 0px;
92             right: 30px;
93             background-color: aqua;
94         }

頁(yè)面效果：

　　通過上述的三個(gè)例子，我們可以發(fā)現(xiàn)：

• 盒子的多重嵌套，雖然讓我們可以方便的劃分區(qū)域，但卻增加了網(wǎng)頁(yè)結(jié)構(gòu)的復(fù)雜性，這將使后期網(wǎng)站的維護(hù)變得十分的困難，從而增加維護(hù)成本；
• 合理的網(wǎng)頁(yè)布局可以讓我們?cè)诰W(wǎng)站開發(fā)的過程中得到事半功倍的效果
• 浮動(dòng)的應(yīng)用以及結(jié)合定位屬性的使用，使得我們的網(wǎng)頁(yè)布局花樣變得豐富多彩，但同時(shí)也帶來了不少問題，比如：在定位的過程中對(duì)“距離”的要求變得十分精確等等
• 網(wǎng)站設(shè)計(jì)與布局的其中一個(gè)也是很重要的要求便是能在不同的設(shè)備上較好的展現(xiàn)對(duì)應(yīng)的內(nèi)容，但如上的傳統(tǒng)布局在一定程度上在這方面不是很好，無(wú)法很好的進(jìn)行響應(yīng)屏幕分辨率的變化！

　　為了更近時(shí)代的進(jìn)步，所以我們需要更深入的去學(xué)習(xí)，如：響應(yīng)式設(shè)計(jì)中的，流式布局，彈性布局等等！加油吧，騷年！

?