CSS網(wǎng)頁布局經(jīng)驗：CSS框架思維雛形與CSS文件精簡_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　CSS網(wǎng)頁布局經(jīng)驗：CSS框架思維雛形與CSS文件精簡

　　穎兒的經(jīng)驗值得我們大家學(xué)習(xí)，也可以借鑒。不過這思路需要各位注重。
　　可在短期有效果。但會有很大的問題。主要是：
　　為了表現(xiàn)層的東西，在內(nèi)容層增加了不必要的代碼。
　　假如需要重構(gòu)，你能保證還需要這么多的CLASS么。

　　沒有必要為一個元素設(shè)置這么多類（class）。
　　可以在CSS中應(yīng)用群組選擇器，對樣式一致的元素進(jìn)行批量定義。
　　穎兒只是舉個例子，可以在不考慮重構(gòu)的情況下，讓文件體積最小。
　　那樣寫是想給各位一個思路，沒必要重寫好多!

　　假如在你切完所有圖之后,假如你切的網(wǎng)站是娛樂性的網(wǎng)站.(重復(fù)性比較多)當(dāng)你所有工作已經(jīng)做完時,你的上頭告訴你,要把所有網(wǎng)站里的內(nèi)容的樣式縮寫!而且要統(tǒng)一~樣式里面所有的重復(fù)的沒用的,都刪,就象給所有樣式脫了一層外套,讓它越簡單越好!

　　這時你不用煩腦,很簡單!來看看我是如何做的:

　　先觀查你網(wǎng)站里經(jīng)常用到的樣式,重復(fù)性比較多的,把它寫在共用的樣式里!這個樣式表里放的都是共有的,在任何html頁面里只要能用到這個共用樣式表里的樣式,都可以把它鏈過去!

　　例如:
　　這是一些常用的屬性在共用里寫好,在子樣式里就不用再去定義了

示例代碼 [www.ghpqjb.com]

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

　　這個樣式很重要，是我在網(wǎng)上看到的。加上這個樣式，就不用給div定義高了。其作用主要是為了清除浮動。
　　未清除浮動，F(xiàn)F沒能獲取容器的高度，所以邊框和背景會出錯。外邊距也跟著出錯。可能布局也會受到強(qiáng)烈的干擾。主要是由于對浮動的理由不同所造成的。只要合理的嵌套與清除浮動，即可避免此問題。

示例代碼 [www.ghpqjb.com]

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里這個樣式很常用

示例代碼 [www.ghpqjb.com]

.fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}

　　下面這個是字體樣式

示例代碼 [www.ghpqjb.com]

.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;}

　　這個是文字鏈接樣式

示例代碼 [www.ghpqjb.com]

a{color:#3a76ce;text-decoration:none;}
(這個是網(wǎng)站里,默認(rèn)的凡是代鏈接的都是這個顏色)
a:hover{text-decoration:underline;}
(這個是網(wǎng)站里凡是代鏈接的樣式表現(xiàn)形式,鼠標(biāo)移上去出下劃線)

下面這幾個是自己隨意定義的,網(wǎng)站里用的比較多的.假如有非凡的你可以在子樣式里定義.

示例代碼 [www.ghpqjb.com]

a.red{color:#FF3131;}
a.gray{color:#656565;}
a.blue{color:#2C7FFF;}
a.xhx{ text-decoration:underline}
(這個是代下劃線的,假如你的這個鏈接樣式,在鼠標(biāo)沒有移上去時就有下劃線時,就加上這個.
因為class="(這個里可以用多個樣式)"

　　例如:<a class="red xhx" herf="#">您好</a>
　　這個樣式就是紅色的代下劃線的.假如不加xhx那就是紅色的不代下劃線樣式,只有鼠標(biāo)移上去之后才會出下劃線!
　　分開寫,這樣可以套用多個文字樣式,這樣重復(fù)性少很多!

　　下面這個是圖片鏈接樣式

示例代碼 [www.ghpqjb.com]

img{vertical-align:middle; border:none;}
(寫上這個圖片會默認(rèn)的在文字中間,要不然圖片和文字會對不齊)
a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}
a.img45 img,img.img45 { border:1px solid #ccc; padding:1px;width:45px; height:45px;}
a.img60 img,img.img60 { border:1px solid #ccc; padding:1px;width:60px; height:60px;}
a.img90 img,img.img90 { border:1px solid #ccc; padding:1px;width:90px; height:90px;}
a.img150 img,img.img150 { border:1px solid #ccc; padding:1px;width:150px; height:150px;}
a.img260 img,img.img260 { border:1px solid #ccc; padding:1px;width:260px; height:260px;}
a.img300 img,img.img300 { border:1px solid #ccc; padding:1px;width:300px; height:300px;}
a:hover img.img20,a:hover img.img45,a:hover img.img60,a:hover img.img90,a:hover img.img150,a:hover img.img260,a:hover img.img300{border:1px solid #357CCA;padding:1px;}
a:hover{color:357CCA;padding:0px;}

　　比如你的圖片大小比較多,你可以象我這樣寫,把圖片大小的樣式寫義出來,然后在用到的時候直接用就可以
　　我定義這個是:圖片代邊框,而且邊框里面與圖片之間有一象索的距離.當(dāng)鼠標(biāo)移上去邊框變顏色

示例代碼 [www.ghpqjb.com]

a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}

　　例如:這個,為什么后面有個(img.img20) ,這個是不代鏈接的,在圖片后加上這個樣式,圖片上就會有邊框而且不代鏈接a.img20 img,這個是給圖片代鏈接用的<a class="img20">圖片</a>這樣圖片就會代鏈接
　　還有就是你網(wǎng)站里經(jīng)常用到的框架比較多的把它寫出來,寫好后下邊要做的工作就是把你寫的這些樣式,
另做一個html頁面,把你這些樣式都在html頁面里做出來,分好欄目!

　　例如:文字樣式文字鏈接樣式圖片樣式框架樣式常用樣式
　　都做好后,當(dāng)你瀏覽時,頁面顯示的效果就是你寫的樣式的效果.這些工作做完后你就可以給你的網(wǎng)站進(jìn)行修理了!
　　當(dāng)你需要用到共有里的樣式時,你就打開那個html頁面,找相對應(yīng)的那個樣式!直接拿過去套用就可以了,不用再去css里找了!
　　這樣方便!而且還能直接看到效果~