CSS網(wǎng)頁布局經(jīng)驗：CSS框架思維雛形與CSS文件精簡
穎兒的經(jīng)驗值得我們大家學(xué)習(xí)，也可以借鑒。不過這思路需要各位注意。
可在短期有效果。但會有很大的問題。主要是：
為了表現(xiàn)層的東西，在內(nèi)容層增加了不必要的代碼。
如果需要重構(gòu)，你能保證還需要這么多的CLASS么。
沒有必要為一個元素設(shè)置這么多類（class）。
可以在CSS中應(yīng)用群組選擇器，對樣式一致的元素進行批量定義。
穎兒只是舉個例子，可以在不考慮重構(gòu)的情況下，讓文件體積最小。
那樣寫是想給各位一個思路，沒必要重寫好多!
假如在你切完所有圖之后,假如你切的網(wǎng)站是娛樂性的網(wǎng)站.(重復(fù)性比較多)當(dāng)你所有工作已經(jīng)做完時,你的上頭告訴你,要把所有網(wǎng)站里的內(nèi)容的樣式縮寫!而且要統(tǒng)一~樣式里面所有的重復(fù)的沒用的,都刪,就象給所有樣式脫了一層外套,讓它越簡單越好!
這時你不用煩腦,很簡單!來看看我是如何做的:
先觀查你網(wǎng)站里經(jīng)常用到的樣式,重復(fù)性比較多的,把它寫在共用的樣式里!這個樣式表里放的都是共有的,在任何html頁面里只要能用到這個共用樣式表里的樣式,都可以把它鏈過去!
例如:
這是一些常用的屬性在共用里寫好,在子樣式里就不用再去定義了。
Example Source Code
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
這個樣式很重要，是我在網(wǎng)上看到的。加上這個樣式，就不用給div定義高了。其作用主要是為了清除浮動。
未清除浮動，F(xiàn)F沒能獲取容器的高度，所以邊框和背景會出錯。外邊距也跟著出錯。可能布局也會受到強烈的干擾。主要是由于對浮動的理由不同所造成的。只要合理的嵌套與清除浮動，即可避免此問題。
Example Source Code
p{ margin:0px;padding:0px;margin-top:5px;}
form,h1,h2,h3,h4,h5,h6,h7 { margin:0px; padding:0px;}
ul,li{list-style:none;margin:0px;padding:0px;}
下面這個是浮動樣式,在div+css里這個樣式很常用：
Example Source Code
.fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
下面這個是字體樣式：
Example Source Code
.font_bold{ font-weight:bold;}
.font_14{font-size:14px;}
.font_red{ color:#FF3131;}
.font_blue{ color:#0000CC}
.font_gray{ color:#999;}
.font_10{ font-size:10px;}
穎兒的經(jīng)驗值得我們大家學(xué)習(xí)，也可以借鑒。不過這思路需要各位注意。
可在短期有效果。但會有很大的問題。主要是：
為了表現(xiàn)層的東西，在內(nèi)容層增加了不必要的代碼。
如果需要重構(gòu)，你能保證還需要這么多的CLASS么。
沒有必要為一個元素設(shè)置這么多類（class）。
可以在CSS中應(yīng)用群組選擇器，對樣式一致的元素進行批量定義。
穎兒只是舉個例子，可以在不考慮重構(gòu)的情況下，讓文件體積最小。
那樣寫是想給各位一個思路，沒必要重寫好多!
假如在你切完所有圖之后,假如你切的網(wǎng)站是娛樂性的網(wǎng)站.(重復(fù)性比較多)當(dāng)你所有工作已經(jīng)做完時,你的上頭告訴你,要把所有網(wǎng)站里的內(nèi)容的樣式縮寫!而且要統(tǒng)一~樣式里面所有的重復(fù)的沒用的,都刪,就象給所有樣式脫了一層外套,讓它越簡單越好!
這時你不用煩腦,很簡單!來看看我是如何做的:
先觀查你網(wǎng)站里經(jīng)常用到的樣式,重復(fù)性比較多的,把它寫在共用的樣式里!這個樣式表里放的都是共有的,在任何html頁面里只要能用到這個共用樣式表里的樣式,都可以把它鏈過去!
例如:
這是一些常用的屬性在共用里寫好,在子樣式里就不用再去定義了。
Example Source Code
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
這個樣式很重要，是我在網(wǎng)上看到的。加上這個樣式，就不用給div定義高了。其作用主要是為了清除浮動。
未清除浮動，F(xiàn)F沒能獲取容器的高度，所以邊框和背景會出錯。外邊距也跟著出錯。可能布局也會受到強烈的干擾。主要是由于對浮動的理由不同所造成的。只要合理的嵌套與清除浮動，即可避免此問題。
Example Source Code
p{ margin:0px;padding:0px;margin-top:5px;}
form,h1,h2,h3,h4,h5,h6,h7 { margin:0px; padding:0px;}
ul,li{list-style:none;margin:0px;padding:0px;}
下面這個是浮動樣式,在div+css里這個樣式很常用：
Example Source Code
.fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
下面這個是字體樣式：
Example Source Code
.font_bold{ font-weight:bold;}
.font_14{font-size:14px;}
.font_red{ color:#FF3131;}
.font_blue{ color:#0000CC}
.font_gray{ color:#999;}
.font_10{ font-size:10px;}