91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

寫(xiě)了這么長(zhǎng)時(shí)間的靜態(tài)頁(yè)面了，有必要來(lái)整理一下網(wǎng)頁(yè)代碼的書(shū)寫(xiě)心得，也許會(huì)對(duì)讀者您有所幫助。我按照一般頁(yè)面構(gòu)成來(lái)說(shuō)吧。
login:
頭部一般會(huì)有登陸條。寫(xiě)用戶(hù)名密碼的地方，建議字和input分別用單獨(dú)類(lèi)的margin來(lái)控制。大家都知道文字和input在一起的時(shí)候用line-height并不會(huì)起什么效果。記得用戶(hù)名和密碼的文字用label標(biāo)簽。
logo:
這個(gè)可能有值得商榷的地方。有人喜歡把LOGO用H1來(lái)顯示，有人喜歡背景顯示LOGO而代碼隱藏文字。具體對(duì)SEO的影響自己去體會(huì)吧，不妨都試試，不過(guò)LOGO上總要帶鏈接的。
nav:
導(dǎo)行菜單一般都用LI來(lái)做，不過(guò)最好帶上浮動(dòng)float:left，而不僅僅是display:inline,這樣控制起來(lái)可能更精確一點(diǎn)。至于象門(mén)戶(hù)那樣復(fù)雜的菜單就可以自由發(fā)揮，比如我之前寫(xiě)的一個(gè)菜單。.
search:
搜索的輸入框和按紐用padding值來(lái)控制里面字的顯示吧，用height和line-height的效果可能在各個(gè)瀏覽器里不盡相同。按紐如果都用系統(tǒng)默認(rèn)的樣式就別清除默認(rèn)的border值，如果用圖片就必須清除.line-height的值比height大點(diǎn)可能效果會(huì)好點(diǎn)，不過(guò)要溢出剪切哦。
banner:
這個(gè)其實(shí)沒(méi)什么可說(shuō)的，但是針對(duì)一行多個(gè)廣告條，我還要補(bǔ)充一句，banner既可能是圖片也可能是FLASH，寫(xiě)的時(shí)候套個(gè)DIV寫(xiě)個(gè)寬度和溢出剪切沒(méi)壞處。
list:
列表是出現(xiàn)最多的。控制內(nèi)容和邊框的間距最好給ul用padding,并且加寬度和剪切。至于li就要用height和line-height來(lái)控制了,如果回行也要剪，保證標(biāo)題內(nèi)容代碼的完整而又不破壞頁(yè)面美觀。前面加點(diǎn)那肯定是用背景圖片來(lái)控制了，默認(rèn)的項(xiàng)目符號(hào)真的不好用。
titleBar:
標(biāo)題行一般就是單獨(dú)居左出現(xiàn)，或者右面是more和tags。這個(gè)寫(xiě)法也是根據(jù)每個(gè)人習(xí)慣不同而有變化的。我最近試著標(biāo)題用H3，more或tags用H4來(lái)寫(xiě)。以后關(guān)注一下效果如何。畢竟這樣的話，在沒(méi)有加載樣式的情況下，某塊內(nèi)容的標(biāo)題會(huì)突出顯示。當(dāng)然more和tags用span寫(xiě)也可以，這樣看具體顯示的內(nèi)容而定了。
pictureWrap:
圖文混排的表現(xiàn)形式比較多，語(yǔ)言描述也太麻煩就不說(shuō)太多了。想說(shuō)的就是圖片配標(biāo)題的時(shí)候，給標(biāo)題加個(gè)class，定義一下寬高和行高，然后溢出剪切，這樣標(biāo)題太長(zhǎng)也不會(huì)擠亂頁(yè)面了。而且寫(xiě)動(dòng)態(tài)程序的時(shí)候也不用去數(shù)截取多少個(gè)字了。畢竟，我們想留給讀我們代碼的爬蟲(chóng)一個(gè)完整的標(biāo)題。
footer:
這個(gè)也沒(méi)多少可說(shuō)的，該怎么寫(xiě)就這么寫(xiě)，能用A標(biāo)簽的就不用li了。記得統(tǒng)計(jì)代碼放在最后，而且最好給他一個(gè)dispaly:none的樣式。

好了，就寫(xiě)這么多吧，雖然很多代碼可能是需要重復(fù)敲打好多遍的，可是如何寫(xiě)出既讓人又讓機(jī)器讀的舒服的代碼，是我們需要逐步總結(jié)和研究的，而這更是我們努力的方向。

PS：以上純粹是本人一個(gè)時(shí)期內(nèi)的心得總結(jié)，如有不妥之處還請(qǐng)您不吝賜教，共同進(jìn)步！

該文章在 2010/8/13 22:29:41 編輯過(guò)