網頁的基本結構

新建一個文件夾，命名為“DIV+CSS布局練習”，在文件夾下新建兩個空的記事本文檔，輸入以下內容：

Div+CSS網頁布局項目實戰：頁面布局與規劃|www.125jz.com

將其命名為index.htm，另一個記事本文檔則命名為css.css。

下面，我們在

標簽對中寫入DIV的基本結構，代碼如下：[color=#aaaaaa][/color][color=#aaaaaa][/color][color=#aaaaaa][/color][color=#aaaaaa][/color][color=#aaaaaa][/color][color=#aaaaaa][/color]

為了使以后閱讀代碼更簡易，我們應該添加相關注釋，接下來打開css.css文件，寫入CSS信息，代碼如下：

/*基本信息*/

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

/*頁面層容器*/

#container {width:100%}

/*頁面頭部*/

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

/*頁面主體*/

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

/*頁面底部*/

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

把以上文件保存，用瀏覽器打開，我們可以看到頁面的基本結構了。

125jz網原創文章。發布者：江山如畫，轉載請注明出處：http://www.125jz.com/2371.html

總結

以上是生活随笔為你收集整理的html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。