對於(yú)蜘蛛在爬(pá)行(háng)一個(gè)網站(zhàn)的(dí)頁麵時，若是(shì)有(yǒu)太(tài)多的(dí)垃圾代碼，會(huì)使(shǐ)搜(sōu)索(suǒ)蜘(zhī)蛛(zhū)對(duì)其產(chǎn)生(shēng)不友(yǒu)好，不信(xìn)任(rèn)感(gǎn)，同時蜘(zhī)蛛的爬行(háng)速度(dù)也會因(yīn)此而減(jiǎn)緩，對(duì)於(yú)網(wǎng)站SEO而(ér)言(yán)，可(kě)謂一大(dà)忌。就如傳統(tǒng)的(dí)用table頁麵，對(duì)此(cǐ)我們就需要對(duì)網站(zhàn)進行(háng)代碼優(yōu)化，而(ér)這便需(xū)要動用CSS+DIV了，下(xià)麵便(biàn)來談談使用(yòng)CSS+div進行代(dài)碼(mǎ)優化(huà)的一(yī)些益處。
一.精(jīng)簡代(dài)碼，降(jiàng)低重構(gòu)難度(dù)。
網(wǎng)站(zhàn)使用DIV+CSS布(bù)局使代碼很是(shì)精(jīng)簡(jiǎn)，相信大多(duō)朋友也(yě)都略(lüè)有所聞，css文件(jiàn)可以在網站的(dí)任意一個頁麵(miàn)進行調(tiáo)用，而若是(shì)使用table表格修改(gǎi)部分(fēn)頁(yè)麵(miàn)卻是顯(xiǎn)得(dé)很麻煩。要是(shì)一個門戶(hù)網站(zhàn)的話(huà)，需(xū)手(shǒu)動改很(hěn)多頁(yè)麵(miàn)，而(ér)且(qiě)看(kàn)著那些(xiē)表格也會(huì)感(gǎn)覺(jué)很(hěn)亂也(yě)很(hěn)浪費(fèi)時間(jiān)，但(dàn)是使用css+div布局隻(zhī)需修(xiū)改css文(wén)件中(zhōng)的一個(gè)代(dài)碼即(jí)可。
二.網頁(yè)訪問(wèn)速度
使用(yòng)了(liǎo)DIV+CSS布(bù)局(jú)的網頁與Table布局比較，精(jīng)簡了(liǎo)許多頁麵(miàn)代碼，那麼其瀏覽(lǎn)訪(fǎng)問速(sù)度(dù)自然(rán)得以(yǐ)提升，也(yě)從(cóng)而(ér)提升(shēng)了(liǎo)網(wǎng)站的(dí)用戶體驗度(dù)。
三(sān).SEO優化
采(cǎi)用div-css布局(jú)的(dí)網(wǎng)站對(duì)於搜索引擎很是(shì)友(yǒu)好(hǎo)，因(yīn)此其(qí)避免了Table嵌套層(céng)次過多而(ér)無法被(bèi)搜索引(yǐn)擎抓取的問題(tí)，而(ér)且(qiě)簡潔，結構化(huà)的代碼(mǎ)更(gēng)加有利於(yú)突出重(zhòng)點和適(shì)合搜索(suǒ)引擎(qíng)抓取(qǔ)。
四(sì).瀏(liú)覽器兼容性
DIV+CSS相比(bǐ)TABLE布(bù)局(jú)，更容易出(chū)現(xiàn)多種瀏覽器不兼容的(dí)問(wèn)題，主要原(yuán)因是不(bù)同(tóng)的(dí)瀏覽(lǎn)器對(duì)web標準默認值不同。國(guó)內主流是(shì)ie，firefox及chrome用的(dí)較少，在兼(jiān)容性測(cè)試方(fāng)麵(miàn)，首(shǒu)先需要保(bǎo)證在ie多(duō)版(bǎn)本不(bù)出現(xiàn)問題，這(zhè)裏涉及(jí)到一些方法(fǎ)和技(jì)巧，可以針對(duì)具體(tǐ)問題在網站(zhàn)查(chá)找解(jiě)決(jué)辦(bàn)法(fǎ)。
五(wǔ).CSS+DIV網頁(yè)布(bù)局(jú)的時(shí)候(hòu)常犯(fàn)的(dí)小錯誤
1. 檢查HTML元(yuán)素是否(fǒu)有拼寫(xiě)錯誤(wù)，是否忘(wàng)記(jì)結束標記(jì)
即使是(shì)老手(shǒu)也經常會(huì)弄(nòng)錯div的嵌(qiàn)套關係。可(kě)以用(yòng)dreamweaver的(dí)驗證功(gōng)能檢查(chá)一下(xià)有無(wú)錯誤(wù)。
2. 檢查CSS是否書寫(xiě)正確
檢查(chá)一下(xià)有(yǒu)無拼寫(xiě)錯誤(wù)，是否(fǒu)忘記(jì)結尾(wěi)的(dí) } 等(děng)。可以(yǐ)利用CleanCSS來檢查 CSS的拼(pīn)寫(xiě)錯(cuò)誤(wù)。CleanCSS本是(shì)為CSS減肥的工(gōng)具，但也(yě)能檢查出(chū)拼(pīn)寫錯(cuò)誤。
3. 用刪除法確定錯(cuò)誤發(fā)生的位(wèi)置(zhì)
如果錯誤(wù)影(yǐng)響了(liǎo)整(zhěng)體(tǐ)布局，則可(kě)以(yǐ)逐(zhú)個(gè)刪除(chú)div塊，直(zhí)到刪除某(mǒu)個div塊後顯(xiǎn)示(shì)恢(huī)復正常，即(jí)可確定錯誤發生的位(wèi)置。
4. 利用(yòng)border屬性確定(dìng)出(chū)錯元素(sù)的(dí)布局特性(xìng)
使用(yòng)float屬(shǔ)性(xìng)布局(jú)一不(bù)小心(xīn)就(jiù)會出(chū)錯。這(zhè)時為(wéi)元(yuán)素添加(jiā)border屬(shǔ)性確(què)定(dìng)元素(sù)邊界(jiè)，錯誤原因即水落石出。
5. float元(yuán)素的(dí)父(fù)元(yuán)素不(bù)能指定clear屬性(xìng)
MacIE下如(rú)果對(duì)float的元素的(dí)父元(yuán)素(sù)使用(yòng)clear屬(shǔ)性，周(zhōu)圍(wéi)的(dí)float元(yuán)素布局(jú)就(jiù)會混亂(luàn)。這是MacIE的著(zhù)名的bug，倘若(ruò)不知道就會(huì)走彎路(lù)。
6. float元素務(wù)必指定(dìng)width屬性
很多瀏(liú)覽器(qì)在(zài)顯示未(wèi)指定width的(dí)float元(yuán)素時(shí)會(huì)有(yǒu)bug。所(suǒ)以不管float元(yuán)素的(dí)內容如(rú)何，一(yī)定要為其指定width屬(shǔ)性。
另外指定元素(sù)時盡量使用em而不是px做(zuò)單位。
7. float元(yuán)素不能指(zhǐ)定margin和padding等屬性
IE在顯(xiǎn)示(shì)指定(dìng)了(liǎo)margin和(hé)padding的(dí)float元素時(shí)有(yǒu)bug。因此(cǐ)不(bù)要對float元(yuán)素指定margin和padding屬(shǔ)性(可以在float元素內部(bù)嵌(qiàn)套(tào)一(yī)個(gè)div來設置margin和(hé)padding)。也可(kě)以(yǐ)使(shǐ)用(yòng)hack方(fāng)法(fǎ)為IE指定特(tè)別的值。
8. float元(yuán)素的(dí)寬(kuān)度(dù)之(zhī)和(hé)要小於(yú)100%
如果(guǒ)float元素(sù)的寬度(dù)之和(hé)正好(hǎo)是100%，某些古老(lǎo)的瀏(liú)覽(lǎn)器將不(bù)能正常顯示。因此(cǐ)請保(bǎo)證(zhèng)寬(kuān)度之和小(xiǎo)於99%。
9. 是否(fǒu)重設(shè)了(liǎo)默認的(dí)樣式?
某些屬(shǔ)性如margin，padding等(děng)，不(bù)同瀏覽(lǎn)器(qì)會有(yǒu)不同(tóng)的解(jiě)釋。因此(cǐ)最好在開(kāi)發(fā)前(qián)首先(xiān)將全體的margin，padding設置為(wéi)0，列(liè)表(biǎo)樣式(shì)設置為none等。
10. 是否忘記(jì)了寫(xiě)DTD?
如果無論怎樣調整不(bù)同瀏覽(lǎn)器(qì)顯(xiǎn)示結果還是不(bù)一樣(yàng)，那麼(mó)可以(yǐ)檢(jiǎn)查一(yī)下(xià)頁麵(miàn)開(kāi)頭是不是(shì)忘(wàng)了寫下(xià)DTD聲明。
最後(hòu)，需(xū)要(yào)注(zhù)意的是，蜘蛛不喜歡一個頁(yè)麵有太多(duō)的(dí)css代(dài)碼(mǎ)，否(fǒu)則(zé)同(tóng)樣會影響蜘蛛的(dí)爬行，影(yǐng)響搜索引擎的(dí)收錄，所以(yǐ)采(cǎi)用外(wài)部(bù)調(tiáo)用(yòng)的(dí)方式(shì)調用(yòng)CSS是(shì)非常(cháng)不(bù)錯的方法(fǎ)。而同時，若非(fēi)必(bì)須太多花(huā)哨的網(wǎng)站，采(cǎi)用CSS布局，同(tóng)樣可以(yǐ)到達所想要(yào)的(dí)效果(guǒ)。如網站(zhàn)導航中的文(wén)字(zì)顏色變(biàn)化，下(xià)拉菜(cài)單等(děng)。
轉(zhuǎn)載請(qǐng)保留(liú)原文(wén)地址: https://antelcom.cn/show-357.html