網(wǎng)站建設中容易忽視的問(wèn)題發(fā)布者：本站     時(shí)間：2022-05-03 10:05:25

關(guān)于這篇文章其實(shí)早就想寫(xiě)了，只是由于自己太懶才一直拖到現在。主要想談?wù)勗诰W(wǎng)頁(yè)制作中幾個(gè)比較容易被忽視的問(wèn)題，算不上什么高深的教程，只是自己平時(shí)工作學(xué)習中所遇到的問(wèn)題積累，寫(xiě)下來(lái)一是可以給初學(xué)者提個(gè)醒，二來(lái)也是幫自己做個(gè)筆錄，畢竟年紀大了，記性不好了...

1、讓你想當然，給你點(diǎn)顏色看看

這個(gè)問(wèn)題其實(shí)被很多人忽略，小到個(gè)人站點(diǎn)，大到門(mén)戶(hù)網(wǎng)站都有可能犯這個(gè)錯誤。不信想想看，如果你所做的網(wǎng)站背景是白色的，那么你還會(huì )記得在 CSS 里寫(xiě)下 Background-color:#ffffff 這句代碼嗎？我敢打賭，大部分人不會(huì )！并不是因為大家偷懶，而是這個(gè)舉手之勞被徹底忽略了，為什么？因為我們所用的 Windows 操作系統在大多數的情況下，運行在其上的各種軟件的默認背景色是白色，這其中就包括 IE 瀏覽器，所以在網(wǎng)站背景是白色的條件下，許多的網(wǎng)頁(yè)制作者就想當然的忽略了關(guān)于背景色的設置，反正大家都是白色，不設的話(huà)也看不出來(lái)。但是不要忘記了，Windows 從 XP 開(kāi)始支持系統主題的更換，有很多第三方的主題會(huì )更改系統默認的設置，其中就包括背景色的設置，如果沒(méi)有強制設定頁(yè)面中的背景色，那么頁(yè)面就會(huì )以當前瀏覽器的背景色來(lái)顯示內容，其結果就是網(wǎng)站美觀(guān)性被大大的降低，拿大家都熟悉的網(wǎng)易來(lái)舉例，下面的截圖是在我機子上瀏覽時(shí)的樣子，由于前不久換了一套 Vista 的主題風(fēng)格，所以瀏覽器的背景色變成了淺灰色。

仔細看看網(wǎng)易的 Logo ，看出來(lái)嗎？對，那個(gè) Logo 的背景是白色的，但旁邊的背景色卻是灰色的，換句話(huà)說(shuō)就是網(wǎng)易整個(gè)頁(yè)面的背景原定就是白色的，這在瀏覽器背景為白色的前提下是看不出什么來(lái)的，但是像現在這樣就“漏餡”了。不光是網(wǎng)易 ，許多的門(mén)戶(hù)站都是這樣，具體我就不去舉例了，可見(jiàn)關(guān)于 Background-color 設定的重要性。所以，不論你的網(wǎng)站是什么樣的背景色，請一點(diǎn)記住把它設定好，哪怕它是白色！

2、立正！向左～～～看齊

大家都知道 Table 的默認水平對齊方式（align）為左對齊，設 align="left" 和不設其效果是一樣的，于是很多人不去設置這個(gè)屬性，我以前也是如此。但是在某些特殊的情況下，IE 會(huì )把默認的左對齊理解為居中對齊，從而導致頁(yè)面的排版出現問(wèn)題，雖然說(shuō)具體是什么情況下會(huì )出問(wèn)題連我自己都說(shuō)不清楚，但是這種情況絕對存在，所以大家在做頁(yè)面的時(shí)候一定要習慣性的設置表格的 align 屬性，不要偷懶跳過(guò)這步，對頁(yè)面的表現來(lái)說(shuō)，這所謂的多此一舉絕對有益無(wú)害。

3、單元格寬度－隱形殺手

不知你有沒(méi)有遇見(jiàn)過(guò)這種情況，假設當你給一個(gè)單元格的 align 設置了左對齊后，卻發(fā)現放在單元格中的文字并沒(méi)有應用該屬性的效果，反而繼續是居中顯示，查看文字兩端也并沒(méi)有發(fā)現任何垃圾代碼包含其中，可是無(wú)論如何都改變不了文字的位置。郁悶嗎？反正當時(shí)我是很郁悶，直到后來(lái)，我才發(fā)現原來(lái)是單元格的 Width 屬性在作怪，將其刪除或重新設置后問(wèn)題得到解決，所以，當你也遇到同樣的問(wèn)題時(shí)，不妨檢查一下出問(wèn)題單元格的 Width 設置，相信你會(huì )找到解決的方法。

4、打死滾動(dòng)條都不消失

有時(shí)為了一些個(gè)性化的需要，有些人喜歡將瀏覽器的滾動(dòng)條隱藏掉，這個(gè)效果做起來(lái)很容易，但是有時(shí)會(huì )發(fā)現明明代碼一點(diǎn)問(wèn)題沒(méi)有，而且查看用的瀏覽器也不是非 IE 內核型的，但可惡的滾動(dòng)條就是不消失！而且這個(gè)問(wèn)題很多都出現在用 DW 等可視化編輯軟件制作出的網(wǎng)頁(yè)上。那原因是什么呢？其實(shí)原因就在該頁(yè)面的頭部代碼里，查看該頁(yè)面的源代碼，你會(huì )發(fā)現在最上邊有類(lèi)似這樣的兩句代碼：


這兩句代碼叫做 DOCTYPE 聲明，是 Document Type(文檔類(lèi)型)的簡(jiǎn)寫(xiě)，用來(lái)說(shuō)明你用的 XHTML 或者 HTML 是什么版本。簡(jiǎn)單點(diǎn)說(shuō)這兩句代碼是制作標準化頁(yè)面所必不可少的關(guān)鍵組成部分，瀏覽器就是根據你定義的文檔類(lèi)型來(lái)解釋你頁(yè)面的標識，并展現出來(lái)的。換句話(huà)說(shuō)，如果你定義了一個(gè)錯誤的 DOCTYPE，那么你的標識和 CSS 都不會(huì )生效。而定義滾動(dòng)條顯示與否的 overflow、overflow-x、overflow-y 這三個(gè)屬性恰恰沒(méi)有被網(wǎng)頁(yè)標準所采納，所以如果你的頁(yè)面上方定義過(guò) DOCTYPE ，那么這三個(gè)屬性便是無(wú)效代碼了，解決方法就是刪除頭部的 DOCTYPE 聲明，雖然在標準日益普及的今天不推薦這么做。

5、都是注釋惹的禍

為代碼寫(xiě)注釋是個(gè)好習慣，但是有時(shí)也會(huì )出現一些問(wèn)題，例如為 CSS 寫(xiě)中文注釋。
如果你為自己定義的 CSS 寫(xiě)了中文注釋?zhuān)敲丛谝恍┨厥馇闆r下（例如服務(wù)器端的支持，頁(yè)面所用的程序類(lèi)型等）會(huì )導致部分代碼無(wú)故失效，這種情況我遇見(jiàn)好幾回了，所以在技術(shù)上沒(méi)解決這個(gè)問(wèn)題之前，還是不要為 CSS 寫(xiě)注釋的好，養成良好的命名習慣足以讓其它人看懂自己代碼的意義，即使一定要寫(xiě)，也請用英文寫(xiě)吧...什么？拼音?。?！拜托，你用拼音試試看，保證一個(gè)星期后連你自己都不明白那寫(xiě)的是什么。

6、神啊，發(fā)光吧～～～

這個(gè)問(wèn)題有些濫竽充數的嫌疑，只是有很多人問(wèn)起過(guò)，所以也一并放上來(lái)。是關(guān)于 CSS 的 Glow Filters ，這個(gè)濾鏡的效果是對環(huán)繞對象內容邊緣制作發(fā)光效果，也有人稱(chēng)描邊效果，多被用在文字的表現上，但是許多人在運用了該濾鏡后發(fā)現并沒(méi)有出現想要的效果，究其原因多半是由于把這個(gè)濾鏡直接運用到了文字上，要知道該濾鏡對文字是沒(méi)有效果的，那為什么還能制作出發(fā)光文字呢？那是因為一定要把它運用在放置文字的容器上，例如 Table 。所以，如果沒(méi)有效果的話(huà)，就檢查一下是不是用錯地方了。

該濾鏡的另外一個(gè)問(wèn)題是，雖然發(fā)光效果是有了，但是感覺(jué)文字上的那圈光暈好像是被裁了一樣，少了一塊似的。這是由于所放置文字的容器高度低于該濾鏡的發(fā)光范圍所至，解決方法有三種：

1、縮小 Font-Size
2、增加 Height 值高度
3、降低 Strength 值的大小

7、思考中...

其實(shí)這些問(wèn)題都不是什么了不起的大問(wèn)題，但往往越是小問(wèn)題才越容易被人忽略，希望上面這些經(jīng)驗教訓對你能有所幫助，哪怕有一個(gè)人從中收益就不枉我羅哩羅嗦這么半天了。