国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

本文主要敘述如何設(shè)計(jì)結(jié)構(gòu)化 XHTML 頁(yè)面，以及過(guò)程中經(jīng)常遇到的問(wèn)題，并且給出我的習(xí)慣做法僅供參考。

從流程上說(shuō)，當(dāng) PM 或者架構(gòu)師將設(shè)計(jì)規(guī)范或者頁(yè)面結(jié)構(gòu)說(shuō)明書(shū)（wireframes、content inventory等文檔）確定下來(lái)后，開(kāi)發(fā)團(tuán)隊(duì)和設(shè)計(jì)團(tuán)隊(duì)就可以一起起草結(jié)構(gòu)化 XHTML 代碼了，包括統(tǒng)一命名、統(tǒng)一代碼類(lèi)型等等。隨后程序員寫(xiě)程序，參照結(jié)構(gòu)化 XHTML 代碼去輸出，設(shè)計(jì)師用 CSS 設(shè)計(jì)界面而不改動(dòng) XHTML 代碼（理想狀態(tài)下）。

如果需要增刪代碼，則需要開(kāi)發(fā)工程師或 PM 與設(shè)計(jì)師一起討論，意見(jiàn)一致后再確認(rèn)。

語(yǔ)義一致原則

Using The Right Tag For The Right Job。不要從表現(xiàn)上去決定代碼，而要從邏輯結(jié)構(gòu)上。其實(shí)這一點(diǎn)我在以前翻譯的文章里面多有涉及。說(shuō)簡(jiǎn)單點(diǎn)，當(dāng)你關(guān)閉樣式表或者IE沒(méi)有加載樣式表時(shí)，頁(yè)面也是如同大綱目錄般清晰可理解。

常見(jiàn)錯(cuò)誤

• 用span class="title" 來(lái)標(biāo)標(biāo)題，而對(duì)h1~h6視而不見(jiàn)；
• 用一大串的divs 去做 navigation，做 menu，通常情況下這樣做不必要；
• Divitis 和 classitis 等常見(jiàn)結(jié)構(gòu)化錯(cuò)誤可以參看這篇文章。

合理命名

?？吹揭恍┯⒄Z(yǔ)不過(guò)關(guān)的，會(huì)把 id 和 class寫(xiě)錯(cuò)。千萬(wàn)不要用拼音縮寫(xiě)，任何一個(gè)程序員都會(huì)鄙視這種行為。我將談一下我的命名習(xí)慣。不采用帶表現(xiàn)得值也是要注意的，比如要避免left/top 等等。

關(guān)于id和class

id是一個(gè)頁(yè)面里唯一的，根據(jù)我的經(jīng)驗(yàn)，在團(tuán)隊(duì)合作中 id 在整個(gè)網(wǎng)站中都最好是唯一的。這樣程序員利用 JS 或者設(shè)計(jì)師寫(xiě) CSS 的時(shí)候也不會(huì)犯錯(cuò)，特別是存在多個(gè)應(yīng)用（相當(dāng)于多個(gè)系統(tǒng)）的時(shí)候。比如在你的網(wǎng)站里面首頁(yè)有一個(gè) id 值為 header，某頻道里面也有一個(gè) id 為 header，而兩者的內(nèi)容不一致。那前者可以命名為 header_index，后者為 header-channel。

對(duì)于圖片命名，一般是 type-n-name，如 bg-today-top-ten.jpg 和 logo-site.gif，這樣在文件排序的時(shí)候非常方便可以知道哪些是背景圖，哪些是 logo。在CSS里面也可以如此，但是目前似乎沒(méi)有CSS整理工具CSS在線整形器。

無(wú)論是 id 還是 class，盡量避免同一值不同樣式的情況。比如在首頁(yè)里一個(gè) class 是 more，頻道里面也有一個(gè) class 是 more，兩者卻不是同一種樣式。這種情況通常出現(xiàn)在多人團(tuán)隊(duì)里，比如A負(fù)責(zé)A頁(yè)面，B負(fù)責(zé)B頁(yè)面，如果不約定好，就容易產(chǎn)生問(wèn)題。

常見(jiàn)命名

• 包含 wrapper和container
• 頁(yè)頭 header 或縮寫(xiě)為hd
• 頁(yè)尾 footer 或縮寫(xiě)為ft
• 導(dǎo)航 nav
• 您的位置 breadcrumbs
• 二級(jí)導(dǎo)航 sub_nav
• 側(cè)欄 sidebar或side-column
• 模塊 module

寫(xiě)多了就會(huì)有很多積累，無(wú)論是程序員還是設(shè)計(jì)師對(duì)于命名都是非常頭疼的一件事。我對(duì)于大家怎么命名、怎么放置文件、書(shū)寫(xiě)習(xí)慣非常感興趣。

其他

如果要在一行的左右兩側(cè)放文字，你會(huì)怎么做？一種寫(xiě)法：

1. <div style="text-align: right;">
2. <span style="float: left;">left text</span>
3. right text
4. </div>

為什么不這么寫(xiě)：

1. <div>
2. <span style="float: right;">right text</span>
3. left text
4. </div>

樣例頁(yè)面

有什么區(qū)別呢？在Firefox下去掉樣式表可以發(fā)現(xiàn)，在第二種方法里，right text顯示在left而left text顯示在right。有時(shí)候left text和right text可能是不相關(guān)的，那可以學(xué) Flickr 一樣不用span而用div，這樣去掉樣式表就不在同一行了。

可以看到很多都是應(yīng)用性的心得，可能在下一個(gè)頁(yè)面里你又換一種方式去寫(xiě)了。標(biāo)準(zhǔn)并沒(méi)有一套標(biāo)準(zhǔn)去約束它，呵呵。