亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

　　下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁(yè)面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分

　　為以下幾個(gè)部分：

　　1、頂部部分，其中又包括了 LOGO、MENU 和一幅 Banner 圖片;

　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容;

　　3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖:

　　根據(jù)上圖，我再畫了一個(gè)實(shí)際的頁(yè)面布局圖，說明一下層的嵌套關(guān)系，這樣理解起來就會(huì)更簡(jiǎn)單了。

　　第 38 頁(yè)

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　DIV 結(jié)構(gòu)如下：

　　│body {} /*這是一個(gè) HTML 元素，具體我就不說明了*/

　　└#Container {} /*頁(yè)面層容器*/

　　├#Header {} /*頁(yè)面頭部*/

　　├#PageBody {} /*頁(yè)面主體*/

　　│ ├#Sidebar {} /*側(cè)邊欄*/

　　│ └#MainBody {} /*主體內(nèi)容*/

　　└#Footer {} /*頁(yè)面底部*/

　　至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫 HTML 代碼和 CSS。接下來我們?cè)谧烂嫘陆ㄒ粋�(gè)文件夾，命名為“DIV+CSS 布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文

　　檔，輸入以下內(nèi)容：

　　"http://www .w 3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　第 39 頁(yè)

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　這是 XHTML 的基本結(jié)構(gòu)，將其命名為 index.htm，另一個(gè)記事本文檔則命名為 css.css。

　　下面，我們?cè)跇?biāo)簽對(duì)中寫入 DIV 的基本結(jié)構(gòu)，代碼如下：

　　第 40 頁(yè)

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　為了使以后閱讀代碼更簡(jiǎn)易，我們應(yīng)該添加相關(guān)注釋，接下來打開 css.css 文件，寫入 CSS 信息，代碼

　　如下：

　　/*基本信息*/

　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

　　/*頁(yè)面層容器*/

　　#container {w idth:100%}

　　/*頁(yè)面頭部*/

　　#Header {w idth:800px;margin:0 auto;height:100px;background:#FFCC99}

　　/*頁(yè)面主體*/

　　#PageBody {w idth:800px;margin:0 auto;height:400px;background:#CCFF00}

　　/*頁(yè)面底部*/

　　#Footer {w idth:800px;margin:0 auto;height:50px;background:#00FFFF}

　　把以上文件保存，用瀏覽器打開，這時(shí)我們已經(jīng)可以看到基礎(chǔ)結(jié)構(gòu)了，這個(gè)就是頁(yè)面的框架了。

　　關(guān)于以上 CSS 的說明(詳細(xì)請(qǐng)參考 CSS2.0 中文手冊(cè)，網(wǎng)上有下載)：

　　1、請(qǐng)養(yǎng)成良好的注釋習(xí)慣，這是非常重要的;

　　2、body 是一個(gè) HTML 元素，頁(yè)面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對(duì)之內(nèi)，我就不多說了;

　　3、講解一些常用的 CSS 代碼的含義：

　　font:12px Tahoma;

　　這里使用了縮寫，完整的代碼應(yīng)該是：font-size:12px;"TEXT-ALIGN: left; LINE-HEIGHT: 5pt; MARGIN: 0.8pt 0cm 0pt;" class=MsoNormal align=left>

　　第 41 頁(yè)

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　margin:0px;

　　也使用了縮寫，完整的應(yīng)該是：

　　margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

　　或

　　margin:0px 0px 0px 0px

　　順序是 上 / 右 / 下 / 左，你也可以書寫為 margin:0(縮寫);

　　以上樣式說明 body 部分對(duì)上右下左邊距為 0 像素，如果使用 auto 則是自動(dòng)調(diào)整邊距，

　　另外還有以下幾種寫法：

　　margin:0px auto;

　　說明上下邊距為 0px，左右為自動(dòng)調(diào)整;

　　我們以后將使用到的 padding 屬性和 margin 有許多相似之處，他們的參數(shù)是一樣的，只不過各自表示的含義不相同，margin 是外部距離，而 padding 則是內(nèi)部距離。