網(wǎng)頁重構(gòu)的一些技巧

我重構(gòu)的時候，學(xué)習(xí)了一些行業(yè)標(biāo)準(zhǔn)的做法。主要思路來源于以下一些，比如Rest,Grid,Dry等等（ 1，Css文件的組織。 Css文件采用按照Rest中的資源來進行組織， 比如User,那就有一個user.css,如果這個資源的比較復(fù)雜， 可以進一步分解成user_new,user_edit等等。某些共用的組件，可以再分出來，比如toolbar.css 2，根選擇器使用class,其他的盡量使用原生選擇器，,根選擇器一般是網(wǎng)頁Grid系統(tǒng)中大塊結(jié)構(gòu)。

例子： table.user td span{font-size:12px}

即使使用class,也帶上原生標(biāo)簽

例子: table.user td span.user{font-size:12px} 這樣做的最主要的原因是給class取名實在在是頭痛。名字還容易沖突。取名的時候要考慮語義，其實我們只不過為了美化一下顯示。采用了我這種做法的Css文件，不看Html源碼， 我也能知道我正在干什么了。 3，文本標(biāo)簽的使用。 很多網(wǎng)站使用span,因為我避免使用class,那么同一層級span只能使用一次。那盡量使 用<i></i><em></em><strong>< /strong><cite></cite>，如果是不同層級，那么多種標(biāo)簽組合也夠用了 例如 <div><em>張三</em>購買了<strong>3個</strong>面包</div> 相對的css就是 div.score em{color:red}

div.scroe strong{color:greeen}

塊元素，要靈活運用<h1>到<h6>他們和Div是等價的。

4，使用class的情況 a,當(dāng)某個塊是Grid中的基本塊的時候 b,供javascript調(diào)用的時候，c,萬不得已的情況下。也就是說利用原生選擇器就能解決的問題，就不要用class。 5，美工只負(fù)責(zé)大括號里面的內(nèi)容 比如 div.score em{color:red; font:12px}中美工只負(fù)責(zé)調(diào)整｛｝中的內(nèi)容，程序員負(fù)責(zé)｛｝前的內(nèi)容。由于不輕易引入class,大家比較容易溝通。 6，工作流程。 1，美工利用Grid系統(tǒng)做出設(shè)計圖 2，設(shè)計圖中的基本塊的命名，用來做根選器的class名。 3，程序員將做好的html和css交給美工， css中的大括號內(nèi)容程序員可以不寫或者少寫。 4，美工只調(diào)整css中{}的內(nèi)容，直到滿意為止， 如果發(fā)覺｛｝前的內(nèi)容不合理，和程序員商量。（注意，由于不要求美工看源代碼，只要求看Css, 而css中主要是原生標(biāo)簽，所以基本能看懂，這樣不管是asp.net,jsp,php都不需要美工關(guān)心了）

基本就這么多了， 其他的一時也想不起來，歡迎指出問題和缺點。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章標(biāo)題：網(wǎng)頁重構(gòu)的一些技巧
標(biāo)題來源：http://www.muchs.cn/news33/317483.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、動態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站建設(shè)、App開發(fā)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)