DIV+CSS網頁標準布(bù)局實例教程(chéng)（一）
今天(tiān)學習《十天(tiān)學會web標準(div+css)》的(dí)最(zuì)後(hòu)一個(gè)章(zhāng)節，本章節把(bǎ)前(qián)麵學(xué)習(xí)的零(líng)碎(suì)內容(róng)串(chuàn)聯起(qǐ)來(lái)，組(zǔ)織成一個網(wǎng)站，將根據本(běn)人這些年(nián)來(lái)的(dí)從(cóng)業(yè)經(jīng)驗(yàn)，從(cóng)建立(lì)站點(diǎn)到(dào)一個完(wán)整(zhěng)的(dí)div+css網頁的(dí)完(wán)成(chéng)，整(zhěng)個(gè)流(liú)程(chéng)下來(lái)，希望能(néng)對各位有所幫(bāng)助(zhù)。由於本節(jié)內(nèi)容較(jiào)多，將分三(sān)部(bù)分(fēn)來(lái)講解(jiě)。
一， 建立站點 二，結構分析 三，搭建框架 四，切割效果圖 五，布局頁麵——頭部和導航 六，布局頁麵——側邊欄 七，布局頁麵——主體部分 八，底部和細節調整 九，相對路徑和相對於根目錄路徑 十，創建服務器環境 十一，建立數據庫 十二，本地和遠程服務器連接 十三，PHP讀取數據 十四，頁麵調試及瀏覽器兼容
一(yī)，建立(lì)站(zhàn)點(diǎn)
前(qián)麵的課程都是零碎(suì)講解一些相關知識(shí)，那麼(mó)要做(zuò)一(yī)個網站(zhàn)，首(shǒu)先需要(yào)建立一個站(zhàn)點。那麼(mó)什(shí)麼是站(zhàn)點，為(wéi)什(shí)麼(mó)要建立一(yī)個站(zhàn)點呢？因為網(wǎng)站(zhàn)不同於其(qí)它(tā)文(wén)件(jiàn)，比如一(yī)個(gè)圖片(piàn)，放(fàng)到(dào)哪(nǎ)個盤哪個(gè)目錄(lù)下(xià)都(dū)可(kě)以訪問(wèn)。而(ér)網(wǎng)站(zhàn)是許多文件相互(hù)關(guān)聯(lián)的，所以(yǐ)要(yào)專門一個(gè)目錄(lù)把它(tā)們分門別(bié)類(lèi)存(cún)放(fàng)起(qǐ)來。如果搞(gǎo)過(guò)視頻(pín)編輯的(dí)朋(péng)友都知(zhī)道，需(xū)要(yào)先建立(lì)一個工(gōng)程(chéng)，把(bǎ)原(yuán)始的視頻文件，圖(tú)片(piàn)素材(cái)分(fēn)類(lèi)放(fàng)好，也(yě)是(shì)這(zhè)個道(dào)理。下(xià)麵(miàn)以在(zài)D盤建(jiàn)立一個(gè)jiaocheng文件夾(jiā)為例，在dreamweaver(簡(jiǎn)稱DW)裏(lǐ)創(chuàng)建一個(gè)站點(diǎn)指(zhǐ)向這個(gè)文(wén)件夾(jiā)，然後在(zài)目(mù)錄下新(xīn)建(jiàn)images文(wén)件(jiàn)夾(jiā)，css文件(jiàn)夾(jiā)等(děng)把各類(lèi)文件分(fēn)別存(cún)放起來(lái)。
保存(cún)後(hòu)，一個站點就建(jiàn)立起來了，我用的是(shì)DW cs5版本(běn)，不同版(bǎn)本(běn)界(jiè)麵有所不同(tóng)。如果要連(lián)接FTP，需(xū)要(yào)設置服務(wù)器選項（後麵會(huì)涉及到）。站點建立(lì)好後，我們先建立一個images和(hé)css文(wén)件(jiàn)夾(jiā)，分(fēn)別用(yòng)來存放圖片(piàn)和css文(wén)件。直接在(zài)windows的(dí)資源(yuán)管(guǎn)理器下建(jiàn)立(lì)或者(zhě)在dw裏建(jiàn)立都(dū)是可(kě)以的(dí)；在dw建立需要在文(wén)件麵板(bǎn)列表的根目錄(lù)上(shàng)點(diǎn)擊右鍵，選擇新建文(wén)件(jiàn)夾後(hòu)更(gēng)改(gǎi)名字(zì)即(jí)可。
二，結構分(fēn)析
創建(jiàn)完(wán)站點(diǎn)後，就(jiù)需(xū)要(yào)對(duì)頁(yè)麵(miàn)結(jié)構進行(háng)分(fēn)析(xī)了，根據效(xiào)果(guǒ)圖，分析(xī)頁麵分(fēn)為(wéi)幾大塊(kuài)，該怎(zěn)麼(mó)布局更合(hé)理(lǐ)。下(xià)麵(miàn)這個圖(tú)是我(wǒ)做的一(yī)個企業(yè)網站的模板(bǎn)，雖然(rán)不怎(zěn)麼好看(kàn)，但目的是(shì)把(bǎ)前邊學(xué)的東西(xī)全都給(gěi)串起(qǐ)來(lái)，讓大家掌握各種情況(kuàng)的處理(lǐ)方法，先(xiān)看(kàn)下效(xiào)果圖(tú)及(jí)在網(wǎng)頁中(zhōng)顯(xiǎn)示(shì)的樣式：
在瀏覽器(qì)中打開效(xiào)果圖預覽
從圖(tú)中可以看出(chū)整個頁(yè)麵分為(wéi)頭部(bù)區(qū)域(yù)，導(dǎo)航區(qū)域，主體(tǐ)部(bù)分和底部，其中(zhōng)主體部分(fēn)又分為左右兩(liǎng)列，整(zhěng)個(gè)頁麵居中顯示，看明(míng)白了這點，下邊(biān)的框(kuàng)架(jià)就好搭建了。整體框架結(jié)果圖(tú)如下(xià)：
三，搭(dā)建(jiàn)框架
首(shǒu)先在(zài)dw裏(lǐ)新建一個HTML文(wén)件(jiàn)：
點擊創建(jiàn)後會自動生(shēng)成(chéng)如下(xià)代(dài)碼(mǎ)的一個html文(wén)件，保存為(wéi)index.html並(bìng)把無(wú)標題文檔改(gǎi)為(wéi)：主頁。強(qiáng)調一點(diǎn)，許(xǔ)多同(tóng)學喜(xǐ)歡把(bǎ)第一行代(dài)碼刪(shān)除(chú)掉，認為(wéi)沒(méi)用(yòng)，其實(shí)這句話(huà)的作用(yòng)大(dà)著(zhuó)呢(ní)，它標(biāo)明以(yǐ)何(hé)種形(xíng)式(shì)解析文(wén)檔，如(rú)果刪除可能會引起樣(yàng)式(shì)表(biǎo)失(shī)效(xiào)或(huò)其它(tā)意(yì)想不到(dào)的(dí)問(wèn)題。接(jiē)下來(lái)需要插(chā)入以上各(gè)個(gè)塊(kuài)的標(biāo)簽了，以(yǐ)插(chā)入(rù)header的標(biāo)簽(qiān)為例(lì)，其(qí)它的插入方法類同(tóng)。
<!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=utf-8" />
<title>主頁(yè)</title>
</head>
<body>
</body>
</html>
按(àn)照(zhào)上圖(tú)的(dí)方(fāng)法(fǎ)依次(cì)插(chā)入標簽(qiān)，或者直接(jiē)在代(dài)碼(mǎ)視(shì)圖中(zhōng)手(shǒu)工輸(shū)入，代碼如(rú)下(xià)：（注(zhù)意(yì)main和(hé)side在(zài)maincontent裏(lǐ)包含(hán)著呢）
<div id="header">此處(chǔ)顯示 id "header" 的內(nèi)容(róng)</div>
<div id="nav">此處顯示 id "nav" 的內容(róng)</div>
<div id="maincontent">
<div id="main">此處顯(xiǎn)示 id "main" 的內容(róng)</div>
<div id="side">此處顯(xiǎn)示(shì) id "side" 的(dí)內容</div>
</div>
<div id="footer">此處(chǔ)顯(xiǎn)示 id "footer" 的(dí)內(nèi)容</div>
從(cóng)上(shàng)邊(biān)的(dí)效果圖分析(xī)得知(zhī)，整個網頁是居中瀏覽(lǎn)器(qì)顯示(shì)的(dí)，按(àn)照(zhào)這(zhè)樣的寫(xiě)法(fǎ)需(xū)要(yào)把以(yǐ)上的(dí)header，nav，maincontent，footer都(dū)設(shè)置寬(kuān)度(dù)並居(jū)中(zhōng)，這樣做起(qǐ)來很麻煩，所以再在(zài)這(zhè)些(xiē)標簽外增加一下父標(biāo)簽(qiān)，設(shè)置這個父標簽(qiān)寬度(dù)並居中後，是(shì)不是所有(yǒu)的(dí)標簽都居中了呢(ní)。增加(jiā)後的(dí)代碼(mǎ)如下：
<div id="container">
<div id="header">此(cǐ)處顯示(shì) id "header" 的內容</div>
<div id="nav">此處(chǔ)顯示 id "nav" 的(dí)內容(róng)</div>
<div id="maincontent">
<div id="main">此(cǐ)處顯示(shì) id "main" 的內容</div>
<div id="side">此處顯(xiǎn)示 id "side" 的內容</div>
</div>
<div id="footer">此處顯示(shì) id "footer" 的內容</div>
</div>
html框架代(dài)碼寫(xiě)完後，下邊(biān)就需(xū)要設置css樣式(shì)表(biǎo)了。先測量下效果圖的整(zhěng)體寬度，然(rán)後設(shè)置container也(yě)是(shì)這(zhè)個(gè)寬(kuān)度並(bìng)居中(zhōng)。說(shuō)起測(cè)量效果圖(tú)寬(kuān)度(dù)，方法有多(duō)種，可(kě)以(yǐ)直接(jiē)查(chá)看圖(tú)片(piàn)尺寸(cùn)。如果(guǒ)測量(liáng)其中某(mǒu)一塊(kuài)的寬度，可(kě)以使(shǐ)用測(cè)量(liáng)軟(ruǎn)件，也可以在ps下測量。本人一般(bān)在(zài)ps下(xià)測量(liáng)，因為效(xiào)果圖在ps下(xià)製作(zuò)的，所(suǒ)以用ps測量也(yě)比(bǐ)較方便。方法是首(shǒu)選項裏(lǐ)把ps的(dí)單位(wèi)改為像素，然(rán)後用(yòng)選(xuǎn)區選中要測(cè)量(liáng)的(dí)部分，在信(xìn)息麵(miàn)板(bǎn)中就(jiù)顯示(shì)出當前(qián)選區的(dí)寬高了（如(rú)果(guǒ)你(nǐ)實在不(bù)知道(dào)怎麼(mó)改單位，怎(zěn)麼選區(qū)怎麼(mó)查(chá)看的，就(jiù)要補習一下ps啦）。
測(cè)量(liáng)後(hòu)得知：整(zhěng)體寬度為(wéi)900px，main部(bù)的寬度(dù)為664px，side寬度為228px。把這三(sān)個(gè)基(jī)本(běn)的(dí)寬(kuān)度(dù)測(cè)量(liáng)後，下麵就(jiù)可(kě)以(yǐ)寫css代(dài)碼了。由於(yú)本實(shí)例是按照(zhào)實(shí)際當中(zhōng)應(yīng)用來(lái)做的，所以(yǐ)css樣式(shì)表(biǎo)就最好寫(xiě)在單(dān)獨文(wén)件(jiàn)裏(lǐ)了(liǎo)，不(bù)要再(zài)寫在(zài)文件內部(bù)了(liǎo)，這樣可(kě)以利(lì)用(yòng)代碼的重用(yòng)性(xìng)，減少很多勞動(dòng)強(qiáng)度。下麵(miàn)就(jiù)新建(jiàn)一個css樣式(shì)表文件：在DW文件(jiàn)菜(cài)單(dān)選擇新建(jiàn)，然後在(zài)打開的窗口頁麵類型中選(xuǎn)擇css，創建(jiàn)後保存在css文件(jiàn)夾中並命(mìng)名(míng)為layout.css
保存(cún)後先設置全(quán)局(jú)的(dí)樣式(shì)，而(ér)後寫每一塊單獨(dú)的(dí)樣式(shì)，全(quán)局樣(yàng)式如(rú)下(xià)：
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
全局的樣(yàng)式定義完(wán)後(hòu)，下麵定義(yì)以(yǐ)上(shàng)幾大塊的樣式，先(xiān)設(shè)置下#containerr的(dí)樣(yàng)式(shì)如下(xià)：
#container { width:900px; margin:0 auto;}
預(yù)覽(lǎn)下(xià)index.html，發(fā)現(xiàn)並沒有改變(biàn)，這是為什(shí)麼(mó)呢？因(yīn)為(wéi)剛定(dìng)義(yì)的(dí)樣式(shì)表(biǎo)沒有(yǒu)和html文件(jiàn)關聯(lián)，所以(yǐ)設(shè)置的(dí)樣式(shì)當(dāng)然不(bù)能對(duì)它生效了，還記(jì)得第(dì)一天(tiān)課(kè)時講(jiǎng)的幾(jī)種樣式並聯方式(shì)嗎？下麵(miàn)我(wǒ)操作(zuò)一遍：在(zài)css麵板中(zhōng)點擊(jī)附加樣式(shì)表按鈕，然後在彈出(chū)的窗口(kǒu)中選擇(zé)剛(gāng)才創(chuàng)建(jiàn)的(dí)樣式(shì)表文件(jiàn)，確定(dìng)，ok了，預覽(lǎn)一(yī)下，是不是(shì)整體已經(jīng)居中了呢。
如(rú)果已經(jīng)是(shì)寬度(dù)為(wéi)900px並居中(zhōng)，說(shuō)明樣式(shì)和文(wén)件關聯好(hǎo)了。這就(jiù)是(shì)為什麼要(yào)定(dìng)義(yì)一個站點了，因為(wéi)許(xǔ)多(duō)文件要關聯(lián)在(zài)一起才(cái)能(néng)構(gòu)成一(yī)個完整(zhěng)的網(wǎng)頁，所以要(yào)把(bǎ)它們放(fàng)在一(yī)起，才能讓這個頁麵找(zhǎo)到(dào)和它相(xiāng)關的文(wén)件在(zài)哪(nǎ)裏。下(xià)麵(miàn)設置內部幾(jī)大塊的(dí)樣式(shì)，為(wéi)了便於觀察，我們把部(bù)分塊(kuài)設置(zhì)了背景色。代碼如下(xià)：
/*body*/
#container { width:900px; margin:0 auto;}
/*header*/
#header { height:70px; background:#CCFFCC; margin-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}
/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}
/*footer*/
#footer { height:70px; background:#CCFFCC;}
現在預覽(lǎn)一下：在IE6下(xià)#maincontent的(dí)底部外(wài)邊(biān)距並(bìng)沒(méi)有(yǒu)生(shēng)效(xiào)，而(ér)在(zài)IE8下，#footer幹脆跑(pǎo)到#maincontent的下(xià)邊了，這(zhè)又是怎(zěn)麼回事呢(ní)？如果(guǒ)前邊(biān)幾(jī)天你都認真學(xué)的話(huà)，那麼(mó)這個問題已經不(bù)是(shì)問題了。這就是(shì)之前(qián)我(wǒ)們講的(dí)，如果(guǒ)一(yī)個容器(qì)內的(dí)元(yuán)素都(dū)浮動的(dí)話，那麼(mó)它(tā)的高(gāo)度將不會(huì)去適(shì)應(yīng)內部(bù)元(yuán)素(sù)的高(gāo)度。解(jiě)決辦(bàn)法(fǎ)是(shì)在(zài)#maincontent增加 overflow:autol; zoom:1;，這(zhè)樣就可(kě)以讓它(tā)自(zì)動適應內(nèi)部元素(sù)的高(gāo)度了。
現在再預(yù)覽一下(xià)，是不是(shì)都正常(cháng)了。為(wéi)了更加(jiā)保(bǎo)險，建議(yì)在header，nav，maincontent，footer之間增加(jiā)如(rú)下一句代(dài)碼(mǎ)並(bìng)設置css樣(yàng)式如下，它的作(zuò)用(yòng)是清除浮(fú)動(dòng)。
<div></div>
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
<!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=utf-8" />
<title>主(zhǔ)頁</title>
<link href="http://www.100181.com/upload/2010-09/16/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">此處(chǔ)顯示 id "header" 的內容(róng)</div>
<div></div>
<div id="nav">此(cǐ)處(chǔ)顯示(shì) id "nav" 的內容(róng)</div>
<div></div>
<div id="maincontent">
<div id="main">此(cǐ)處顯示 id "main" 的(dí)內容</div>
<div id="side">此(cǐ)處(chǔ)顯示(shì) id "side" 的內容</div>
</div>
<div></div>
<div id="footer">此(cǐ)處顯示(shì) id "footer" 的(dí)內容</div>
</div>
</body>
</html>
提示：可以先修改(gǎi)部分(fēn)代碼(mǎ)後再(zài)運(yùn)行
四(sì)，切割(gē)效果圖
基本(běn)框架(jià)搭建(jiàn)完畢後，下一步就是要分析(xī)每一塊該(gāi)怎(zěn)麼切(qiē)圖了(liǎo)。切(qiē)圖方(fāng)法有(yǒu)多種，可(kě)以使用(yòng)ps或fireworks自帶(dài)的切(qiē)片(piàn)工具，也(yě)可以用(yòng)QQ的(dí)截屏或(huò)者(zhě)創(chuàng)建新文件，把(bǎ)需要(yào)的部分復(fù)製過來保存都可以(yǐ)，關(guān)鍵看個人喜(xǐ)好了。
用ps的切(qiē)片(piàn)工具的(dí)話，把(bǎ)需要切(qiē)割(gē)的(dí)區域(yù)用(yòng)切片工(gōng)具(jù)切分(fēn)，如(rú)果(guǒ)要設(shè)置圖片的名稱，請使用切(qiē)片(piàn)選擇工(gōng)具，然後在切(qiē)片上雙擊，會彈出如下窗(chuāng)口，填寫名字後(hòu)確(què)定即(jí)可。
切割(gē)完(wán)後(hòu)，需要保存圖(tú)片了，選擇文件(jiàn)——存(cún)儲為(wéi)web和(hé)設(shè)備(bèi)所(suǒ)用格式(shì)，在(zài)彈出的窗口(kǒu)中點(diǎn)擊選(xuǎn)中切(qiē)片(piàn)，然(rán)後在右側可以設置當(dāng)前切(qiē)片(piàn)的圖片格式(shì)。這裏有個技巧(qiǎo)，一般小(xiǎo)型(xíng)色彩(cǎi)單一的圖(tú)片(piàn)，采(cǎi)用gif格式(shì)，照片(piàn)類大型圖片采(cǎi)用jpg，這(zhè)樣生成(chéng)的圖片(piàn)既能(néng)保證質量(liáng)，圖片(piàn)體(tǐ)積又小，
設置完圖片(piàn)的(dí)格(gé)式後(hòu)，就可(kě)以(yǐ)存儲(chǔ)了，這(zhè)裏(lǐ)選擇到(dào)images的(dí)上(shàng)一級目(mù)錄就(jiù)行(háng)了，ps會(huì)自(zì)動(dòng)創建images目錄(lù)並(bìng)把(bǎ)圖(tú)片文件(jiàn)放(fàng)入，如果(guǒ)已(yǐ)存(cún)在(zài)，直接放(fàng)入(rù)。在格式(shì)處(chǔ)選擇僅(jǐn)限圖(tú)像(xiàng)，如果選(xuǎn)擇html和圖像(xiàng)，ps會自(zì)動(dòng)生成一(yī)個(gè)表格(gé)式(shì)的(dí)網頁(yè)，這(zhè)個(gè)頁(yè)麵不(bù)是(shì)我(wǒ)們(mén)需(xū)要(yào)的，就不讓它(tā)生成了(liǎo)；還(huán)有一個需要注意的(dí)地(dì)方就(jiù)是選擇所(suǒ)有(yǒu)用(yòng)戶(hù)切(qiē)片(piàn)，這樣隻(zhī)把我們手動切(qiē)割的圖(tú)片保存(cún)下來，其它的就(jiù)不保存了(liǎo)。保存後的圖(tú)片(piàn)如下所示(shì)，其中hot_bg.gif這(zhè)張圖(tú)片(piàn)切(qiē)割(gē)時沒有(yǒu)隱(yǐn)藏(cáng)上(shàng)邊(biān)的文字，一會(huì)兒在(zài)ps裏再處理(lǐ)一(yī)下(xià)把文字抹掉(diào)。
目(mù)前所(suǒ)切的圖片隻是一(yī)部(bù)分(fēn)，並沒(méi)有把整(zhěng)個頁麵所需的圖片全(quán)都(dū)切(qiē)割下來，比(bǐ)如導航部(bù)分所(suǒ)用背景圖(tú)片(piàn)可(kě)以放到(dào)一張圖片上，下(xià)麵就用新(xīn)建(jiàn)文件(jiàn)，然後用QQ截屏(píng)，粘(nián)貼過(guò)去的(dí)方法來創建(jiàn)。
分(fēn)析一下上圖(tú)的(dí)導航部分：1，兩端的(dí)圓(yuán)角(jiǎo)；2，鼠標劃過狀(zhuàng)態和當前欄(lán)目狀態寬(kuān)度應該隨著(zhuó)字(zì)數(shù)的多(duō)少而(ér)改(gǎi)變；3，二級導(dǎo)航有鼠標劃過(guò)時(shí)的(dí)狀態(tài)。分析完(wán)之後，就需要把需(xū)要的圖片(piàn)整合(hé)到(dào)一張(zhāng)圖(tú)片上(shàng)了(liǎo)，整(zhěng)合(hé)的結(jié)果如下(xià)圖(tú)，這個根(gēn)據自己的需要進(jìn)行整(zhěng)合(hé)。其實完(wán)全(quán)可(kě)以把其它一(yī)些(xiē)小圖(tú)標(biāo)都(dū)整合在一(yī)張，但(dàn)那樣操作(zuò)起來(lái)比(bǐ)較麻煩，所(suǒ)以(yǐ)我們(mén)還(huán)是歸一(yī)下(xià)類(lèi)，把相關(guān)的圖標整合(hé)到一起(qǐ)。
接下來(lái)整合(hé)側(cè)邊欄的背(bèi)景(jǐng)圖(tú)片，分(fēn)析發現側邊欄應用同樣(yàng)的樣式(shì)，隻(zhī)不過高(gāo)度有所(suǒ)不同，而且(qiě)是四角(jiǎo)都(dū)是(shì)圓(yuán)角，所以隻(zhī)用(yòng)一個(gè)通(tōng)用(yòng)的就(jiù)可(kě)以滿足(zú)所有(yǒu)側(cè)邊(biān)欄塊(kuài)的(dí)需(xū)求了。那麼怎麼製(zhì)作這(zhè)個(gè)通(tōng)用的(dí)背景呢？從下(xià)圖我(wǒ)們發現(xiàn)，標(biāo)題(tí)的高(gāo)度都(dū)是一樣(yàng)的(dí)，隻不過(guò)是下邊(biān)的內(nèi)容(róng)高度(dù)不同(tóng)而已(yǐ)，那麼(mó)我們(mén)把(bǎ)下邊內容(róng)的(dí)背景(jǐng)製(zhì)作(zuò)的足夠長(cháng)，超過可能(néng)出現的最(zuì)大高度(dù)就(jiù)可以(yǐ)滿足需求(qiú)了。
整合後(hòu)的效果(guǒ)如上圖，如果你現(xiàn)在(zài)還(huán)不(bù)明白(bái)為什麼要這麼做，那麼(mó)一會兒寫完(wán)樣式表(biǎo)你就(jiù)明(míng)白了(liǎo)。下麵把三(sān)個圖標也給(gěi)切(qiē)出來，如下(xià)圖：
這些完事(shì)後，還(huán)有(yǒu)聯係(xì)我(wǒ)們的(dí)圖片和修(xiū)飾小圖(tú)標了。聯係(xì)我們的(dí)圖片(piàn)如(rú)下(xià)，這(zhè)裏(lǐ)的圖片(piàn)和小(xiǎo)圖(tú)標要背景透(tòu)明(míng)，這樣才(cái)不會(huì)遮(zhē)蓋(gài)下麵(miàn)的(dí)背景。
（接下(xià)一篇(piān)）
div+css網(wǎng)頁標(biāo)準布局實例(lì)教(jiào)程（二）
（接(jiē)上(shàng)一篇，本(běn)節教程(chéng)文字較多，比(bǐ)較(jiào)枯燥(zào)，如(rú)果(guǒ)前邊知識學習牢(láo)固，可以直(zhí)接下(xià)載源(yuán)代(dài)碼(mǎ)查看(kàn)，哪(nǎ)個(gè)地(dì)方不明(míng)白，再(zài)回(huí)過頭來(lái)看哪一部分(fēn)）
五(wǔ)，布局頁(yè)麵——頭部和導(dǎo)航(háng)
有(yǒu)了上邊的基礎(chǔ)，下(xià)麵的(dí)任務就是要利用(yòng)html和(hé)css製(zhì)作(zuò)完成(chéng)一個完(wán)整的網(wǎng)頁了。先從(cóng)頭部(bù)開(kāi)始(shǐ)，第三(sān)小(xiǎo)節(jié)時我(wǒ)們(mén)已經把(bǎ)整體框架給搭建好(hǎo)了，就像(xiàng)蓋(gài)房子(zǐ)一(yī)樣，整(zhěng)體結(jié)構已經出來了(liǎo)，下麵(miàn)就需(xū)要(yào)填磚分割空間(jiān)了。先分析下頭(tóu)部：分為兩部分，一個是logo靠左側顯示，一個是(shì)搜(sōu)索(suǒ)靠(kào)右側(cè)顯(xiǎn)示，那麼布局時(shí)插入兩個div，一個(gè)向左浮動，一個(gè)向(xiàng)右浮動的方(fāng)式(shì)來(lái)完成。另外(wài)還(huán)有(yǒu)很(hěn)多種(zhǒng)實現方法，比如logo用(yòng)h1標(biāo)簽(qiān)，搜索用span，或(huò)者(zhě)把logo做(zuò)為背景(jǐng)圖(tú)片也(yě)是可以(yǐ)的，不(bù)管(guǎn)采(cǎi)用(yòng)哪種方法，要根(gēn)據(jù)頁麵的(dí)需(xū)求選(xuǎn)用(yòng)一種最合(hé)理(lǐ)的方法(fǎ)。如果要在logo加上鏈接的話(huà)，那麼就(jiù)不能用背景(jǐng)圖片的(dí)方法了。
<div id="header">
<div id="logo">此處顯(xiǎn)示 id "logo" 的內容(róng)</div>
<div id="search">此處(chǔ)顯(xiǎn)示(shì) id "search" 的內容(róng)</div>
</div>
先在(zài)header裏插入以上(shàng)兩塊元(yuán)素(sù)。然後(hòu)分別插入相(xiāng)應(yīng)的內容(róng)，在logo裏(lǐ)插入我們事(shì)先(xiān)切(qiē)割(gē)好的logo圖片，在(zài)search裏(lǐ)插入一個表單，一個文本框(kuàng)和(hé)一個按鈕，插(chā)入後如下(xià)：
<div id="header">
<div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索產(chǎn)品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查詢" />
</form>
</div>
</div>
接下來(lái)定義css吧(bā)，在ps裏測量，頭部(bù)的高度是71px，logo距頂部(bù)18px，搜(sōu)索產(chǎn)品(pǐn)距頂部30px，下麵(miàn)在css裏(lǐ)把這些參(cān)數都(dū)給定義上，看(kàn)顯(xiǎn)示(shì)的(dí)效果和效果圖中的(dí)效果(guǒ)是不是一(yī)樣(yàng)呢？
#logo { float:left; margin-top:18px;}
#search { float:right; margin-top:30px;}
這兩項的(dí)位置已經差(chà)不(bù)多了(liǎo)。預覽(lǎn)你會發現，搜索(suǒ)框和按鈕(niǔ)跟效果(guǒ)圖中的(dí)不一樣，這(zhè)是因(yīn)為我們(mén)還沒對它(tā)設置樣式(shì)，接下(xià)來把文本(běn)框增(zēng)加(jiā)一(yī)個class為(wéi)inp_srh樣式，按(àn)鈕(niǔ)增加btn_srh的(dí)樣式(shì)，然(rán)後(hòu)定義(yì)這兩個(gè)樣(yàng)式的屬性。
#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
.btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
#search * { vertical-align:middle;}
我(wǒ)們(mén)給(gěi)search增加(jiā)了高(gāo)度和(hé)文(wén)字(zì)顏(yán)色，這點(diǎn)不(bù)用多(duō)解釋，但(dàn)高度為什麼(mó)是(shì)24px，是(shì)為了照(zhào)顧(gù) IE6，大家去掉(diào)測(cè)試下(xià)就(jiù)知道了；
inp_srh的(dí)寬(kuān)度和高度並不是實際效(xiào)果圖(tú)中(zhōng)的(dí)寬高，是因為默認情(qíng)況(kuàng)下文本(běn)框帶有(yǒu)內邊(biān)距(jù)造(zào)成的。另(lìng)外就(jiù)是padding的值也(yě)會算(suàn)到總寬(kuān)度上(shàng)的；
btn_srh就(jiù)是(shì)應用背(bèi)景(jǐng)圖(tú)像來實(shí)現的，說明一點(diǎn)這裏的border的(dí)值(zhí)為(wéi)none指的(dí)是無邊(biān)框(kuàng)，cursor定(dìng)義鼠標樣式為(wéi)手形，之前(qián)許多朋(péng)友(yǒu)用hand，但這個(gè)通不(bù)過w3c認(rèn)證。text-indent:-999em這個屬性許(xǔ)多朋友可能不理(lǐ)解是幹(gān)什麼(mó)用(yòng)的了(liǎo)，它(tā)的(dí)作用相(xiāng)當於word中的首行縮進，這(zhè)裏設置(zhì)成(chéng)-999，意(yì)思是(shì)向左側(cè)縮進-999em，這樣是(shì)不是(shì)就(jiù)看不到(dào)文字(zì)啦，所以(yǐ)它(tā)的(dí)作用是將按(àn)鈕上的文字(zì)隱(yǐn)藏(cáng)，當(dāng)然也可(kě)以在(zài)html代碼中插(chā)入空格(gé)代替文字(zì)，但這(zhè)樣做(zuò)有(yǒu)點不(bù)太好，在(zài)不支(zhī)持(chí)css的(dí)設備上查看(kàn)時(shí)，用戶(hù)不知(zhī)道這個按鈕(niǔ)是(shì)幹什麼(mó)的了。所以建議采用這(zhè)種形(xíng)式；
有必要解釋下最後一行，它的特(tè)殊之處在樣(yàng)式(shì)名和(hé)大括(kuò)號(hào)之(zhī)間加(jiā)了(liǎo)一(yī)個(gè)*號，這(zhè)裏(lǐ)兼容(róng)所(suǒ)用的，屬於css hack部分(fēn)內容，是(shì)定(dìng)義(yì)這些元素都(dū)垂直(zhí)居中(zhōng)對齊。css hack本身就是無意(yì)思(sī)的(dí)東(dōng)西，所以(yǐ)不做(zuò)過(guò)多解(jiě)釋(shì)，知(zhī)道當需要垂直居(jū)中對齊時就采用(yòng)這種寫法就行了(liǎo)，但是一定不(bù)要濫(làn)用，這個(gè)屬性也(yě)是有缺陷的(dí)，當有英文和(hé)中文(wén)同時出現(xiàn)時(shí)，英(yīng)文(wén)會靠上顯(xiǎn)示(shì)的。有(yǒu)關(guān)css hack更(gēng)多的(dí)內容(róng)，請(qǐng)參(cān)考(kǎo)http://www.100181.com/special/css_hack/index.shtml
這(zhè)些(xiē)設(shè)置完後(hòu)，把(bǎ)最(zuì)初搭建(jiàn)框架(jià)時設(shè)置的(dí)header的背景(jǐng)色(sè)和底(dǐ)部外邊(biān)距(jù)給(gěi)去掉(diào)吧(bā)。
#header { height:71px;}
至此(cǐ)，頭部的樣式(shì)就(jiù)完成了，下(xià)邊(biān)該製作(zuò)導航了(liǎo)。分(fēn)析(xī)一(yī)下，導(dǎo)航分(fēn)為一級(jí)導航和二級導航，所以我需要(yào)在(zài)nav下再(zài)插入(rù)nav_main和(hé)nav_son兩個(gè)塊元素(sù)。
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div>
<ul>
<li><a href="#"><span>首(shǒu)頁(yè)</span></a></li>
<li><a href="#" id="nav_current"><span>企業新聞(wén)</span></a></li>
<li><a href="#"><span>企業簡(jiǎn)介(jiè)</span></a></li>
<li><a href="#"><span>產品(pǐn)展廳(tīng)</span></a></li>
<li><a href="#"><span>企(qǐ)業歷史(shǐ)</span></a></li>
<li><a href="#"><span>招(zhāo)商(shāng)加盟</span></a></li>
<li><a href="#"><span>網上下單(dān)</span></a></li>
<li><a href="#"><span>聯(lián)係我們</span></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">企業動態</a></li>
<li><a href="#">領導活動</a></li>
<li><a href="#">產(chǎn)品資(zī)訊</a></li>
<li><a href="#">通知公(gōng)告</a></li>
</ul>
</div>
</div>
先(xiān)設(shè)置(zhì)nav的高度及背(bèi)景圖片樣式。
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
完了(liǎo)之(zhī)後(hòu)該(gāi)一級菜單(dān)和二(èr)級(jí)菜(cài)單的(dí)樣式(shì)了
.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
.nav_son { height:30px;}
.nav_son ul li { float:left; margin-top:4px;}
.nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}
這(zhè)些樣式的作(zuò)用(yòng)就(jiù)不多(duō)講了，以(yǐ)前(qián)的(dí)課程(chéng)當中已詳細(xì)講(jiǎng)解(jiě)過了，隻(zhī)不過(guò)本例使用(yòng)了雙(shuāng)導航菜單而(ér)已(yǐ)。現在在瀏覽器下(xià)預覽(lǎn)一下吧，看看(kàn)效果怎(zěn)麼樣(yàng)，是不(bù)是(shì)和效(xiào)果圖差(chà)不(bù)多了，但還有最後一(yī)步就是(shì)兩(liǎng)端的圓(yuán)角沒實(shí)現，實(shí)現(xiàn)圓角的(dí)方(fāng)法(fǎ)也(yě)不復雜(zá)，隻需再增加兩(liǎng)行代碼和(hé)兩(liǎng)個(gè)樣(yàng)式即可(kě)。在(zài)nav下(xià)nav_main之前增加(jiā)如下(xià)兩(liǎng)行代碼：
<div id="nav_l"></div>
<div id="nav_r"></div>
然後用樣式表定(dìng)義(yì)一個左側(cè)的圓角(jiǎo)，一個(gè)右側的(dí)圓(yuán)角。css樣式如下(xià)：
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
預(yù)覽一下吧，看看頭(tóu)部和導航(háng)是不是和效果圖中(zhōng)的一(yī)樣(yàng)呢(ní)
<!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=utf-8" />
<title>主頁</title>
<link href="http://www.100181.com/upload/2010-09/21/css/layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="http://www.100181.com/upload/2010-09/21/images/logo.gif" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索產品(pǐn)
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查詢" />
</form>
</div>
</div>
<div></div>
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div>
<ul>
<li><a href="#"><span>首頁(yè)</span></a></li>
<li><a href="#" id="nav_current"><span>企業(yè)新聞</span></a></li>
<li><a href="#"><span>企業簡(jiǎn)介</span></a></li>
<li><a href="#"><span>產品展(zhǎn)廳</span></a></li>
<li><a href="#"><span>企業(yè)歷史</span></a></li>
<li><a href="#"><span>招商(shāng)加盟</span></a></li>
<li><a href="#"><span>網上(shàng)下單</span></a></li>
<li><a href="#"><span>聯係(xì)我(wǒ)們(mén)</span></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">企(qǐ)業(yè)動態(tài)</a></li>
<li><a href="#">領導活(huó)動</a></li>
<li><a href="#">產(chǎn)品資(zī)訊</a></li>
<li><a href="#">通知公告(gào)</a></li>
</ul>
</div>
</div>
<div></div>
<div id="maincontent">
<div id="main">此處顯示(shì) id "main" 的(dí)內(nèi)容(róng)</div>
<div id="side">此(cǐ)處(chǔ)顯(xiǎn)示(shì) id "side" 的內(nèi)容</div>
</div>
<div></div>
<div id="footer">此處顯示 id "footer" 的(dí)內(nèi)容(róng)</div>
</div>
</body>
</html>
提(tí)示：可以先(xiān)修(xiū)改(gǎi)部分代碼(mǎ)後再運行
六(liù)，布局(jú)頁(yè)麵(miàn)——側(cè)邊欄
主體部分(fēn)涉及side和(hé)main兩(liǎng)部分(fēn)，的內容(róng)比較(jiào)多，但(dàn)都不(bù)難，本(běn)節教程沒(méi)有(yǒu)增加(jiā)什(shí)麼(mó)新的(dí)知(zhī)識點(diǎn)，學起來(lái)並(bìng)不吃力。主(zhǔ)體(tǐ)部分先(xiān)從側邊(biān)欄說(shuō)起，講解如(rú)何(hé)切(qiē)圖(tú)時已(yǐ)經說過，側(cè)邊(biān)欄可(kě)以共(gòng)用一(yī)個樣式，下(xià)麵就(jiù)先做一個(gè)通用(yòng)的，插(chā)入如下(xià)html代(dài)碼(mǎ)
<div>
<h2><strong>產品(pǐn)</strong>導(dǎo)購(gòu)</h2>
<div>此(cǐ)處顯示(shì) class "side_con" 的(dí)內容</div>
</div>
這(zhè)裏的標(biāo)題采用(yòng)h2標簽，沒(méi)必要再用個div，還有(yǒu)“產(chǎn)品導購”中(zhōng)“產(chǎn)品”二字是紅(hóng)色字(zì)體，這(zhè)裏用strong標簽，這樣(yàng)可(kě)以省去(qù)很多沒(méi)必要的定(dìng)義，所(suǒ)以在頁(yè)麵布局當中一定要合理(lǐ)利用每一個標簽。講到這裏，有必要說一(yī)下第(dì)一(yī)節(jié)教(jiào)程(chéng)中(zhōng)講(jiǎng)的為(wéi)什麼不(bù)能叫div+css而應該叫xhtml+css了，因為(wéi)div隻是xhtml中的(dí)一個(gè)標簽，叫(jiào)div+css會讓(ràng)許多朋友誤認(rèn)為遇(yù)到塊級(jí)元(yuán)素就得用div，造成(chéng)了div的(dí)濫用，而合理利用每(měi)個標簽，才是web標(biāo)準(zhǔn)設計(jì)的一(yī)個準(zhǔn)則。回(huí)過(guò)頭來定(dìng)義(yì)側邊欄(lán)的(dí)樣式(shì)如下：
#side { float:right; width:228px;}
.side_box { margin-bottom:8px;}
.side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}
.side_box h2 strong { color:#f30;}
.side_con { padding:10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;}
預覽(lǎn)一下效(xiào)果吧，是不是整體(tǐ)效果出來(lái)了，下邊(biān)就需要定義(yì)裏(lǐ)邊各(gè)個部分了。
先(xiān)看下(xià)產(chǎn)品導(dǎo)購(gòu)部(bù)分，內(nèi)容(róng)分(fēn)為三(sān)部分(fēn)，可以用ul，li列表的(dí)形(xíng)式實現，前邊的(dí)圖(tú)標用背景圖(tú)片(piàn)來(lái)實現(xiàn)，可(kě)以(yǐ)在li上(shàng)設置(zhì)背景(jǐng)圖(tú)片，但(dàn)這(zhè)樣麻煩一點，每(měi)個(gè)都需(xū)要(yào)設(shè)置，而(ér)且(qiě)還(huán)得定位(wèi)，有個更簡(jiǎn)便(biàn)的方(fāng)法是(shì)定義ul的(dí)背景圖(tú)片，因為(wéi)在切(qiē)圖(tú)標(biāo)時，每個圖(tú)標(biāo)之間(jiān)的(dí)間距是按照效果圖的(dí)間距來(lái)切的。
<div>
<h2><strong>產品(pǐn)</strong>導(dǎo)購</h2>
<div class="side_con product">
<ul>
<li><strong>語(yǔ)音(yīn)業(yè)務：</strong><a href="#">普通(tōng)電(diàn)話(huà)</a> | <a href="#">語(yǔ)音數(shù)字中繼</a></li>
<li><strong>語音(yīn)業(yè)務：</strong><a href="#">普通電話(huà)</a> | <a href="#">語(yǔ)音(yīn)數字(zì)中繼</a></li>
<li><strong>語音業(yè)務(wù)：</strong><a href="#">普(pǔ)通電(diàn)話(huà)</a> | <a href="#">語音數(shù)字中繼</a></li>
</ul>
</div>
</div>
細心的用戶(hù)已發(fā)現，這(zhè)裏的class後(hòu)跟了(liǎo)兩(liǎng)個樣式名(míng)稱(chēng)，說明一個(gè)元素(sù)是可(kě)以定義多(duō)個樣(yàng)式的，中(zhōng)間用空格(gé)分開。也(yě)可以把product樣(yàng)式(shì)定義(yì)在ul上。
說(shuō)到可(kě)以定義多(duō)個(gè)樣式，強調(tiáo)一點(diǎn)：許多(duō)新手朋(péng)友(yǒu)常(cháng)常(cháng)大量(liáng)使(shǐ)用，如一個塊元(yuán)素(sù)需(xū)要設(shè)置邊框，綠(lǜ)色(sè)文(wén)字(zì)和灰色(sè)背(bèi)景(jǐng)所以就在(zài)css裏定(dìng)義：
.border { border:1px solid #f60;}
.color { color:#080;}
.bg { background:#ccc;}
然後在(zài)塊元素上增加：
<div class="border color bg">此(cǐ)處顯(xiǎn)示(shì)新(xīn) Div 標簽的(dí)內(nèi)容(róng)</div>
其實這是(shì)一個(gè)非常不(bù)好(hǎo)的(dí)寫(xiě)法，這樣表(biǎo)麵看(kàn)似(sì)達(dá)到(dào)了代碼(mǎ)重用性，但實際當(dāng)中，當需(xū)要把其中(zhōng)一(yī)個元素(sù)的的邊框改為2px，怎(zěn)麼改？如(rú)果(guǒ)把.border的邊框改了(liǎo)，那(nà)麼所(suǒ)有(yǒu)應(yīng)用這(zhè)一樣式的元(yuán)素都改了(liǎo)。如果再(zài)在代(dài)碼中增加一個樣(yàng)式，那(nà)麼又得(dé)去改(gǎi)html代碼，和(hé)代(dài)碼(mǎ)和結構(gòu)分離的理念相違背了(liǎo)。一個好的(dí)代碼布局，不(bù)管以後怎麼(mó)改風(fēng)格(gé)，隻用改樣式(shì)表，而不(bù)用去改html代碼(mǎ)，這(zhè)才真正(zhèng)做(zuò)到兩者分(fēn)離了(liǎo)。
扯(chě)遠了，不(bù)過(guò)這點很重(zhòng)要，新(xīn)手(shǒu)很容易犯這(zhè)個(gè)毛(máo)病(bìng)。回(huí)到剛才的(dí)問題(tí)上，給第三個li定義了一個product3樣式(shì)，然(rán)後在樣(yàng)式(shì)表(biǎo)中定(dìng)義(yì)它的底(dǐ)部邊框(kuàng)為無(wú)，因為前邊定義(yì)li的底邊框為1px的虛綫(xiàn)，而最後一(yī)個不需(xū)要(yào)，所(suǒ)以單獨定義個(gè)樣式把它(tā)取消(xiāo)掉，這(zhè)裏的(dí)product根(gēn)據(jù)需要自(zì)己定義(yì)的名稱，一(yī)般用能(néng)表達(dá)這塊內容意(yì)思(sī)的簡潔(jié)英文(wén)來(lái)表(biǎo)示(shì)，或(huò)者(zhě)用拼(pīn)音。有(yǒu)關樣式(shì)命名上請(qǐng)參(cān)考(kǎo)：http://www.100181.com/web_w3c/248.shtml。“產(chǎn)品導(dǎo)購”的(dí)樣式定義如下：
.product { padding:0px 10px;}
.product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}
.product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}
.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}
“產品導購”完成(chéng)後(hòu)，下邊該“使(shǐ)用問(wèn)答”了。“使用問答(dá)”部分(fēn)都(dū)是一問一(yī)答(dá)的形(xíng)式(shì)，問答各采用(yòng)不(bù)同(tóng)的圖標，而(ér)且問的文字加(jiā)粗了。所以這(zhè)部(bù)分采(cǎi)用dl，dt，dd的(dí)形式來完成。
<div class="side_con ask">
<dl>
<dt><a href="#">最新(xīn)出的這(zhè)個產(chǎn)品(pǐn)如何(hé)使用？</a></dt>
<dd>該產(chǎn)品(pǐn)采用全新(xīn)的技術，較上(shàng)一產(chǎn)品(pǐn)有質的飛躍，功能上(shàng)增(zēng)強了許多，使用方(fāng)法(fǎ)更(gēng)加(jiā)簡便(biàn)...</dd>
</dl>
<dl>
<dt><a href="#">最新出(chū)的這(zhè)個(gè)產(chǎn)品如(rú)何使用(yòng)？</a></dt>
<dd>該產品采(cǎi)用(yòng)全新的技術，較上(shàng)一(yī)...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新(xīn)出(chū)的(dí)這個(gè)產品如何(hé)使用(yòng)？</a></dt>
<dd>該(gāi)產(chǎn)品采用(yòng)全新的(dí)技(jì)術(shù)，較上(shàng)一(yī)產品有(yǒu)質的(dí)飛躍，功能(néng)上增(zēng)強了...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新(xīn)出的(dí)這個產(chǎn)品(pǐn)如(rú)何使用(yòng)？</a></dt>
<dd>該產(chǎn)品(pǐn)采用全新的技術，較上一(yī)產(chǎn)品有質的飛(fēi)躍(yuè)，功能上增(zēng)強...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新出的這(zhè)個產品如(rú)何使(shǐ)用(yòng)？</a></dt>
<dd>該(gāi)產品采(cǎi)用全(quán)新的(dí)技術，較上一(yī)產品(pǐn)有(yǒu)質的飛躍，功能(néng)上增強了許(xǔ)多，使(shǐ)用方法更(gēng)加簡(jiǎn)便(biàn)...</dd>
</dl>
</div>
.ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
.ask dl dt a { color:#666;}
.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}
“使用(yòng)問(wèn)答”完成後(hòu)，側(cè)邊欄就剩(shèng)下(xià)“聯係我們”了(liǎo)，這個更(gēng)簡單，直(zhí)接(jiē)插入圖片(piàn)就行(háng)了，然後調整一下位置就可以了。
<div>
<h2><strong>聯(lián)係</strong>我們(mén)</h2>
<div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>
</div>
.contact { padding:2px;}
七(qī)，布局頁麵——主體(tǐ)部(bù)分
主(zhǔ)體(tǐ)部分可以(yǐ)分三大部分，頂部(bù)是(shì)幻燈和熱點新聞，中間是圖(tú)片(piàn)列表，下邊是左(zuǒ)右兩(liǎng)塊(kuài)，先(xiān)來布局主(zhǔ)體(tǐ)部分的頂部。頂(dǐng)部(bù)實際(jì)上(shàng)還是個(gè)左右(yòu)兩列布(bù)局，沒什麼(mó)復(fù)雜(zá)之(zhī)處，就(jiù)不再(zài)貼代碼了，本節(jié)結尾會提(tí)供實例(lì)的(dí)源代碼(mǎ)。講(jiǎng)解一點：熱點新(xīn)聞列(liè)表中的(dí)日(rì)期(qī)，是(shì)用一(yī)個span標簽寫(xiě)在(zài)了內容的前邊，然(rán)後把span向右(yòu)浮動就實現(xiàn)了(liǎo)，“個(gè)人(rén)登錄”和“商戶(hù)登(dēng)錄”的(dí)實(shí)現(xiàn)方法也是如此。
之(zhī)前許(xǔ)多朋友(yǒu)問(wèn)，像(xiàng)標(biāo)準之路主頁(yè)的(dí)幻燈(dēng)是(shì)怎麼實現的(dí)？其實實很簡單(dān)，隻要你動(dòng)動(dòng)手(shǒu)，就知道怎麼做的(dí)了(liǎo)。但(dàn)許多同學遇(yù)到(dào)個(gè)問題不去考慮靠自己(jǐ)能力能(néng)否解決，而(ér)是(shì)上來就問，這(zhè)是一個(gè)很不好(hǎo)的(dí)學習態度(dù)？先(xiān)找找辦(bàn)法，如果實(shí)在(zài)解(jiě)決不了(liǎo)，再(zài)來(lái)問(wèn)也不(bù)遲。方(fāng)法是查看標準之(zhī)路主(zhǔ)頁(yè)源(yuán)代碼，找到幻(huàn)燈部分(fēn)，你會發(fā)現(xiàn)有如(rú)下一段(duàn)js代碼，而(ér)且(qiě)代碼中有(yǒu)幾個設置參(cān)數的(dí)地(dì)方(fāng)，那麼要(yào)想在自己(jǐ)網(wǎng)站實現這樣的(dí)功能(néng)，直接(jiē)把這(zhè)部分代(dài)碼插入到(dào)自己網(wǎng)站(zhàn)相(xiāng)應位置，修(xiū)改參數(shù)中的大(dà)小為自己(jǐ)的大(dà)小，圖(tú)片(piàn)地(dì)址(zhǐ)為(wéi)自(zì)己的(dí)圖片地址(zhǐ)，還(huán)有(yǒu)就是下載swf文(wén)件，並(bìng)改為相應正確的地(dì)址。如(rú)果你(nǐ)有html基(jī)礎(chǔ)的(dí)話(huà)，這些(xiē)一點都(dū)不難，還是那句(jù)話，一(yī)定要多動(dòng)手，多動(dòng)腦(nǎo)。
把(bǎ)如上一段(duàn)代(dài)碼拷(kǎo)貝(bèi)到(dào)本(běn)例(lì)的幻燈圖片(piàn)位置(zhì)，下載(zǎi)實現幻燈(dēng)的swf文件到本地(dì)images文件(jiàn)夾下，地址為：http://www.100181.com/v3/images/indexpic.swf，接下來(lái)修(xiū)改(gǎi)/v3/images/indexpic.swf為(wéi)images/indexpic.swf；修(xiū)改swf_width和(hé)swf_height的(dí)值(zhí)為(wéi)269和(hé)210；files的(dí)值(zhí)為圖片路(lù)徑，links為圖(tú)片的鏈接(jiē)地址，texts為標題(tí)名(míng)稱(chēng)，中間也(yě)是(shì)用|分(fēn)隔，這樣(yàng)就(jiù)實(shí)現了幻燈圖(tú)片(piàn)展(zhǎn)示了(liǎo)。
幻燈(dēng)實(shí)現後，接(jiē)下來(lái)該(gāi)中間(jiān)部分(fēn)圖片(piàn)列(liè)表(biǎo)了(liǎo)，和(hé)第六天(tiān)學(xué)習(xí)的橫向(xiàng)圖文列表(biǎo)是(shì)一樣的。唯一區(qū)別(bié)就(jiù)是多了一個標題(tí)。在(zài)index_top下插(chā)入如(rú)下代碼(mǎ)：
<div id="index_pic">
<h2><span></span></h2>
<ul>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產品名(míng)稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品(pǐn)名稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品名(míng)稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品(pǐn)名(míng)稱(chēng)</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品名(míng)稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品(pǐn)名(míng)稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產品名稱</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />產(chǎn)品名稱</a></li>
</ul>
</div>
#index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}
#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;}
#index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}
#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}
#index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}
#index_pic ul li a { display:block;}
#index_pic ul li img { margin-bottom:3px;}
這(zhè)次沒(méi)做鼠標(biāo)劃過時(shí)邊框效(xiào)果(guǒ)，相(xiāng)對之前(qián)的簡(jiǎn)單(dān)一點，需(xū)要(yào)了解(jiě)鼠標劃(huá)過(guò)改變邊(biān)框(kuàng)效(xiào)果(guǒ)的請(qǐng)學習(xí)http://www.100181.com/div_css/907.shtml。本例中(zhōng)“熱門產(chǎn)品”的圖標(biāo)采用(yòng)了(liǎo)背(bèi)景圖片(piàn)，也(yě)可以(yǐ)采(cǎi)用一(yī)個圖(tú)片直接(jiē)插入，但從用(yòng)戶體驗(yàn)的角度(dù)來(lái)講(jiǎng)，這(zhè)些(xiē)圖片還是(shì)以(yǐ)背景圖片(piàn)插(chā)入(rù)為好，因(yīn)為背(bèi)景(jǐng)圖(tú)片在整個(gè)頁麵加(jiā)載過(guò)程中(zhōng)後來(lái)加(jiā)載的(dí)。
圖片列表(biǎo)完(wán)了之(zhī)後，主體部(bù)分就剩下(xià)“企(qǐ)業歷(lì)史”和“招商加(jiā)盟(méng)”兩塊(kuài)了。這兩塊(kuài)也是(shì)應(yīng)用(yòng)左右浮動的(dí)方(fāng)式(shì)實現(xiàn)。這兩塊的(dí)代(dài)碼(mǎ)就(jiù)不(bù)貼出來了，一會(huì)兒看實(shí)例(lì)。強調(tiáo)一點是(shì)這裏的more:hover的寫法，因為more直接(jiē)加在(zài)a上(shàng)，所(suǒ)以鼠(shǔ)標(biāo)進(jìn)過的樣式(shì)就不(bù)用再(zài)寫a了(liǎo)，或者寫(xiě)成a.more:hover。
八(bā)，底部(bù)和(hé)細(xì)節調整(zhěng)
底部比(bǐ)較簡(jiǎn)單(dān)，灰色(sè)背(bèi)景(jǐng)部(bù)分可以(yǐ)用h類標簽(qiān)完成(chéng)，也(yě)可以用(yòng)dl，dt，dd來完成，再或(huò)者(zhě)其(qí)它(tā)標簽也可(kě)以(yǐ)，其(qí)它(tā)的(dí)就不再贅述。
底(dǐ)部完成(chéng)後，最(zuì)後(hòu)的(dí)步驟是(shì)要(yào)做一些(xiē)細節(jié)調(tiáo)整(zhěng)，比如該(gāi)對齊(qí)的地(dì)方(fāng)是否對(duì)齊(qí)，圖片的(dí)alt屬性是(shì)否都加(jiā)上了，在各種(zhǒng)瀏(liú)覽器(qì)下是否(fǒu)顯(xiǎn)示(shì)一(yī)樣等等。至此(cǐ)整個前台頁(yè)麵(miàn)算(suàn)製(zhì)作完成了下麵(miàn)的任務就(jiù)是該用程序來讀(dú)取數(shù)據(jù)庫裏(lǐ)的(dí)內(nèi)容了(liǎo)，來完成整(zhěng)個站點的製作(zuò)。
瀏(liú)覽器兼(jiān)容(róng)問題(tí)一直是讓(ràng)新手(shǒu)朋(péng)友頭疼的地(dì)方(fāng)，其實隻(zhī)要(yào)掌握(wò)幾(jī)個(gè)常(cháng)用(yòng)瀏覽器的特性(xìng)後(hòu)，不(bù)需要過多的css hack就(jiù)可以解決(jué)問題(tí)的(dí)。本例(lì)中(zhōng)使(shǐ)用(yòng)的css hack大致(zhì)有：
zoom=1：用來解決自適(shì)應高度時IE6的兼容問題（這個(gè)屬(shǔ)性通(tōng)不(bù)過w3c認證）；
display:inline：解決IE6雙倍(bèi)邊距(jù)bug問題(tí)；
*：在樣(yàng)式(shì)名(míng)和(hé)屬(shǔ)性中(zhōng)間加(jiā)*，這個(gè)常(cháng)用在需要(yào)垂直居中時使用；
IE6 3像(xiàng)素(sù)bug：在布局(jú)時采(cǎi)用左右(yòu)都浮動的辦法避(bì)免(miǎn)了(liǎo)這個(gè)問(wèn)題；
另(lìng)外(wài)還(huán)有一些做(zuò)法也是(shì)為(wéi)了解決(jué)兼容問題(tí)而(ér)寫的，比(bǐ)如(rú)固(gù)定(dìng)高度，就是因(yīn)為各(gè)瀏覽器(qì)之間解(jiě)釋差異，為了(liǎo)使顯示效(xiào)果(guǒ)盡可(kě)能(néng)一(yī)樣而采(cǎi)用的(dí)折(zhē)中(zhōng)辦法。總之(zhī)遵循(xún)一點，css hack能(néng)少用盡量少用，這樣(yàng)便於以後維護(hù)。
完(wán)成這樣一個(gè)布局方法有(yǒu)多(duō)種(zhǒng)，本例(lì)中(zhōng)所講(jiǎng)解的方(fāng)法，隻(zhī)是(shì)本(běn)人的(dí)觀點(diǎn)，不一(yī)定(dìng)是最好的方法，希(xī)望大家通過本本(běn)例(lì)的(dí)學習能做(zuò)到舉一反三，掌握(wò)更(gēng)多的方法。
本(běn)側是左(zuǒ)寬右窄(zhǎi)型(xíng)的(dí)布局，如果(guǒ)想把(bǎ)兩個調(tiáo)換個(gè)位置(zhì)，太簡單(dān)不過了，隻(zhī)需把(bǎ)#main和#side的向左向右浮(fú)動調換一(yī)下就(jiù)實(shí)現，這(zhè)是表格布局(jú)所不(bù)及的。所以(yǐ)不(bù)管#main和(hé)#side在html代碼(mǎ)中是誰先(xiān)誰(shuí)後，而(ér)讓它(tā)們(mén)顯示在(zài)哪裏完全是(shì)css來(lái)完(wán)成的。這裏建(jiàn)議#main的代(dài)碼寫在(zài)#side前(qián)邊(biān)，因為(wéi)這要(yào)在頁麵(miàn)加(jiā)載的過程(chéng)中會(huì)先加載(zǎi)main部分，用(yòng)戶首先看到(dào)的是主要內容，搜(sōu)索(suǒ)引(yǐn)擎收(shōu)錄(lù)時(shí)也會(huì)先(xiān)找(zhǎo)到main部分的內容(róng)。
<!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=utf-8" />
<title>主頁(yè)</title>
<link href="http://www.100181.com/upload/2010-09/21/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="http://www.100181.com/upload/2010-09/21/images/logo.gif" alt="企業(yè)名(míng)稱(chēng)" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索產(chǎn)品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查詢(xún)" />
</form>
</div>
</div>
<div></div>
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div>
<ul>
<li><a href="#"><span>首(shǒu)頁</span></a></li>
<li><a href="#" id="nav_current"><span>企業新聞</span></a></li>
<li><a href="#"><span>企(qǐ)業簡介(jiè)</span></a></li>
<li><a href="#"><span>產(chǎn)品(pǐn)展(zhǎn)廳</span></a></li>
<li><a href="#"><span>企業(yè)歷(lì)史</span></a></li>
<li><a href="#"><span>招商(shāng)加盟</span></a></li>
<li><a href="#"><span>網上(shàng)下單(dān)</span></a></li>
<li><a href="#"><span>聯(lián)係我們(mén)</span></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">企(qǐ)業(yè)動態</a></li>
<li><a href="#">領(lǐng)導(dǎo)活(huó)動</a></li>
<li><a href="#">產(chǎn)品資(zī)訊</a></li>
<li><a href="#">通(tōng)知公告(gào)</a></li>
</ul>
</div>
</div>
<div></div>
<div id="maincontent">
<div id="main">
<div id="index_top">
<div id="pic">
<script language='javascript' type="text/javascript">
linkarr = new Array();
picarr = new Array();
textarr = new Array();
var swf_width=269;
var swf_height=210;
var files = "http://www.100181.com/upload/2010-09/21/images/pic.jpg|http://www.100181.com/upload/2010-09/21/images/pic1.jpg|http://www.100181.com/upload/2010-09/21/images/pic2.jpg|http://www.100181.com/upload/2010-09/21/images/pic3.jpg";
var links = "#|#|#|#";
var texts = "";
for(i=1;i<picarr.length;i++){
if(files=="") files = picarr[i];
else files += "|"+picarr[i];
}
for(i=1;i<linkarr.length;i++){
if(links=="") links = linkarr[i];
else links += "|"+linkarr[i];
}
for(i=1;i<textarr.length;i++){
if(texts=="") texts = textarr[i];
else texts += "|"+textarr[i];
}
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="http://www.100181.com/upload/2010-09/21/images/indexpic.swf"><param name="quality" value="high">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
document.write('<embed src="http://www.100181.com/upload/2010-09/21/images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
</script>
<div id="login"><span><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/btn_login1.gif" alt="個人用(yòng)戶(hù)登錄" width="131" height="39" /></a></span><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/btn_login.gif" alt="經銷(xiāo)商(shāng)登錄" width="131" height="39" /></a></div>
</div>
<div id="hot_news">
<div id="news_top">
<h1>蘋果iphone 4手(shǒu)機將於9月(yuè)25日在中國上(shàng)市(shì)</h1>
<p>日前中國聯(lián)通正式(shì)宣布將於9月(yuè)25日9時在中(zhōng)國大(dà)陸(lù)市(shì)場(cháng)全麵推出(chū)iPhone4，並為(wéi)iPhone4用戶量(liáng)身定製了(liǎo)合(hé)約計劃。</p>
</div>
<div id="news_list">
<ul>
<li><span>9-22</span><a href="#">純CSS實現三列(liè)DIV等(děng)高布局</a></li>
<li><span>9-22</span><a href="#">HTML元素的(dí)ID和Name屬性(xìng)的(dí)區別(bié)</a></li>
<li><span>9-22</span><a href="#">完美(měi)兼(jiān)容ie6,ie7,ie8以及firefox的(dí)css透明濾鏡(jìng)</a></li>
<li><span>9-22</span><a href="#">DIV+CSS實(shí)現放大(dà)鏡(jìng)效果(guǒ)的分頁(yè)樣(yàng)式</a></li>
<li><span>9-22</span><a href="#">javascript為FF設置首頁(yè)</a></li>
<li><span>9-22</span><a href="#">復製(zhì)到(dào)係統剪貼板之(zhī)IE,ff兼(jiān)容(róng)版</a></li>
</ul>
</div>
</div>
</div>
<div id="index_pic">
<h2><span></span></h2>
<ul>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品(pǐn)名稱" width="107" height="87" />產品(pǐn)名(míng)稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品名(míng)稱(chēng)" width="107" height="87" />產品(pǐn)名稱(chēng)</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品名(míng)稱" width="107" height="87" />產品(pǐn)名(míng)稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產(chǎn)品(pǐn)名稱" width="107" height="87" />產品名稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品名稱(chēng)" width="107" height="87" />產品名稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品(pǐn)名稱" width="107" height="87" />產品(pǐn)名稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產(chǎn)品(pǐn)名(míng)稱(chēng)" width="107" height="87" />產(chǎn)品名稱(chēng)</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產(chǎn)品(pǐn)名(míng)稱" width="107" height="87" />產(chǎn)品名(míng)稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品名(míng)稱" width="107" height="87" />產品名(míng)稱</a></li>
<li><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic4.gif" alt="產品(pǐn)名稱(chēng)" width="107" height="87" />產品(pǐn)名稱</a></li>
</ul>
</div>
<div id="index_box">
<div>
<h2><a href="#">更多..</a><span>企業歷(lì)史</span></h2>
<div>
<dl>
<dt><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic5.gif" alt="多(duō)角度對(duì)比 蘋果iPod係列真機(jī)" width="91" height="70" /></a></dt>
<dd><a href="#"><strong>多角度對比 蘋(píng)果(guǒ)iPod係(xì)列(liè)真(zhēn)機(jī)</strong></a>
導言(yán)：北(běi)京時間9月2日淩晨(chén)1點蘋果在舊(jiù)金山舉(jǔ)行新品(pǐn)發(fā)布(bù)會，數(shù)碼(mǎ)特(tè)派記者在美(měi)國現(xiàn)場直播…</dd>
</dl>
<ul>
<li><a href="#">純CSS實(shí)現三列DIV等高布局(jú)</a></li>
<li><a href="#">HTML元(yuán)素的(dí)ID和(hé)Name屬(shǔ)性的區別</a></li>
<li><a href="#">完(wán)美(měi)兼(jiān)容(róng)ie6,ie7,ie8以及(jí)firefox的css透(tòu)明濾(lǜ)鏡(jìng)</a></li>
<li><a href="#">DIV+CSS實(shí)現放大鏡效果的分(fēn)頁(yè)樣式(shì)</a></li>
<li><a href="#">javascript為FF設置(zhì)首頁(yè)</a></li>
<li><a href="#">復製到係統剪貼(tiē)板(bǎn)之(zhī)IE,ff兼(jiān)容(róng)版(bǎn)</a></li>
<li><a href="#">DIV+CSS實現放大鏡(jìng)效果的分(fēn)頁樣(yàng)式(shì)</a></li>
</ul>
</div>
</div>
<div class="box box1">
<h2><a href="#">更(gēng)多..</a><span>企業歷(lì)史</span></h2>
<div>
<dl>
<dt><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/pic5.gif" alt="多角(jiǎo)度對比(bǐ) 蘋(píng)果(guǒ)iPod係(xì)列(liè)真機(jī)" width="91" height="70" /></a></dt>
<dd><a href="#"><strong>多角度(dù)對比(bǐ) 蘋(píng)果(guǒ)iPod係(xì)列真機</strong></a>
導言：北(běi)京(jīng)時間(jiān)9月2日淩(líng)晨1點(diǎn)蘋(píng)果(guǒ)在舊(jiù)金山舉行新品發布(bù)會，數碼(mǎ)特(tè)派(pài)記(jì)者在美(měi)國現場直(zhí)播(bō)…</dd>
</dl>
<ul>
<li><a href="#">純(chún)CSS實(shí)現(xiàn)三(sān)列DIV等高布(bù)局</a></li>
<li><a href="#">HTML元(yuán)素的ID和Name屬(shǔ)性的區(qū)別(bié)</a></li>
<li><a href="#">完美兼容ie6,ie7,ie8以及firefox的(dí)css透明濾(lǜ)鏡(jìng)</a></li>
<li><a href="#">DIV+CSS實現(xiàn)放大鏡效(xiào)果的分頁樣式</a></li>
<li><a href="#">javascript為(wéi)FF設置首頁(yè)</a></li>
<li><a href="#">復製到係(xì)統(tǒng)剪貼(tiē)板(bǎn)之IE,ff兼容(róng)版</a></li>
<li><a href="#">DIV+CSS實(shí)現放大鏡(jìng)效(xiào)果的分(fēn)頁樣式</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="side">
<div>
<h2><strong>產(chǎn)品(pǐn)</strong>導購</h2>
<div class="side_con product">
<ul>
<li><strong>語音業務：</strong><a href="#">普(pǔ)通(tōng)電(diàn)話(huà)</a> | <a href="#">語(yǔ)音(yīn)數字(zì)中繼</a></li>
<li><strong>語音(yīn)業(yè)務(wù)：</strong><a href="#">普(pǔ)通(tōng)電(diàn)話(huà)</a> | <a href="#">語音數(shù)字中繼</a></li>
<li><strong>語(yǔ)音業務：</strong><a href="#">普(pǔ)通(tōng)電(diàn)話(huà)</a> | <a href="#">語(yǔ)音(yīn)數字中(zhōng)繼</a></li>
</ul>
</div>
</div>
<div>
<h2><strong>使(shǐ)用(yòng)</strong>問(wèn)答</h2>
<div class="side_con ask">
<dl>
<dt><a href="#">最新出的這個產品如何使(shǐ)用？</a></dt>
<dd>該產品采用全新的技術，較(jiào)上(shàng)一(yī)產品(pǐn)有質(zhì)的飛躍(yuè)，功能上(shàng)增(zēng)強了(liǎo)許多(duō)，使(shǐ)用方法(fǎ)更加簡(jiǎn)便...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新出(chū)的這個產品如何(hé)使(shǐ)用？</a></dt>
<dd>該產(chǎn)品(pǐn)采用全新的(dí)技(jì)術，較上一...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新出(chū)的(dí)這(zhè)個(gè)產品如何使用(yòng)？</a></dt>
<dd>該產(chǎn)品采用全新的技術，較上一(yī)產品有(yǒu)質的(dí)飛(fēi)躍，功能(néng)上增強了...</dd>
</dl>
<dl>
<dt><a href="#">最(zuì)新出(chū)的這個產(chǎn)品如(rú)何使用(yòng)？</a></dt>
<dd>該產品采(cǎi)用全新的技術，較上一(yī)產(chǎn)品有質(zhì)的(dí)飛躍(yuè)，功能上(shàng)增強(qiáng)...</dd>
</dl>
<dl>
<dt><a href="#">最新出(chū)的(dí)這個產(chǎn)品(pǐn)如何(hé)使(shǐ)用？</a></dt>
<dd>該產品(pǐn)采(cǎi)用全(quán)新(xīn)的技(jì)術(shù)，較上一(yī)產品(pǐn)有(yǒu)質的飛躍，功(gōng)能上增(zēng)強了(liǎo)許多，使用方法(fǎ)更加(jiā)簡便(biàn)...</dd>
</dl>
</div>
</div>
<div>
<h2><strong>聯係</strong>我們</h2>
<div class="side_con contact"><a href="#"><img src="http://www.100181.com/upload/2010-09/21/images/tel.gif" alt="聯係(xì)我們" width="222" height="112" /></a></div>
</div>
</div>
</div>
<div></div>
<div id="footer">
<dl>
<dt><a href="#">關於(yú)我(wǒ)們(mén)</a> || <a href="#">產品目(mù)錄(lù)</a> || <a href="#">聯係(xì)我們</a> || <a href="#">友情鏈接(jiē)</a> || <a href="#">反饋問題</a> || <a href="#">廣(guǎng)告合作(zuò)</a></dt>
<dd>Copyright © 2007 - 2010 100181.com All Rights Reserved<br />
標準(zhǔn)之(zhī)路 版權所(suǒ)有(yǒu) 京ICP備(bèi)10007159號</dd>
</dl>
</div>
</div>
</body>
</html>
提(tí)示(shì)：可(kě)以(yǐ)先修(xiū)改部分代(dài)碼後再運行(háng)
點擊(jī)此處下載實例(lì)源代碼(mǎ)及(jí)psd源文(wén)件(jiàn)
九，相(xiāng)對路徑和(hé)相對於根目(mù)錄路(lù)徑
上(shàng)邊的例子(zǐ)學(xué)完後，你(nǐ)會發現在html中(zhōng)插入(rù)的(dí)圖(tú)片路徑是images/pic4.gif，而(ér)在css中(zhōng)插(chā)入的(dí)圖(tú)片路徑是這樣(yàng)的../images/nav_bg.gif，後者比前者多(duō)出(chū)了../，這(zhè)是什麼意思(sī)呢？
這(zhè)就(jiù)是相對(duì)路(lù)徑和絕對(duì)路(lù)徑(jìng)，../表(biǎo)示返回上(shàng)一級(jí)，因為css文件(jiàn)在(zài)css文件夾(jiā)裏(lǐ)，圖片(piàn)在images文件夾下，那麼(mó)layout.css就需(xū)要返(fǎn)回上一級找到(dào)images文(wén)件夾才能找(zhǎo)到(dào)相(xiāng)應(yīng)的(dí)圖片。直接文(wén)件夾名或是./開(kāi)頭(tóu)表示(shì)和當前(qián)平(píng)級，因(yīn)為index.html和(hé)images文(wén)件夾平(píng)級。不(bù)管是帶../還是(shì)不(bù)帶(dài)，這(zhè)種(zhǒng)寫法都叫相對(duì)路(lù)徑；另(lìng)一(yī)種叫(jiào)相(xiāng)對於(yú)根(gēn)目(mù)錄路徑，它的(dí)寫法必須以(yǐ)/開(kāi)始(shǐ)，意(yì)思(sī)是從(cóng)根目(mù)錄(lù)開(kāi)始(shǐ)一級一級(jí)向下查找(zhǎo)，不(bù)管(guǎn)在哪裏，要(yào)使用pic4.gif這個(gè)圖片，路(lù)徑都必須是/images/pic4.gif；還(huán)有(yǒu)一(yī)種寫法叫(jiào)絕對(duì)路徑(jìng)，是以http://加(jiā)域(yù)名(míng)開(kāi)始的(dí)，這個(gè)不多多(duō)說(shuō)了。
使用相對路(lù)徑(jìng)時，當根目錄放(fàng)到(dào)一(yī)個二(èr)級(jí)目(mù)錄下(xià)時，文(wén)件仍(réng)然可(kě)以正(zhèng)常訪(fǎng)問(wèn)，而使用(yòng)相(xiāng)對(duì)於根目錄路徑時，其中(zhōng)一個頁麵放(fàng)到(dào)其(qí)它位置(zhì)時(shí)，照(zhào)樣(yàng)能(néng)關(guān)聯(lián)麼相關的圖片(piàn)和其(qí)它(tā)文件，比如：本例如果用(yòng)相對於根(gēn)目(mù)錄(lù)路徑的話(huà)，把index.html放到一個文(wén)件(jiàn)夾(jiā)下(xià)後(hòu)，還是可以(yǐ)正(zhèng)常訪(fǎng)問的。總(zǒng)之(zhī)兩(liǎng)種(zhǒng)方(fāng)法各(gè)有優(yōu)劣(liè)，根(gēn)據你(nǐ)的需要采用(yòng)一(yī)種合適的方(fāng)法(fǎ)。相對(duì)路徑和相(xiāng)對於根(gēn)目(mù)錄路徑是可(kě)以(yǐ)相互更(gēng)改的，在站點管(guǎn)理——編(biān)輯(jí)——高級(jí)設(shè)置(zhì)的本(běn)地信(xìn)息裏有鏈(liàn)接相(xiāng)對(duì)於，如(rú)下圖(tú)，默認為(wéi)文檔(dàng)（就是所(suǒ)說(shuō)的相(xiāng)對路徑），也可(kě)以改為站(zhàn)點根目(mù)錄，相對路(lù)徑一般為(wéi)直(zhí)接目錄名(míng)，需要返(fǎn)回上(shàng)級(jí)時(shí)用../，向上返回(huí)兩級時(shí)用(yòng)../../；相(xiāng)對(duì)於根目(mù)錄路徑始終(zhōng)以/開(kāi)頭，不(bù)管該(gāi)文件(jiàn)現在在(zài)哪一(yī)級，它都是以根目錄開始向下找。
div+css網頁(yè)標(biāo)準布(bù)局(jú)實例教(jiào)程(chéng)（三）
前(qián)邊兩(liǎng)節學完後，前(qián)台(tái)工作(zuò)基(jī)本上(shàng)完成了(liǎo)，下邊的任務該程序員添加(jiā)程序了(liǎo)。為什麼說是基(jī)本完(wán)成呢(ní)？因(yīn)為(wéi)要做的(dí)工作還很(hěn)多，不但要把首(shǒu)頁做出(chū)來(lái)，其(qí)它的列表頁詳細頁(yè)等(děng)頁麵(miàn)也得(dé)做。還(huán)要配(pèi)合(hé)程(chéng)序員把整(zhěng)個(gè)網站(zhàn)完(wán)成，這樣才能(néng)呈(chéng)現(xiàn)給(gěi)用(yòng)戶。應部(bù)分(fēn)同學的(dí)要求，講(jiǎng)解一下(xià)程序怎麼添(tiān)加的，這樣和(hé)程序(xù)員配合起來也更(gēng)默契，還有(yǒu)怎麼連(lián)接(jiē)FTP上傳下載，後(hòu)期出(chū)現問(wèn)題怎麼調試等(děng)等。添加程序部(bù)分隻需要(yào)了(liǎo)解就行了，連接ftp上傳(chuán)下(xià)載，頁麵調(tiáo)試查找(zhǎo)問(wèn)題這部分一定要掌握(wò)喲。
§ 創建服務(wù)器環境(jìng)
§ 建立數據庫
§ 本地和遠程(chéng)服務器(qì)連接(jiē)
§ php讀取數(shù)據
§ 頁(yè)麵調(tiáo)試及(jí)瀏覽(lǎn)器兼容(róng)
一，創(chuàng)建服(fú)務(wù)器環境
程序(xù)語言(yán)有多種，常(cháng)用的有asp，php，jsp等(děng)，之前(qián)做的(dí)html頁(yè)麵，可(kě)以(yǐ)直(zhí)接(jiē)在瀏覽器上(shàng)運行，因為(wéi)html是客戶端(duān)語(yǔ)言，而這(zhè)些(xiē)是(shì)服(fú)務器端語(yǔ)言，也(yě)就(jiù)說(shuō)你所看(kàn)到的頁(yè)麵是經(jīng)過服務(wù)器加(jiā)工之後傳(chuán)輸過(guò)來的，不管使(shǐ)用(yòng)哪種(zhǒng)語(yǔ)言(yán)環(huán)境，最終目(mù)的就(jiù)是把數(shù)據(jù)庫的數(shù)據讀(dú)取(qǔ)出來(lái)展示到網頁(yè)上(shàng)。不(bù)同的(dí)語言(yán)有(yǒu)不同的運行環境，要想運行(háng)這(zhè)些語(yǔ)言，首先要創建(jiàn)一(yī)個適(shì)應他(tā)們的環(huán)境，下邊以php為(wéi)例，講解一下php環(huán)境的搭建(jiàn)。
點擊(jī)下(xià)載：WampServer 5 集成環(huán)境
下載wamp安裝(zhuāng)完成後，php運行所需的(dí) Apache， MySQL，PHP 5等(děng)都(dū)具(jù)備了(liǎo)，安裝完成後(hòu)需(xū)要啟(qǐ)動WampSeaver，啟動後會(huì)在托盤區顯(xiǎn)示一圖(tú)標(biāo)（如(rú)上圖），當(dāng)它正(zhèng)常(cháng)運(yùn)行後，說明服務(wù)器環(huán)境(jìng)已(yǐ)經(jīng)創建成(chéng)功(gōng)了(liǎo)。接(jiē)下(xià)來打開如上圖(tú)中(zhōng)的php.ini文(wén)件，找到short_open_tag，把(bǎ)值改為(wéi)On，作(zuò)用是(shì)開啟(qǐ)短(duǎn)標(biāo)簽(qiān)支(zhī)持(chí)，以(yǐ)免後(hòu)邊教程中使用短(duǎn)標簽時報錯。有關(guān)軟件的(dí)安裝，及(jí)服(fú)務器(qì)環境(jìng)問(wèn)題本(běn)站不(bù)做過多介(jiè)紹(shào)，如想(xiǎng)詳細了解(jiě)，請百度(dù)相關(guān)文(wén)章(zhāng)，asp環(huán)境的搭建(jiàn)更簡單了，如想知(zhī)道(dào)，也(yě)請百度。
二，建立(lì)數(shù)據(jù)庫
php的作(zuò)用(yòng)是(shì)從(cóng)數據庫(kù)讀取數(shù)據，下麵(miàn)我們就(jiù)先創(chuàng)建一個數(shù)據庫(kù)，並(bìng)錄入部分數(shù)據。點擊(jī)如(rú)上圖的(dí)phpMyAdmin，然後會(huì)在瀏覽(lǎn)器(qì)中(zhōng)打開數(shù)據(jù)庫。創建(jiàn)一個(gè)名(míng)為：jiaocheng的數據庫(kù)和news的表(biǎo)
設置表(biǎo)結構(gòu)如下(xià)：
注意將ID字段(duàn)設置為主鍵並在(zài)額(é)外中(zhōng)選(xuǎn)擇(zé)auto_increment選項(xiàng)。表結構創(chuàng)建(jiàn)完(wán)後，選(xuǎn)擇插(chā)入(rù)，插(chā)入(rù)一條數(shù)據：
依(yī)次插(chā)入(rù)更多條(tiáo)數據，為(wéi)後麵(miàn)程(chéng)序調(tiáo)用(yòng)做準(zhǔn)備，選擇性(xìng)將某些(xiē)數據(jù)插入形(xíng)象圖片，以(yǐ)便(biàn)在幻燈(dēng)處調用。
三，本地(dì)和遠程服務(wù)器連接
隻(zhī)有(yǒu)本地和(hé)遠程(chéng)服(fú)務(wù)器(qì)連接後(hòu)，才能(néng)把我(wǒ)們做的(dí)頁麵上(shàng)傳(chuán)到(dào)服務器(qì)上來運(yùn)行(háng)。連(lián)接的前提(tí)是你(nǐ)知道(dào)服務器的地(dì)址及網(wǎng)管(guǎn)給(gěi)你分配的(dí)用戶名(míng)和密碼，有(yǒu)了(liǎo)這些(xiē)後，在dw的站(zhàn)點(diǎn)——管(guǎn)理站點(diǎn)中，選(xuǎn)中jiaocheng，然後(hòu)編輯，在(zài)彈(dàn)出(chū)的對(duì)話(huà)框中(zhōng)選(xuǎn)擇服務(wù)器(qì)選項(xiàng)，然後填寫(xiě)ftp地(dì)址(zhǐ)，用(yòng)戶名和密(mì)碼，如果一切正(zhèng)常應該可以順(shùn)利(lì)連(lián)接(jiē)了，點(diǎn)擊測試按鈕(niǔ)一下(xià)吧，如果無法連(lián)接(jiē)，就(jiù)需要查找問(wèn)題(tí)了(liǎo)（下(xià)麵的(dí)截(jié)圖是dw cs5的界(jiè)麵(miàn)，其(qí)它版本略有(yǒu)不同）。
剛才我(wǒ)們在(zài)自(zì)己(jǐ)電腦上(shàng)創建(jiàn)了服務器(qì)環境(jìng)，那麼(mó)這裏的連(lián)接(jiē)就用(yòng)本地(dì)網絡了。
設置(zhì)完後，在(zài)文件麵(miàn)板站點(diǎn)上(shàng)點(diǎn)擊右(yòu)鍵(jiàn)，選擇上傳(chuán)，將(jiāng)文件上傳(chuán)到服(fú)務器文件(jiàn)夾中。
完了之後(hòu)打(dǎ)開瀏(liú)覽(lǎn)器，在(zài)地(dì)址(zhǐ)欄中輸入http://localhost/index.html，就(jiù)可(kě)以訪問(wèn)，或(huò)者直接在dw中點(diǎn)擊地球圖標，也(yě)可(kě)以(yǐ)直接(jiē)打開(kāi)瀏覽(lǎn)器(qì)預(yù)覽。如(rú)果(guǒ)能(néng)正常(cháng)打開頁麵(miàn)，說(shuō)明(míng)本地(dì)和服務器連(lián)接成(chéng)功，修改完(wán)文件(jiàn)後，把(bǎ)文件上(shàng)傳(chuán)到(dào)服務器(qì)上(shàng)就(jiù)可以(yǐ)了。如(rú)果是協(xié)同辦公(gōng)，修改文件(jiàn)之前(qián)一定要先下載(zǎi)，這(zhè)樣才(cái)能保證(zhèng)本地的文件為(wéi)最新，如果你(nǐ)上(shàng)次(cì)修(xiū)改完之後，別人又修(xiū)改(gǎi)了(liǎo)，你沒下(xià)載，直接(jiē)修(xiū)改(gǎi)本(běn)地(dì)的(dí)文(wén)件(jiàn)又(yòu)上傳了，那麼別人(rén)的(dí)修(xiū)改將(jiāng)被(bèi)覆蓋掉(diào)，所以一(yī)定(dìng)要養成(chéng)好(hǎo)習(xí)慣，修(xiū)改前(qián)先下載(zǎi)。
四，php讀(dú)取(qǔ)數(shù)據
以(yǐ)上(shàng)的工作(zuò)都完(wán)成(chéng)後(hòu)，下麵就(jiù)該用(yòng)程序(xù)讀(dú)取(qǔ)數據了。首(shǒu)先需要(yào)創(chuàng)建(jiàn)一個數(shù)據庫連(lián)接(jiē)文件(jiàn)，讓php程(chéng)序可(kě)以(yǐ)訪(fǎng)問數(shù)據庫，這樣(yàng)才能(néng)讀取(qǔ)裏邊(biān)的(dí)數(shù)據，在(zài)根目(mù)錄下(xià)創(chuàng)建一個inc文(wén)件夾，並創(chuàng)建一(yī)個(gè)conn.php文件，然後(hòu)打開文(wén)件，在(zài)源(yuán)代碼裏插入(rù)如下(xià)代(dài)碼：
<?
$conn = mysql_connect ("localhost","root","") or die ("數據庫連(lián)接(jiē)出(chū)錯(cuò)" . mysql_error());
mysql_select_db ("jiaocheng",$conn);
mysql_query("set names 'gbk'");
?>
之(zhī)所(suǒ)以單(dān)獨(dú)創建一下文件，是因為後邊(biān)很多(duō)頁(yè)麵都(dū)要用，這(zhè)樣(yàng)隻(zhī)需包含這(zhè)個(gè)頁麵即可(kě)，不用每個頁(yè)麵再(zài)寫這段代碼了(liǎo)。數(shù)據庫連接文(wén)件(jiàn)創建好後(hòu)，下(xià)麵(miàn)就(jiù)該在index.html調(tiáo)用了。注(zhù)意：這(zhè)裏要將(jiāng)後綴改為(wéi)php才(cái)行(háng)，如果還是(shì)html的話，那麼它將直接輸出，不(bù)會(huì)經過服務(wù)器(qì)加工。接下(xià)來打開index.php，在源(yuán)代碼的最頂部插(chā)入如下(xià)代碼(mǎ)，把(bǎ)conn.php文(wén)件(jiàn)包(bāo)含(hán)進來：
<?
include("inc/conn.php");
?>
記(jì)得要把(bǎ)inc文件夾上(shàng)傳到服(fú)務器(qì)上喲(yō)。下麵就先做“熱(rè)門新聞”列(liè)表(biǎo)吧(bā)，把原(yuán)來做(zuò)的(dí)#news_list下(xià)的ul列(liè)表(biǎo)改為如下(xià)形(xíng)式：
<ul>
<?
$sql="select * from news order by id desc limit 0,6";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
?>
<li><span><?=$row['add_time']?></span><a href="#"><?=$row['title']?></a></li>
<? }?>
</ul>
第一(yī)句是創建(jiàn)一(yī)個sql查(chá)詢語句，表(biǎo)示(shì)查(chá)詢news表以(yǐ)id的倒序排列且隻查詢前(qián)6條，接(jiē)下(xià)來(lái)循環讀(dú)取(qǔ)出來(lái)。上(shàng)傳預(yù)覽(lǎn)一下(xià)吧(bā)，是(shì)不是變(biàn)形了，一方麵標(biāo)題太(tài)長了(liǎo)，另一方(fāng)麵日(rì)期應該(gāi)隻顯(xiǎn)示(shì)月和日(rì)，日期通(tōng)過程序(xù)隻取月(yuè)日兩位，處(chǔ)理標題有兩(liǎng)種方法(fǎ)，一(yī)種是用(yòng)程序截(jié)取，一(yī)種是css超出隱藏。下(xià)麵先(xiān)把日(rì)期(qī)給改(gǎi)了，把(bǎ)<?=$row['add_time']?>替換為(wéi)：<?=date('m-d',strtotime($row['add_time']))?>
把(bǎ)日(rì)期改短(duǎn)後，顯示(shì)正常(cháng)了，但為(wéi)了(liǎo)防止以後出現長標題把(bǎ)頁(yè)麵撐(chēng)亂，讓(ràng)程序員注意截取一下標(biāo)題(tí)或(huò)者你用css來(lái)實(shí)現(xiàn)，css超出(chū)隱(yǐn)藏的(dí)話可(kě)以給(gěi)li定義高度(dù)和(hé)overflow:hidden屬性。得了，從數據(jù)庫中讀取數據出來(lái)，就(jiù)這(zhè)麼簡(jiǎn)單(dān)，下麵說一下(xià)幻燈部分的(dí)實現吧(bā)。
和上(shàng)邊的(dí)讀取方法(fǎ)一樣，隻(zhī)不過(guò)用(yòng)if判(pàn)斷(duàn)一下(xià)$pic是(shì)否為空，來(lái)解決(jué)開(kāi)頭沒有|的(dí)問題(tí)。上(shàng)傳(chuán)上(shàng)再(zài)預(yù)覽一下(xià)吧(bā)，看看(kàn)是不是(shì)顯(xiǎn)示出(chū)來了(liǎo)呢(ní)？是(shì)吧(bā)，已經(jīng)顯示(shì)出(chū)來(lái)了，打開源代(dài)碼看看，剛(gāng)才我(wǒ)們添加(jiā)的程(chéng)序(xù)部分(fēn)並沒有顯示(shì)出來(lái)，取而(ér)代之(zhī)的(dí)是(shì)數(shù)據庫(kù)中(zhōng)的數據，這就是(shì)程序的(dí)奇妙之處。
好了，有關程序部分就(jiù)講這麼多了(liǎo)，相(xiāng)信你(nǐ)也(yě)該明白是(shì)怎麼回(huí)事了，剩(shèng)下的你(nǐ)可以自己對(duì)照(zhào)著製作(zuò)個試試(shì)，如果(guǒ)你想(xiǎng)學(xué)習程序的話，給大家推(tuī)薦以前我學(xué)過(guò)的(dí)教程(chéng)，asp的話可(kě)以學習(xí)fif小(xiǎo)組的(dí)asp視(shì)頻教程(chéng)，在(zài)百(bǎi)度(dù)裏搜(sōu)索：fif asp，就(jiù)出來(lái)了，第一個結果(guǒ)便(biàn)是(shì)網易(yì)學院(yuàn)的fif視(shì)頻教程；如果你對(duì)php感(gǎn)興趣的(dí)話，建(jiàn)議去php100中(zhōng)文網，聽(tīng)聽(tīng)張恩(ēn)民老師(shī)講(jiǎng)解的php係列(liè)教程，相(xiāng)信很快(kuài)你也(yě)會成(chéng)為(wéi)一個程(chéng)序(xù)高手(shǒu)的。
五，頁(yè)麵調(tiáo)試(shì)及瀏覽(lǎn)器兼容
在和(hé)程序員配(pèi)合完(wán)成(chéng)網(wǎng)站的(dí)過程中或網站上(shàng)綫(xiàn)後，常常會(huì)出現一些小(xiǎo)問題(tí)，比(bǐ)如(rú)頁麵撐開，顯示(shì)錯亂(luàn)等(děng)，這時候(hòu)就需(xū)要(yào)查找(zhǎo)問(wèn)題出在(zài)哪(nǎ)裏了。查(chá)找這些問題(tí)，希望(wàng)大(dà)家裝上火狐瀏覽器（因為(wéi)它是相對標(biāo)準(zhǔn)的瀏覽(lǎn)器(qì)，這樣顯得(dé)你更專業一些，嘿嘿，最(zuì)主(zhǔ)要是有(yǒu)調試(shì)用(yòng)的插(chā)件(jiàn)），裝(zhuāng)上之(zhī)後還需要裝(zhuāng)兩(liǎng)個(gè)插件：web developer，firebug
插件的(dí)下(xià)載請(qǐng)點(diǎn)擊(jī)上(shàng)圖(tú)中的獲(huò)取(qǔ)附加組件，然後(hòu)輸入關鍵(jiàn)字搜(sōu)索到後下載(zǎi)安裝即可(kě)。
web developer作用很(hěn)強(qiáng)大(dà)，如下(xià)圖所示可以查(chá)看當(dāng)前頁麵(miàn)所(suǒ)用(yòng)到的圖片，包(bāo)括css中的(dí)背(bèi)景圖(tú)片，具體(tǐ)使用教程請(qǐng)參看：http://www.100181.com/div_css/255.shtml
firebug這是個更(gēng)好(hǎo)的一(yī)個(gè)插(chā)件，使用(yòng)時(shí)點(diǎn)擊瀏覽(lǎn)器右下角(jiǎo)的螢火蟲(chóng)圖(tú)標或者按(àn)F12，會(huì)啟用這個插件，如需(xū)查看(kàn)某一(yī)部分代(dài)碼(mǎ)，點擊(jī)插(chā)件上的查看(kàn)頁(yè)麵(miàn)元素按鈕後(hòu)，鼠(shǔ)標移到(dào)網頁上，會出(chū)現(xiàn)一個相(xiāng)應的框(kuàng)，當(dāng)框選(xuǎn)中(zhōng)需要查看(kàn)源代碼(mǎ)的元素(sù)後點擊，在插(chā)件(jiàn)區域就顯示出(chū)當前區域(yù)的(dí)代碼及(jí)樣式了，可(kě)以(yǐ)禁用某些(xiē)樣式，還可以添(tiān)加新的(dí)樣(yàng)式(shì)來查找問(wèn)題所(suǒ)在。
如上圖(tú)，先點(diǎn)1中(zhōng)的查看頁麵(miàn)元(yuán)素(sù)按(àn)鈕，然後鼠標(biāo)移動到(dào)2的地方(fāng)，將(jiāng)會(huì)出現圖(tú)中所(suǒ)示的藍(lán)色綫(xiàn)框，然(rán)後(hòu)點擊鼠(shǔ)標，會(huì)在插件(jiàn)中選(xuǎn)中(zhōng)3位(wèi)置(zhì)的代碼(mǎ)並(bìng)在4位置出現對(duì)該區域(yù)生(shēng)效(xiào)的所有(yǒu)樣式(shì)，即(jí)是上邊(biān)框選(xuǎn)部(bù)分(fēn)的代碼和樣式(shì)，當鼠(shǔ)標移動到(dào)圈(quān)4位置時，會出現一個禁止圖標(biāo)，點(diǎn)擊(jī)後(hòu)禁(jīn)用(yòng)當前樣(yàng)式，這樣(yàng)便於(yú)查(chá)找問(wèn)題所在(zài)，另外還(huán)可以在後邊雙(shuāng)擊插(chā)入新的樣式。
另外，如(rú)果你(nǐ)裝的是IE8瀏(liú)覽器(qì)，同樣具備類(lèi)似的功能，打開瀏(liú)覽器後，按F12鍵，即可(kě)打開該(gāi)功能，使用(yòng)方(fāng)法和(hé)火狐(hú)的(dí)firebug類(lèi)似。
希望大家多多(duō)研(yán)究(jiū)，對查找問(wèn)題能(néng)起(qǐ)到(dào)事半功(gōng)倍的效(xiào)果。不(bù)過這些(xiē)修改隻停留在瀏覽(lǎn)器(qì)層麵，不(bù)會(huì)對你本(běn)地(dì)和服(fú)務器上的(dí)文(wén)件(jiàn)做任何(hé)改(gǎi)動，查找到(dào)哪裏出問題後，及時在dw裏將出錯(cuò)的地(dì)方改過來(lái)。
學會了怎(zěn)麼(mó)調試頁麵(miàn)後(hòu)，兼容(róng)問(wèn)題(tí)也(yě)是(shì)一個不容忽(hū)視的問題，現在瀏(liú)覽(lǎn)器市(shì)場(cháng)魚(yú)龍混雜，別(bié)的不(bù)說，IE的(dí)6/7/8版(bǎn)本兼(jiān)容就(jiù)夠讓人(rén)頭疼了，現(xiàn)在又(yòu)出(chū)了個(gè)IE9，還有(yǒu)火(huǒ)狐(hú)，chome，opera，Safari等等，而且(qiě)標準(zhǔn)不(bù)統一，一片(piàn)混(hùn)亂(luàn)的狀(zhuàng)況。從下(xià)圖中標(biāo)準(zhǔn)之(zhī)路網站的(dí)訪問情況來(lái)看(kàn)，目前IE6仍然占最大比重，而(ér)IE6恰恰也是讓設(shè)計(jì)者(zhě)最(zuì)為頭疼的瀏(liú)覽(lǎn)器，bug太(tài)多(duō)了。鑒於(yú)這種混(hùn)亂情況(kuàng)，目前隻(zhī)用考慮(lǜ)兼容(róng)最(zuì)常(cháng)用的(dí)IE6/7/8和firefox就可以了，其它使(shǐ)用人數(shù)很(hěn)少的瀏覽(lǎn)器可(kě)以(yǐ)暫不(bù)考(kǎo)慮。隻(zhī)要我們(mén)掌(zhǎng)握了各個(gè)瀏覽器的特(tè)性，避(bì)免(miǎn)一些使(shǐ)它解析(xī)錯(cuò)誤(wù)的(dí)寫(xiě)法，還是不用太多的(dí)css hack就可以使(shǐ)頁麵在各(gè)個(gè)瀏覽器下顯示基本(běn)一致，所以這(zhè)個需要(yào)大(dà)家(jiā)的(dí)多觀(guān)察(chá)，多實踐，多總(zǒng)結。
因IE瀏覽器的特(tè)殊性(xìng)，一台電(diàn)腦同(tóng)時隻(zhī)能裝一個(gè)版本(běn)的IE瀏覽器，不過(guò)呢(ní)有高(gāo)人(rén)提供了IE Tester，把IE的幾個(gè)版本集(jí)成(chéng)到(dào)一(yī)塊(kuài)，專(zhuān)門(mén)供測試(shì)兼(jiān)容使用。大家可以下載(zǎi)安(ān)裝一下，測試下頁(yè)麵(miàn)在各(gè)個瀏覽器(qì)下的顯示效果。
文(wén)章出(chū)處(chǔ)：標準之路(lù) 編(biān)輯：楊(yáng)雨晨思(sī)
轉(zhuǎn)載(zǎi)請保(bǎo)留原文地址(zhǐ): https://antelcom.cn/show-334.html