第九章：H TM L 樣式及布局
第九章：H TM L 樣式及布局 重點二 2011/7/27 30
網(wǎng)頁布局設(shè)計的基本原則 網(wǎng)頁html代碼布局問題
樣式名稱 {屬性名:值;屬性名:值;屬性名:值;}
樣式名稱
html內(nèi)定元素 比方說 a， body， td， tr （簡而言之就是不帶任何前綴的）
自定義的 class 比方說 .nav , .clear , .layout （簡而言之是帶.前綴的）
自定義的 id 比方說 #leftbody ， #right （簡而言之就是帶#前綴的）常用
id和class的不同就是 id唯一，class不唯一，同一個名字的id 在頁面上只能應(yīng)用一次，class可以在多個地方應(yīng)用，你要為你頁面上唯一的'一個元素寫樣式就可以用id，你希望你的這個樣式在多個地方可以使用就使用class 。
例如：
body, form ，p, ul, li ,img, h5標簽樣式為
mrigin:0(外邊距0)； padding:0(內(nèi)邊距0)； border:none(無邊框)*/
body{color:#333; font-size:14px; l ine-height:24px; background:#2E8B57;}
/*body標簽樣式 color#333(文字顏色為#333);font-size:14px(文字大小為14像素 px就是pixel的簡寫 就是像素的意思，下面出現(xiàn)的所有px的單位都是 像素的意思)；line-height:24px(文字行高24像素)；
由此可以布置網(wǎng)頁，下面給出一個實例：
DIV 結(jié)構(gòu)如下：
│body {} /*這是一個HTML 元素 */
└#Container {} /*頁面層容器*/
├#Header {} /*頁面頭部*/
├#PageBody {} /*頁面主體*/
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
└#Footer {} /*頁面底部*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
這是XHTML 的基本結(jié)構(gòu)，將其命名為index.htm。
下面，我們在<body></body>標簽對中寫入DIV 的基本結(jié)構(gòu)，代碼如下：
<div id="container">[color=#aaaaaa]<!--頁面層容器-->[/color]
<div id="Header">[color=#aaaaaa]<!--頁面頭部-->[/color]
</div>
<div id="PageBody">[color=#aaaaaa]<!--頁面主體-->[/color]
<div id="Sidebar">[color=#aaaaaa]<!--側(cè)邊欄-->[/color]
</div>
<div id="MainBody">[color=#aaaaaa]<!--主體內(nèi)容-->[/color]
</div>
</div>
<div id="Footer">[color=#aaaaaa]<!--頁面底部-->[/color]
</div>
</div>
另一個記事本文檔則命名為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}
把以上文件保存，用瀏覽器打開，這時我們已經(jīng)可以看到基礎(chǔ)結(jié)構(gòu)了，這個就
是頁面的框架了。
參考資料：來源于網(wǎng)絡(luò)
關(guān)于網(wǎng)頁布局的更復(fù)雜的設(shè)計細節(jié) 我們將在CSS教程詳細介紹
提示 ：常用的命名規(guī)則
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
菜單：menu
子菜單：submenu
頁腳：footer
版權(quán)：copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線;
4.盡量不縮寫，除非一看就明白的單詞.
【 第九章：H TM L 樣式及布局】相關(guān)文章：
3.h字頭的諺語
5.春假通知書樣式