一、 網(wǎng)站程序中采用DIV+CSS這種模式，不用Table

　　目前DIV+CSS是主流的編程語(yǔ)言，這與其體積小加載快的優(yōu)點(diǎn)是密不可分的。主流的網(wǎng)站和CMS采用的也都是這種模式。因此建議大家也采用這種模式來(lái)編程，而不要采用原始的Table結(jié)構(gòu)。Table結(jié)構(gòu)不但管理不方便，網(wǎng)頁(yè)體積也會(huì)變大，降低網(wǎng)站的加載速度。

　　二、 采用Gzip技術(shù)對(duì)網(wǎng)頁(yè)進(jìn)行壓縮

　　采用Gzip技術(shù)對(duì)網(wǎng)頁(yè)進(jìn)行壓縮是減少網(wǎng)頁(yè)體積的一個(gè)很好的方式.一般情況下這是需要你的網(wǎng)站空間支持的，像我用的A5的合租主機(jī)，壓縮率可以達(dá)到80%。網(wǎng)頁(yè)體積小了，自然加載速度就快了。

　　三、 減少CSS文件數(shù)量和體積

　　在采用DIV+CSS過(guò)程中，CSS文件是非常重要的。如果在編寫(xiě)過(guò)程中有多個(gè)CSS文件，建議將多個(gè)CSS文件進(jìn)行合并，這樣可以加快網(wǎng)站加載速度。另外，可以采用專(zhuān)業(yè)的網(wǎng)頁(yè)減肥軟件對(duì)CSS文件進(jìn)行減肥，以減少CSS文件的體積。

　　四、使用CDN加速。

　　近一年CDN已經(jīng)在我們個(gè)人站長(zhǎng)中聽(tīng)的較多，也有很多朋友在使用。CDN的全稱(chēng)是Content Delivery Network，解釋為內(nèi)容分發(fā)網(wǎng)絡(luò)。原理思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。也就是網(wǎng)站加速器，這個(gè)需要付費(fèi)使用的，免費(fèi)的不是太穩(wěn)定。

　　五、優(yōu)化代碼，減少臃腫結(jié)構(gòu)。

　　如果我們使用較為流行的CMS這方便應(yīng)該不會(huì)有臃腫的代碼結(jié)構(gòu)存在，但需要注意的是我們?cè)谥谱骰蛘哌x擇網(wǎng)站模 板的時(shí)候也會(huì)存在不合理的結(jié)構(gòu)。我們需要在寫(xiě)模板或者程序的時(shí)候使用較為簡(jiǎn)潔的程序框架，簡(jiǎn)潔有利于用戶(hù)體驗(yàn)，也更利于搜索引擎蜘蛛的爬行和抓取。

　　六、減少圖片大小和數(shù)量。

　　我們盡量在上傳網(wǎng)站圖片的時(shí)候減少圖片的大小和尺寸，可以在上傳圖片之前對(duì)圖片進(jìn)行壓縮處理，圖片適當(dāng)尺碼即可，不要過(guò)大。圖片僅僅是網(wǎng)站的點(diǎn)綴，而不需要都是圖文。同時(shí)，我們也盡量避免使用大量的視頻或者音頻內(nèi)容。

　　七、減少JavaScript腳本文件，盡量存放在一個(gè)文件中。

　　盡量外部調(diào)用JS代碼，不要放在網(wǎng)頁(yè)中，更不要遠(yuǎn)程調(diào)用外部的JS代碼。例 如Google建議您加載在HEAD標(biāo)簽的分析。您也可以嘗試結(jié)合的JavaScript和壓縮他們更快地加載。有些時(shí)候我們?cè)陬^部的CSS，JS代碼太 多，導(dǎo)致中間內(nèi)容部分加載太慢。所以盡量減少頭部的代碼。

　　八、運(yùn)用靜態(tài)的HTML頁(yè)面

　　眾所周知，ASP、PHP、JSP等順序完成了網(wǎng)頁(yè)信息的靜態(tài)交互，運(yùn)轉(zhuǎn)起來(lái)確實(shí)十分方便，由于它們的數(shù)據(jù)交互性好，能很方便地存取、更改數(shù)據(jù)庫(kù)的內(nèi)容，但是這類(lèi)順序也有本人的缺陷，那就是它必需由效勞器先生成HTML頁(yè)面，然后在“傳送”給用戶(hù)，多了一個(gè)步驟，必定會(huì)影響到網(wǎng)站的拜訪速度，所以筆者建議，在新站開(kāi)端的時(shí)分，在對(duì)本人網(wǎng)站的重要調(diào)查期內(nèi)還是采用靜態(tài)的HTML頁(yè)面比擬保險(xiǎn)。

　　九、 將ASP、ASPX、PHP等文件的訪問(wèn)改為.js引用

　　這在ASP、ASPX、PHP等程序設(shè)計(jì)時(shí)應(yīng)該注意的，如果要在靜態(tài)的HTML頁(yè)面里嵌入動(dòng)態(tài)的數(shù)據(jù)，而這些動(dòng)態(tài)的數(shù)據(jù)是由ASP、PHP等程序來(lái)提供的話，會(huì)使用以下的語(yǔ)句引用：

<script src=”http://image.ccidnet.com/ad_files/network_index.asp?orders=1″></script>

　　這樣的話，每次有一個(gè)人訪問(wèn)你的網(wǎng)站，服務(wù)器就要執(zhí)行并處理一次network_index.asp文件，從數(shù)據(jù)庫(kù)抽取相應(yīng)的數(shù)據(jù)，再輸出給網(wǎng)頁(yè)顯示，如果有幾萬(wàn)個(gè)人同時(shí)訪問(wèn)，就要執(zhí)行幾萬(wàn)次，后果就可想而知。建議在這些程序中將數(shù)據(jù)動(dòng)態(tài)生成到一個(gè)network_index.js文件中去，然后在首頁(yè)通過(guò)

<script src=”http://www.179job.com/ad_files/home_daohang/network_index.js”></script>

　　這樣的代碼來(lái)引用該network_index.js文件。這樣，數(shù)據(jù)顯示的任務(wù)就交給客戶(hù)端的瀏覽器去做，不會(huì)耗費(fèi)服務(wù)器的資源，顯示速度自然就很快；前者所花的時(shí)間幾乎是后者的幾倍！

糟糕的網(wǎng)頁(yè)設(shè)計(jì)會(huì)給用戶(hù)帶來(lái)糟糕的體驗(yàn)，從而影響網(wǎng)頁(yè)的流量，或是產(chǎn)品的銷(xiāo)售。那么在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，應(yīng)該避免出現(xiàn)哪些錯(cuò)誤呢?

所有人都知道網(wǎng)頁(yè)設(shè)計(jì)的重要性，糟糕的網(wǎng)頁(yè)設(shè)計(jì)會(huì)給用戶(hù)帶來(lái)糟糕的體驗(yàn)，從而影響網(wǎng)頁(yè)的流量，或是產(chǎn)品的銷(xiāo)售。那么在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，應(yīng)該避免出現(xiàn)哪些錯(cuò)誤呢?


1. 要求用戶(hù)必須注冊(cè)才能瀏覽網(wǎng)頁(yè)內(nèi)容
這種做法足以讓用戶(hù)立刻感到氣憤不已。也許這樣做能夠讓你獲得一些注冊(cè)用戶(hù)，但是你失去的遠(yuǎn)比所得到的要多。


2. 忘記針對(duì)不同設(shè)備優(yōu)化網(wǎng)頁(yè)
要知道，現(xiàn)在很多用戶(hù)都不再使用PC瀏覽網(wǎng)頁(yè)了。因此在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，不要忘了針對(duì)智能手機(jī)、平板電腦等移動(dòng)設(shè)備進(jìn)行網(wǎng)頁(yè)優(yōu)化。你必須確保用戶(hù)在任何設(shè)備上瀏覽你的網(wǎng)頁(yè)時(shí)，都可以得到優(yōu)秀的閱讀體驗(yàn)?？梢允褂媒ㄕ局鞘謾C(jī)版建設(shè)手機(jī)網(wǎng)站。


3. 讓用戶(hù)填寫(xiě)過(guò)長(zhǎng)的表格


沒(méi)人喜歡填寫(xiě)長(zhǎng)到令人絕望的表格，尤其是在智能手機(jī)的小屏幕上。你應(yīng)該盡可能的減少表格的內(nèi)容。


4. 使用不好辨認(rèn)或是幼稚字體
你想讓用戶(hù)輕松的看懂你的網(wǎng)頁(yè)嗎?那就不要使用難以辨認(rèn)的字體。你所選用的字體，是你給用戶(hù)留下的第一印象，所以請(qǐng)謹(jǐn)慎選擇。
也不要使用Papyrus和Comic Sans等字體，這些字體是給小學(xué)生用的，別裝嫩了。


5. 使用讓人抓狂的搜索功能
當(dāng)人們想在你的網(wǎng)站上找到一些特定內(nèi)容的時(shí)候，如果你的搜索功能不好用，甚至無(wú)法準(zhǔn)確判斷用戶(hù)輸入的關(guān)鍵詞，想象一下用戶(hù)會(huì)有多憤怒吧。


6. 大塊文章
現(xiàn)在是讀圖時(shí)代，如今的網(wǎng)頁(yè)應(yīng)該更像是一本雜志，而不應(yīng)該像是一本小說(shuō)。
如果你的文章很長(zhǎng)，最好用圖片將文字進(jìn)行分割，否則你的讀者看一會(huì)兒就該困了。


7. 用低像素圖片展示產(chǎn)品
對(duì)于電子商務(wù)網(wǎng)站來(lái)說(shuō)，他們的網(wǎng)頁(yè)就像是個(gè)產(chǎn)品演示間。用戶(hù)需要通過(guò)網(wǎng)頁(yè)來(lái)了解產(chǎn)品的方方面面，因此請(qǐng)為他們準(zhǔn)備高清圖片。除了提供高像素圖片之外，你還應(yīng)該為用戶(hù)提供產(chǎn)品各個(gè)角度的圖片。

1.圖像化的形象頁(yè)面（Splash Page） 
　　我在很多網(wǎng)站上看到人們只是把一個(gè)大大的橫幅圖像和一個(gè)"點(diǎn)這兒進(jìn)入（Click here to enter）"鏈接放在他們的主頁(yè)（homepage）上。最壞的情況是"進(jìn)入（enter）"鏈接被嵌入flash，從而導(dǎo)致蜘蛛無(wú)法從這個(gè)鏈接進(jìn)入。 


　　如果你不關(guān)心搜索引擎如何認(rèn)識(shí)你的網(wǎng)站，那沒(méi)關(guān)系；否則，你犯了一個(gè)大錯(cuò)誤。你的主頁(yè)（homepage）可能是你的網(wǎng)站內(nèi)所有頁(yè)面中rank值最高的，并且頻繁得到網(wǎng)絡(luò)蜘蛛的惠顧。如果鏈接結(jié)構(gòu)沒(méi)有遵循規(guī)則，你的內(nèi)部頁(yè)面是不會(huì)被索引到的。 


　　你的頁(yè)面必須包含（最低限量的）關(guān)鍵詞和鏈接到重要頁(yè)面的鏈接。 


　　2.無(wú)法讓蜘蛛爬行（Non-spiderable）的Flash菜單 


　　很多設(shè)計(jì)師使用淡入的動(dòng)畫(huà)菜單從而犯了這個(gè)錯(cuò)誤。它們可能看起來(lái)很酷，但搜索引擎卻看不到；類(lèi)似這樣Flash 菜單里的鏈接將無(wú)法被爬行。 


　　3.以圖像和Flash的形式呈現(xiàn)的內(nèi)容 


　　網(wǎng)絡(luò)蜘蛛就像一個(gè)以文本為基礎(chǔ)（text-based）的瀏覽器，它們無(wú)法閱讀嵌入圖像或Flash中的內(nèi)容。很多設(shè)計(jì)師把重要的內(nèi)容（例如關(guān)鍵詞）嵌入Flash或圖像，這是在犯錯(cuò)誤。 


　　4.過(guò)度使用Ajax 


　　為了給訪客留下深刻的印象，很多開(kāi)發(fā)者實(shí)現(xiàn)了大量的Ajax功能（特別是以導(dǎo)航為目的），但你是否知道這是一個(gè)很大的SEO錯(cuò)誤？因?yàn)锳jax的內(nèi)容是動(dòng)態(tài)加載的，是無(wú)法被搜索引擎索引的。 


　　Ajax的另一個(gè)不足：因?yàn)榈刂稶RL無(wú)法被重載，你的訪客將無(wú)法發(fā)送現(xiàn)行頁(yè)面給他的朋友。 


　　5.主題設(shè)計(jì)的版本劃分 


　　因?yàn)閹讉€(gè)原因，有些設(shè)計(jì)師喜歡以把主題設(shè)計(jì)放進(jìn)不同子目錄（ie. domain/v2, v3, v4）的方式進(jìn)行版本劃分，并重定向到新的文件夾。經(jīng)常改變根目錄的位置會(huì)導(dǎo)致你丟失反向鏈接的數(shù)量并影響rank值。 


　　6.文字鏈接"Click Here" 


　　你可能會(huì)經(jīng)?？吹胶芏嗳耸褂梦?字鏈接"Click here" 或者 "Learn more"，如果你希望"Click here"有更高的排名那這樣做就非常棒。但如果你是想告訴搜索引擎你的頁(yè)面對(duì)一個(gè)主題（topic）來(lái)說(shuō)很重要，那你最好讓你的文字鏈接用上主題 （topic）/關(guān)鍵詞（topic）， "lean more about "的形式使其更具描述性和相關(guān)性。 


　　警告：不要在你的站點(diǎn)上過(guò)多使用完全相同的關(guān)鍵詞，因?yàn)橛袝r(shí)會(huì)被搜索引擎當(dāng)成垃圾處理。 


　　7.常見(jiàn)的標(biāo)題標(biāo)簽錯(cuò)誤 


　　相同或相似的標(biāo)題文本： 


　　你網(wǎng)站上的每一頁(yè)都應(yīng)該有一個(gè)唯一的包含著核心關(guān)鍵詞的標(biāo)簽。很多開(kāi)發(fā)者犯了在整個(gè)網(wǎng)站內(nèi)重復(fù)使用相同或相似的標(biāo)題標(biāo)簽的錯(cuò)誤。那就像是在告訴搜索引擎你站點(diǎn)上的每一頁(yè)都是關(guān)于同一個(gè)主題，并且這個(gè)主題和其它的相比沒(méi)有什么獨(dú)特性。 


　　WordPress的默認(rèn)主題是一個(gè)使用錯(cuò)誤標(biāo)題標(biāo)簽的好例子。也許你不知道，WordPress的默認(rèn)主題的標(biāo)題標(biāo)簽并沒(méi)有什么用：Site Name > Blog Archive > Post Title。這樣為什么是對(duì)搜索引擎不友好的？因?yàn)槊總€(gè)單人博客的帖子標(biāo)題標(biāo)簽都以相同的文本"Site Name > Blog Archive >" 開(kāi)始。如果你真想讓標(biāo)題標(biāo)簽包含site name，應(yīng)該把它放到后面：Post Title | Site Name。 


　　超過(guò)65個(gè)字符的限制: 


　　很多blogger寫(xiě)了很長(zhǎng)的貼子標(biāo)題。那會(huì)怎樣？在搜索結(jié)果頁(yè)，你的標(biāo)題標(biāo)簽是作為鏈接的標(biāo)題的。你應(yīng)該把你要傳達(dá)的信息控制在65個(gè)字符以?xún)?nèi)（包括空格）或試試把它砍斷。 


　　關(guān)鍵詞堆砌標(biāo)題: 


　　另一個(gè)常見(jiàn)的錯(cuò)誤是人們趨向于過(guò)度的使用關(guān)鍵詞堆砌標(biāo)題標(biāo)簽。相同的事情說(shuō)三次并不會(huì)提高相關(guān)性。在標(biāo)題標(biāo)簽里用關(guān)鍵詞堆砌會(huì)被搜索引擎看成垃圾（不是好事）。但可以用不同的方法靈活的重復(fù)相同的詞語(yǔ)： 




　　"Photo Tips & Photography Techniques for Great Pictures" 


　　"Photo"和 "Photography"是相同的意思但用不同的方法重復(fù)了兩次，因?yàn)槟愕淖x者可能用它們中的一個(gè)來(lái)執(zhí)行一次搜索。 


　　8. 圖像Alt屬性置空 


　　你應(yīng)該一直使用Alt屬性描述你的圖像。Alt屬性是用來(lái)為盲人web使用者描述圖像的。猜猜如何？搜索引擎同樣不能看到你的圖像，因此Alt屬性是用來(lái)說(shuō)明你的圖片是關(guān)于什么的一個(gè)因子。 


　　提示：恰當(dāng)?shù)拿枋瞿愕膱D像可以提升圖像搜索結(jié)果的排名。比如：Google的圖像搜索每天給我?guī)?lái)幾百個(gè)搜索條件為"abstract"和 "dj"的提交。 


　　9. 不友好的 URLs 


　　很多blog和CMS平臺(tái)都內(nèi)置有友好的URL特征，然而，并不是每個(gè)blogger都懂得利用。友好的URL不管是對(duì)人類(lèi)讀者還是搜索引擎都有好處。URL同樣是你的關(guān)鍵詞應(yīng)該出現(xiàn)的地方。

　　HTML和CSS的一些東西會(huì)讓你忍不住說(shuō)“這TM是什么玩意兒！”。以下是困惑、失策和困境這些困擾著HTML和CSS問(wèn)題清單:

　　? Doctype的聲明

　　? Box Model的計(jì)算問(wèn)題

　　? Rem單位和Mobile Safari

　　? 浮動(dòng)（float）排在第一

　　? 浮動(dòng)（float）和清除浮動(dòng)（clear）

　　? 浮動(dòng)和計(jì)算高度

　　? 浮動(dòng)元素是塊級(jí)元素

　　? 垂直相鄰margin的倒塌

　　? 設(shè)計(jì)表單的行

　　? Firefox和<input>按鈕

　　? Firefox按鈕的內(nèi)部輪廓

　　? 始終在<button>上設(shè)置type

　　? IE瀏覽器選擇器的限制

　　? 位置解釋

　　? 位置和寬度

　　? 定位與轉(zhuǎn)換

　　Doctype的聲明

　　總要有doctype聲明。我建議用html5中簡(jiǎn)單的doctype聲明方式

<!DOCTYPE html>

　　不聲明doctype會(huì)導(dǎo)致畸形的表單、輸入框和其它的一些問(wèn)題；且會(huì)讓頁(yè)面在quirk mode下顯示。

　　Box Model的計(jì)算問(wèn)題

　　當(dāng)元素定義了padding和border-width中的1個(gè)或2個(gè)后，你設(shè)置的width值會(huì)變得比實(shí)際的大。為了避免這個(gè)問(wèn)題的發(fā)生，現(xiàn)在就用box-sizing: border-box;這種通過(guò)的方法來(lái)重新設(shè)置。

　　Rem單位和Mobile Safari

　　雖然Mobile Safari支持使用rem的所有屬性值時(shí)。但當(dāng)rem被用在維媒體查詢(xún)和以不同大小無(wú)限閃爍頁(yè)面的文本時(shí)，它就不行了。

　　就這種情況而言，目前還是用em來(lái)代替rem吧。

html {
  font-size: 16px;
}

/* Causes flashing bug in Mobile Safari */
@media (min-width: 40rem) {
  html {
    font-size: 20px;
  }
}

/* Works great in Mobile Safari */
@media (min-width: 40em) {
  html {
    font-size: 20px;
  }
}

　　求助！如果你有蘋(píng)果或WebKit關(guān)于這方面的錯(cuò)誤報(bào)告，我很樂(lè)意將它放到本文中。由于它只適用于移動(dòng)應(yīng)用，不適用于桌面程序，Safari瀏覽器（非Mobile Safari），我不確定在哪里會(huì)報(bào)告這個(gè)錯(cuò)誤。

　　浮動(dòng)（float）排在第一

　　在文檔順序中，浮動(dòng)的元素應(yīng)該總是放在第一。浮動(dòng)的元素需要一些東西來(lái)環(huán)繞，否則其順序會(huì)下降，在內(nèi)容之下顯示。

<div class="parent">
  <div class="float">Float</div>
  <div class="content">
    <!-- ... -->
  </div>
</div>

　　浮動(dòng)（float）和清除浮動(dòng)（clear）

　　如果你使用浮動(dòng),很可能你需要使用清除浮動(dòng)。任何跟著浮動(dòng)元素的內(nèi)容均會(huì)環(huán)繞著浮動(dòng)元素，除非使用清除浮動(dòng)。你可以使用以下的方法來(lái)清除浮動(dòng)。

　　micro clearfix方法通過(guò)使用單獨(dú)的類(lèi)來(lái)清除浮動(dòng)

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

　　或者，在parent中用auto 或 hidden 來(lái)指定overflow。

.parent {
  overflow: auto; /* clearfix */
}
.other-parent {
  overflow: hidden; /* clearfix */
}

　　考慮到overflow可能會(huì)產(chǎn)生意想不到的副作用，在parent中將其以特別的方式標(biāo)注在定位元素旁。

　　專(zhuān)業(yè)意見(jiàn)！當(dāng)清除浮動(dòng)由于其它原因能作為屬性使用時(shí)，通過(guò)像/* clearfix */ 這樣的注釋能讓你把握自己的未來(lái)，且能讓你的同事高興。

　　浮動(dòng)和計(jì)算高度

　　一個(gè)只有浮動(dòng)內(nèi)容的父元素將有一個(gè)計(jì)算的高度值height: 0;。給父元素加clearfix，強(qiáng)制瀏覽器計(jì)算一個(gè)高度值。

　　浮動(dòng)元素是塊級(jí)元素

　　用了float的元素會(huì)自動(dòng)地變成display: block;沒(méi)有必要兩個(gè)屬性都設(shè)置，因?yàn)閒loat會(huì)覆蓋你的display。

.element {
  float: left;
  display: block; /* Not necessary */
}

　　有趣的事實(shí)：幾年前，我們必須要設(shè)置display: inline;，讓大多數(shù)的浮動(dòng)元素能夠兼容IE6，避免雙倍margin值的bug,。不管怎樣，那些日子早已過(guò)去了。

　　垂直相鄰margin的倒塌

　　相鄰元素（一個(gè)接一個(gè)地）的頂部和底部的margin可能會(huì)在很多情況下倒塌，但對(duì)于浮動(dòng)元素或絕對(duì)定位的元素絕不會(huì)出現(xiàn)這樣的情況。閱讀這篇MDN文章或CSS2規(guī)范里的collapsing margin章節(jié)來(lái)了解更多東西吧。

　　水平相鄰的margin永遠(yuǎn)不會(huì)倒塌。

　　設(shè)計(jì)表單的行

　　表單的行，<tr>，不要接收border，除非你在父<table>上設(shè)置了 border-collapse: collapse;。此外，如果<tr>和子<td>或<th>有同樣的border-width，表單行的border將不起作用。點(diǎn)鏈接查看示例。

　　Firefox和<input>按鈕

　　由于一些未知原因，F(xiàn)irefox能提交line-height和適用不能被自定義CSS覆蓋的<input>按鈕。

　　你可以通過(guò)以下兩種方法解決這個(gè)問(wèn)題：

　　1. 堅(jiān)持使用<button>元素

　　2. 在你的按鈕中不要使用line-height

　　你應(yīng)該先用第一種方法（不管怎樣，我都建議用這種方法，因?yàn)?lt;button>元素很好），以下是你需要知道的：

<!-- Not so good -->
<input type="submit" value="Save changes">
<input type="button" value="Cancel">

<!-- Super good everywhere -->
<button type="submit">Save changes</button>
<button type="button">Cancel</button>

　　如果你想要用第二種方法的話，只要不設(shè)置line-height且只使用padding垂直對(duì)齊按鈕文本就行了。用firefox瀏覽器打開(kāi)鏈接來(lái)看看原始的問(wèn)題和解決方案。

　　好消息！這個(gè)問(wèn)題在Firefox30中似乎被解決了。對(duì)于我們以后的使用來(lái)說(shuō)這是個(gè)好消息。但值得注意的是這個(gè)問(wèn)題僅在新版本中得到解決，舊版本的問(wèn)題并未得到解決。

　　Firefox按鈕的內(nèi)部輪廓

　　Firefox用：focus給按鈕（<input>和<button>）增加了一個(gè)內(nèi)部輪廓。顯然，這是為了其可訪問(wèn)性做的，不過(guò)它的位置似乎相當(dāng)怪異。用以下這段CSS來(lái)覆蓋它：

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

　　你可以通過(guò)前一章節(jié)提到的例子中查看這個(gè)解決方案。

　　專(zhuān)業(yè)意見(jiàn)！一定要在按鈕、鏈接和輸入元素中包含一些焦點(diǎn)狀態(tài)。提供可訪問(wèn)功能是至關(guān)重要的，對(duì)于用tab鍵來(lái)選擇內(nèi)容的專(zhuān)業(yè)用戶(hù)亦是如此。

　　始終在<button>上設(shè)置type

　　默認(rèn)值是submit，意味著表單內(nèi)的button都可以提交表單。所有type=”button”的元素勻不會(huì)提交表單，type=”submit”的元素則會(huì)提交表單。

<button type="submit">Save changes</button>
<button type="button">Cancel</button>

　　在應(yīng)用中，如果在表單外使用button就使用type=”button”。

<button class="dismiss" type="button">x</button>

　　有趣的事實(shí)：顯然IE7不能很好的支持button的value屬性。如果不看屬性?xún)?nèi)容的話，innerHtml（<button>標(biāo)簽之間的內(nèi)容）可以彌補(bǔ)這個(gè)問(wèn)題。然而，由于IE7的使用率已經(jīng)下降和給<button>設(shè)置value及innerHtml似乎極少見(jiàn)這兩個(gè)原因讓我覺(jué)得這并不是一個(gè)很值得關(guān)注的問(wèn)題。

　　IE瀏覽器選擇器的限制

　　IE9及更早版本的IE瀏覽器每個(gè)樣式表中只支持4096個(gè)選擇器。組合樣式表和每個(gè)頁(yè)面中包含<style></style>的數(shù)量也受到了限制，最大只能31。在這個(gè)限制之后做的任何東西都會(huì)被瀏覽器給忽略掉。分割CSS，或者開(kāi)始重構(gòu)。我建議后者

　　作為一個(gè)有用的邊注，下面是瀏覽器計(jì)算選擇器的方法：

/* One selector */
.element { }

/* Two more selectors */
.element,
.other-element { }

/* Three more selectors */
input[type="text"],
.form-control,
.form-group > input { }

　　位置解釋

　　設(shè)置了position:fixed；的元素被放置在與瀏覽器窗口有關(guān)的地方。設(shè)置了position:absolute；的元素被放置在離與static（例如，relative,absolute,fixed）不同位置的父元素最近的地方。

　　位置和寬度

　　不要給已經(jīng)設(shè)置了position:[absolute|fixed];,left,right的元素設(shè)置width:100%。使用width:100%與使用left:0,right::0效果是一樣的。選擇使用其中一種，但別兩種都用。

　　定位與轉(zhuǎn)換

　　如果父元素設(shè)置了transform，那么position:fixed將不起作用。用transform創(chuàng)建一個(gè)新的包含塊，有效的強(qiáng)制父元素設(shè)置position:relative且固定元素的作用與position:absolute.一樣。

　　查看Demo和閱讀Eric Meyer's post on the matter

　　原文：wtfhtmlcss.com

　　首先我們來(lái)看一段描述，有人問(wèn)張三現(xiàn)在的需求是什么，張三回答要寶馬車(chē)，還要原裝進(jìn)口的。那么張三的需求是否真的就是進(jìn)口寶馬車(chē)呢？其實(shí)不一定，或許進(jìn)口奧迪車(chē)也能滿(mǎn)足張三的需求，但我們不能只分析到這里，要挖掘更深層次的東西，要寶馬車(chē)干嘛呢？或許是為了代步以圖方便，節(jié)省時(shí)間；或許是愛(ài)慕虛榮，以方便泡MM。一旦我們找到背后隱藏的需求，我們就可以去設(shè)計(jì)一個(gè)替代品，去滿(mǎn)足用戶(hù)的真實(shí)需求，以節(jié)省進(jìn)口寶馬車(chē)那高昂的成本。我們做互聯(lián)網(wǎng)產(chǎn)品也一樣，不能只關(guān)注用戶(hù)表面的需求，而要挖掘出真實(shí)需求，才能設(shè)計(jì)出正確的產(chǎn)品。

　　產(chǎn)品設(shè)計(jì)的過(guò)程，需要考慮人的聽(tīng)覺(jué)、視覺(jué)、味覺(jué)、觸覺(jué)等與人有關(guān)的特質(zhì)，還可以外延至人的心理活動(dòng)和社會(huì)處境?；ヂ?lián)網(wǎng)產(chǎn)品，其實(shí)是社會(huì)學(xué)科的自然學(xué)科表達(dá)，這里的社會(huì)學(xué)科包括社會(huì)學(xué)、心理學(xué)等等，因?yàn)槿吮旧硎歉行缘?、主觀的，代碼的實(shí)現(xiàn)過(guò)程則是邏輯的、嚴(yán)謹(jǐn)?shù)摹＿@也需要我們更加關(guān)注一些理性的層面，去發(fā)掘出人真實(shí)的想法，形式追隨內(nèi)容，產(chǎn)品追隨人心。

　　我們可以分析一些社會(huì)化產(chǎn)品的例子，比如QQ的隱身功能，SNS社區(qū)的真實(shí)頭像和非真實(shí)頭像的區(qū)別，新浪微博的即時(shí)會(huì)話功能等，看起來(lái)這些功能都不是產(chǎn)品的主要功能，是一些附屬的功能，那么為什么要做這些功能，原因就在于人們?cè)谌后w里面有個(gè)體心理表達(dá)這樣深層次的真實(shí)需求在里面，這些功能可以讓用戶(hù)在社交過(guò)程當(dāng)中有存在感又有安全感，也滿(mǎn)足了用戶(hù)傾訴表達(dá)的欲望。不過(guò)這些功能用戶(hù)是不會(huì)告訴你他真正想要真實(shí)頭像還是非真實(shí)頭像的設(shè)置的，要靠我們?nèi)シ治觥?

　　什么是需求？

　　需求是在一定時(shí)期內(nèi)人們的某種需要或者欲望，在經(jīng)濟(jì)學(xué)上還有購(gòu)買(mǎi)欲望的含義。我們?cè)谑占脩?hù)需求的時(shí)候，往往會(huì)停留在表面層次，用戶(hù)說(shuō)什么就是什么，但用戶(hù)說(shuō)的往往不是真實(shí)需求，產(chǎn)品經(jīng)理需要盡最大的努力去挖掘用戶(hù)的真實(shí)需求。

　　1、傾聽(tīng)用戶(hù)不等于聽(tīng)從用戶(hù)。很多時(shí)候我們?nèi)ヂ?tīng)用戶(hù)講解需求，會(huì)陷入到用戶(hù)的思維里面去，認(rèn)為用戶(hù)講的就是他們真實(shí)想要的，這是不夠客觀的。很多用戶(hù)都不知道自己的真實(shí)需求是什么，需要把最終產(chǎn)品或者相似產(chǎn)品的參照物放在用戶(hù)眼前，才能引發(fā)用戶(hù)對(duì)真實(shí)需求的思考，因此用戶(hù)無(wú)法表達(dá)出他們的真實(shí)需求。

　　2、用戶(hù)想要什么不等于真實(shí)需求。如開(kāi)頭所講的例子，用戶(hù)想要什么產(chǎn)品的情況下，我們要去分析有了這個(gè)產(chǎn)品之后，能讓用戶(hù)去做什么，達(dá)到什么樣的結(jié)果，再反過(guò)來(lái)去看，有哪些方式可以達(dá)到這個(gè)結(jié)果。

　　3、解決方案不等于真實(shí)需求。有的用戶(hù)比較有思路，直接告訴你產(chǎn)品該怎么做，系統(tǒng)該怎么設(shè)計(jì)，以達(dá)到他所想要的結(jié)果。有時(shí)候碰到這種用戶(hù)，產(chǎn)品經(jīng)理也會(huì)被繞進(jìn)去，還會(huì)覺(jué)得這個(gè)用戶(hù)思路很清晰，溝通起來(lái)很順暢，實(shí)際情況確是已經(jīng)迷失了產(chǎn)品經(jīng)理自身的職責(zé)。

　　4、可以怎么做不等于應(yīng)該怎么做。后者限定死了，相對(duì)來(lái)說(shuō)是基本不變的，前者確是動(dòng)態(tài)變化的，可以有很多種方法，條條大道都可以通羅馬，而不是應(yīng)該走某條路去羅馬。

　　以上這些方面給我們的啟示就是，互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)之道可能不在產(chǎn)品本身，而是在產(chǎn)品之外，跟人的因素、心理學(xué)、社會(huì)學(xué)等有很大的關(guān)聯(lián)關(guān)系。

　　滿(mǎn)足誰(shuí)的需求？

　　知道了什么需求之后，我們還需要分析需求的目標(biāo)用戶(hù)。做某個(gè)需求到底是滿(mǎn)足誰(shuí)的，是普通用戶(hù)的需求，還是專(zhuān)家用戶(hù)的需求？是領(lǐng)導(dǎo)的需求，還是產(chǎn)品所處行業(yè)的需求？這需要我們產(chǎn)品經(jīng)理對(duì)已獲取到的需求做進(jìn)一步的分析。為什么銀行ATM機(jī)不能取1塊錢(qián)，5塊錢(qián)，10塊錢(qián)？是ATM機(jī)的容量限制問(wèn)題么？是ATM機(jī)的設(shè)計(jì)問(wèn)題么？其實(shí)是ATM只是為了方便那些臨時(shí)缺錢(qián)的用戶(hù)，而這部分用戶(hù)一般不會(huì)取小面額的錢(qián)。

　　通常情況下我們稱(chēng)這類(lèi)目標(biāo)用戶(hù)為產(chǎn)品的關(guān)鍵涉眾，可以從涉眾利益的角度去分析，用戶(hù)需求外加商業(yè)目標(biāo)，也可以反推，這樣我們就能找到需求的服務(wù)對(duì)象。比如寵物商店的關(guān)鍵涉眾是寵物的主人，而不是寵物，自然我們做互聯(lián)網(wǎng)寵物應(yīng)用APP的時(shí)候也要以寵物的主人為分析對(duì)象；財(cái)務(wù)軟件的關(guān)鍵涉眾是企業(yè)老板，而不是企業(yè)里面的會(huì)計(jì)，老板想看到什么樣的財(cái)務(wù)報(bào)表，決定了下面的會(huì)計(jì)要怎么做賬；現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品中很火的理財(cái)產(chǎn)品，就有的是面向普通用戶(hù)的，有的是面向理財(cái)規(guī)劃師的，這都是由產(chǎn)品的用戶(hù)需求和商業(yè)目標(biāo)來(lái)決定的。

　　需求實(shí)現(xiàn)的原則

　　我們分析好需求之后，在實(shí)現(xiàn)的過(guò)程當(dāng)中也會(huì)遇到一些問(wèn)題，是所有的需求都實(shí)現(xiàn)呢，還是只實(shí)現(xiàn)其中的一部分？因?yàn)楝F(xiàn)在越來(lái)越多的成功互聯(lián)網(wǎng)產(chǎn)品表明，越專(zhuān)注于某一個(gè)功能越能體現(xiàn)出產(chǎn)品的價(jià)值，也就越容易成功。因此我們?cè)趯?duì)待需求實(shí)現(xiàn)的時(shí)候，也要有一個(gè)取舍的過(guò)程。

　　1、滿(mǎn)足核心用戶(hù)的核心需求。核心用戶(hù)就是指產(chǎn)品目標(biāo)用戶(hù)中的普通用戶(hù)，而不是專(zhuān)家型用戶(hù)或者小眾用戶(hù)，核心需求就是產(chǎn)品的核心競(jìng)爭(zhēng)力。典型的就是80/20法則，很多時(shí)候我們不能為了滿(mǎn)足1%的用戶(hù)需求而影響了99%的用戶(hù)的使用場(chǎng)景。

　　2、學(xué)會(huì)妥協(xié)，在不完美中找平衡。做出一個(gè)完美的產(chǎn)品，相信這是大多數(shù)產(chǎn)品經(jīng)理的夢(mèng)想，但現(xiàn)實(shí)往往是骨感的，產(chǎn)品經(jīng)理要學(xué)會(huì)在有限的資源下，把正確的事情做到極致，這就是成功。

　　3、面向未來(lái)規(guī)劃產(chǎn)品。產(chǎn)品經(jīng)理的思維不應(yīng)該僅停留在當(dāng)下，而是應(yīng)該著眼于未來(lái)，如果覺(jué)得某個(gè)方向是正確的，就應(yīng)該堅(jiān)持朝著某個(gè)方面去設(shè)計(jì)產(chǎn)品，培養(yǎng)用戶(hù)的使用習(xí)慣。畢竟幾年前誰(shuí)都想不到可以在手機(jī)端有微信、陌陌這種社交和通訊方式。

　　4、需求傳遞明確且不打折扣。既定的需求不能在實(shí)現(xiàn)的過(guò)程當(dāng)中出現(xiàn)差錯(cuò)，因此產(chǎn)品經(jīng)理要跟進(jìn)實(shí)現(xiàn)的過(guò)程，防止出現(xiàn)實(shí)現(xiàn)偏差而導(dǎo)致的需求偏離。

　　通過(guò)以上的分析，相信大家對(duì)需求分析和實(shí)現(xiàn)的過(guò)程有了基本的了解，一個(gè)真實(shí)的需求沒(méi)有實(shí)現(xiàn)出來(lái)，誰(shuí)會(huì)最悲痛？用戶(hù)是不知道的，因?yàn)樗緵](méi)有意識(shí)到自己的需求，產(chǎn)品經(jīng)理是唯一可以挖掘出真實(shí)需求的人，如果你沒(méi)有把握住分析的機(jī)會(huì)，或許你就在不經(jīng)意間錯(cuò)過(guò)了很多微信級(jí)的重量級(jí)互聯(lián)網(wǎng)產(chǎn)品。

　　舉個(gè)例子：想要找一個(gè)廚師學(xué)習(xí)班來(lái)增進(jìn)一下做菜的手藝，在百度會(huì)搜索某某學(xué)校名稱(chēng)嗎?

　　應(yīng)該會(huì)搜索 廚師學(xué)校、廚師學(xué)習(xí)、廚師培訓(xùn) 這類(lèi)關(guān)鍵詞才對(duì)吧，而且可能會(huì)加上：推薦、最好的、學(xué)的快、教的好的等描述性詞語(yǔ)，除非這個(gè)學(xué)校廣告或品牌做的特別好，實(shí)現(xiàn)了品牌代替種類(lèi)的影響力(類(lèi)似豆?jié){機(jī) = 九陽(yáng)、送禮 = 腦白金)。

　　所以說(shuō)，企業(yè)的產(chǎn)品、服務(wù)能夠在百度搜得到，這才是好網(wǎng)站，才能把網(wǎng)站物盡其用。

　　“做好站”積極與企業(yè)溝通，分析企業(yè)產(chǎn)品、服務(wù)特性與描述，有效在網(wǎng)站中分布關(guān)鍵字，并不斷鞏固關(guān)鍵字排行位置，為企業(yè)通過(guò)網(wǎng)站打開(kāi)互聯(lián)網(wǎng)窗口而做積極的努力。

　　組合式關(guān)鍵詞、長(zhǎng)尾關(guān)鍵詞合理分布，站內(nèi)合理互聯(lián)，并可有償主動(dòng)出擊，在各大論壇、行業(yè)門(mén)戶(hù)推送企業(yè)相關(guān)產(chǎn)品、服務(wù)信息，提升網(wǎng)站流量、訪客人數(shù)效果顯著。

　　從而帶起企業(yè)網(wǎng)站在百度的權(quán)重，不用花高昂的按次扣費(fèi)的百度推廣費(fèi)用，就能夠有效提升百度排名，而且長(zhǎng)期有效。

　　做為一個(gè)標(biāo)準(zhǔn)的企業(yè)形象展示網(wǎng)站，或許您認(rèn)為：網(wǎng)站的功能對(duì)外展示好企業(yè)信息、產(chǎn)品資料、聯(lián)系方式就夠了，企業(yè)的動(dòng)態(tài)、產(chǎn)品更新量并不多。

　　那么您就可能會(huì)失去從百度來(lái)的潛在顧客，百度搜索的原則是通過(guò)關(guān)鍵字檢索，按照權(quán)重排行，一個(gè)網(wǎng)站的關(guān)鍵字重復(fù)度、收錄量、更新度都影響著權(quán)重，通過(guò)百度百科中對(duì)百度權(quán)重的影響因素描述如下：

　　地址見(jiàn)：http://baike.baidu.com/view/6208485.htm

　　影響因素

　　1、網(wǎng)站外鏈的推廣度、數(shù)量和質(zhì)量。

　　2、網(wǎng)站的內(nèi)鏈夠強(qiáng)大。

　　3、網(wǎng)站的原創(chuàng)質(zhì)量。

　　4、網(wǎng)站的年齡時(shí)間。

　　5、網(wǎng)站的更新頻率。

　　6、網(wǎng)站的服務(wù)器。

　　7、網(wǎng)站的流量:流量越高網(wǎng)站權(quán)重越高;

　　8、網(wǎng)站的關(guān)鍵詞排名:關(guān)鍵詞排名越靠前，網(wǎng)站的權(quán)重越高;

　　9、網(wǎng)站的收錄數(shù)量:網(wǎng)站百度收錄數(shù)量越多，網(wǎng)站百度權(quán)重越高;

　　10、網(wǎng)站或者網(wǎng)頁(yè)的瀏覽量及深度:即用戶(hù)體驗(yàn)越好，網(wǎng)站百度權(quán)重越高。

　　11、關(guān)鍵詞的數(shù)量：關(guān)鍵詞的數(shù)量越多，積累的權(quán)重也會(huì)越高，不過(guò)，這還要看關(guān)鍵詞的流量，如果關(guān)鍵詞的流量非常的低，即便排名很靠前，權(quán)重也不會(huì)積累到很多，不過(guò)可以積少成多。

　　如果一個(gè)網(wǎng)站的資料一個(gè)月或幾個(gè)月才更新一次，對(duì)百度來(lái)說(shuō)，這個(gè)網(wǎng)站的文字量太少了，在百度里都沒(méi)有網(wǎng)站的關(guān)鍵字記錄，何談從百度的數(shù)據(jù)庫(kù)中搜到企業(yè)網(wǎng)址?

　　當(dāng)然資料更新與維護(hù)需要成本，因?yàn)槲覀儾皇窃谧鲆粋€(gè)入口網(wǎng)站或?qū)I(yè)網(wǎng)站，不需要每天更新;如果能做到每周更新或每?jī)芍芨?，就可以保持網(wǎng)站的常新與穩(wěn)步提升百度權(quán)重。

　　“做好站”還提供完善的網(wǎng)站管家服務(wù)，更新信息可以委托給我們來(lái)執(zhí)行：

　　1、您可以將企業(yè)的動(dòng)態(tài)通過(guò)口頭、文字、圖片、視頻等形式傳遞給我們，我們將整理成文字新聞、圖片新聞、視頻新聞等形式更新至網(wǎng)站;

　　2、企業(yè)的產(chǎn)品更新，只需將產(chǎn)品文字描述、圖片、視頻等信息傳遞給我們，并描述格式、形式要求，由我們更新至網(wǎng)站;

　　2、通過(guò)對(duì)企業(yè)的經(jīng)營(yíng)性質(zhì)、產(chǎn)品類(lèi)型、服務(wù)特性進(jìn)行分析，查找并編寫(xiě)新鮮軟文更新至網(wǎng)站動(dòng)態(tài);

　　4、更新技術(shù)動(dòng)態(tài)與行業(yè)咨詢(xún)至企業(yè)網(wǎng)站.

　　更多詳細(xì)說(shuō)明請(qǐng)查詢(xún)站內(nèi)或聯(lián)系我們。

　　另外所謂活網(wǎng)站的“活”，也是指需具備與客戶(hù)互動(dòng)機(jī)制，例如郵件列表 系統(tǒng) 、留言板或客服系統(tǒng)等，當(dāng)然不需樣樣功能都具備。必須針對(duì)網(wǎng)站的定位，選擇適死機(jī)制;同時(shí)對(duì)于客戶(hù)所提意見(jiàn)的處理，也需及時(shí)，不能讓客戶(hù)對(duì)網(wǎng)站失去信心!

　　舉個(gè)例子，百度的首頁(yè)，突出了它的搜索功能，并且許多人都將百度設(shè)為首頁(yè)，試想，百度的首頁(yè)要是加上許多花哨的動(dòng)畫(huà)、炫目的大圖，大家會(huì)有多少耐心等待圖片加載，會(huì)有多少人會(huì)看圖片?

　　所以，網(wǎng)站要突出主題，頁(yè)面美工的目的也是為了更好的展現(xiàn)主題，而不是跟主題搶鏡頭。

　　其實(shí)就目前上網(wǎng)速度來(lái)看，網(wǎng)頁(yè)如果加上太多的FLASH，或掛上太多圖片，勢(shì)必影響傳輸速度，這樣對(duì)普遍缺乏信心的客戶(hù)而言，很容易就因?yàn)椴辉改托牡群蛳螺d完畢，而選擇中途跳開(kāi)。

　　如此一來(lái)，再漂亮的網(wǎng)頁(yè)也不會(huì)有人看!依照我們的服務(wù)經(jīng)驗(yàn)，愈來(lái)愈多客戶(hù)選擇實(shí)用網(wǎng)站，不愿選擇太花哨的網(wǎng)站。

　　一個(gè)干干凈凈、條理分明的網(wǎng)頁(yè)比較容易閱讀，客戶(hù)可以在很短時(shí)間找到他要的信息，不必被太多視覺(jué)污染所干擾。

　　如果你在經(jīng)營(yíng)自己的在線商務(wù)，你的網(wǎng)站最重要的任務(wù)就是銷(xiāo)售你的產(chǎn)品或服務(wù)，其他任何脫離這個(gè)基本原則的東西都是浪費(fèi)。

　　許多企業(yè)老板常說(shuō)你看我的競(jìng)爭(zhēng)對(duì)手 XXX的網(wǎng)站多棒，什么功能都有，網(wǎng)頁(yè)又漂亮，趕快幫我搞個(gè)更漂亮的網(wǎng)站來(lái)跟他拼一拼!

　　想要超越對(duì)手網(wǎng)站是正確的，但這樣的做法卻效果甚微甚至適得其反。

　　網(wǎng)站是服務(wù)用戶(hù)，提供給用戶(hù)所需要的信息、資料，并通過(guò)網(wǎng)站建立對(duì)企業(yè)的第一印象，進(jìn)而成為企業(yè)的顧客。

　　網(wǎng)站不是做來(lái)好看的，也絕對(duì)不是在比誰(shuí)的網(wǎng)站漂亮，真正關(guān)鍵在于，用戶(hù)喜歡什么樣的網(wǎng)站?

　　想要網(wǎng)站漂亮、絢麗，離不開(kāi)FLASH、圖片的配合，當(dāng)頁(yè)面中充滿(mǎn)了漂亮的圖片與動(dòng)畫(huà)，網(wǎng)頁(yè)中的文字也為了特殊的字體與效果而使用了圖片文字，這樣的頁(yè)面確實(shí)漂亮，但網(wǎng)站得需要有人來(lái)看才有意義。

　　建立網(wǎng)站就是希望更多人來(lái)訪問(wèn)網(wǎng)站，并成為企業(yè)的客戶(hù)。

　　這離不開(kāi)百度的幫助，想要通過(guò)百度搜索送來(lái)訪客，首先百度收錄網(wǎng)站，當(dāng)滿(mǎn)屏的圖片存放到百度數(shù)據(jù)庫(kù)中，那形成的不是文字，而是空。百度不認(rèn)識(shí)圖片，只認(rèn)識(shí)文字。

　　有些企業(yè)網(wǎng)站在源代碼中只有少的可憐的關(guān)鍵字，甚至有的只有企業(yè)的名字，連簡(jiǎn)介都是圖片寫(xiě)的，那在百度中只能通過(guò)搜索企業(yè)的名稱(chēng)才能找到企業(yè)網(wǎng)站。

　　如果企業(yè)是廚師學(xué)校，那就失去了如：哈爾濱 學(xué)廚藝、哈爾濱廚師培訓(xùn)、哈爾濱哪家學(xué)廚師最好 這樣的被搜索到的機(jī)會(huì)，網(wǎng)站就不能夠?yàn)槠髽I(yè)帶來(lái)網(wǎng)絡(luò)宣傳效果。