CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):CSS框架思維雛形與CSS文件精簡(jiǎn)_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):CSS框架思維雛形與CSS文件精簡(jiǎn)
穎兒的經(jīng)驗(yàn)值得我們大家學(xué)習(xí),也可以借鑒。不過(guò)這思路需要各位注重。
可在短期有效果。但會(huì)有很大的問(wèn)題。主要是:
為了表現(xiàn)層的東西,在內(nèi)容層增加了不必要的代碼。
假如需要重構(gòu),你能保證還需要這么多的CLASS么。
沒(méi)有必要為一個(gè)元素設(shè)置這么多類(class)。
可以在CSS中應(yīng)用群組選擇器,對(duì)樣式一致的元素進(jìn)行批量定義。
穎兒只是舉個(gè)例子,可以在不考慮重構(gòu)的情況下,讓文件體積最小。
那樣寫是想給各位一個(gè)思路,沒(méi)必要重寫好多!
假如在你切完所有圖之后,假如你切的網(wǎng)站是娛樂(lè)性的網(wǎng)站.(重復(fù)性比較多)當(dāng)你所有工作已經(jīng)做完時(shí),你的上頭告訴你,要把所有網(wǎng)站里的內(nèi)容的樣式縮寫!而且要統(tǒng)一~樣式里面所有的重復(fù)的沒(méi)用的,都刪,就象給所有樣式脫了一層外套,讓它越簡(jiǎn)單越好!
這時(shí)你不用煩腦,很簡(jiǎn)單!來(lái)看看我是如何做的:
先觀查你網(wǎng)站里經(jīng)常用到的樣式,重復(fù)性比較多的,把它寫在共用的樣式里!這個(gè)樣式表里放的都是共有的,在任何html頁(yè)面里只要能用到這個(gè)共用樣式表里的樣式,都可以把它鏈過(guò)去!
例如:
這是一些常用的屬性在共用里寫好,在子樣式里就不用再去定義了
示例代碼 [m.dounai2.com]
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
這個(gè)樣式很重要,是我在網(wǎng)上看到的。加上這個(gè)樣式,就不用給div定義高了。其作用主要是為了清除浮動(dòng)。
未清除浮動(dòng),F(xiàn)F沒(méi)能獲取容器的高度,所以邊框和背景會(huì)出錯(cuò)。外邊距也跟著出錯(cuò)。可能布局也會(huì)受到強(qiáng)烈的干擾。主要是由于對(duì)浮動(dòng)的理由不同所造成的。只要合理的嵌套與清除浮動(dòng),即可避免此問(wèn)題。
示例代碼 [m.dounai2.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;}
form,h1,h2,h3,h4,h5,h6,h7 { margin:0px; padding:0px;}
ul,li{list-style:none;margin:0px;padding:0px;}
下面這個(gè)是浮動(dòng)樣式,在div css里這個(gè)樣式很常用
示例代碼 [m.dounai2.com]
.fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
下面這個(gè)是字體樣式
示例代碼 [m.dounai2.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;}
.font_14{font-size:14px;}
.font_red{ color:#FF3131;}
.font_blue{ color:#0000CC}
.font_gray{ color:#999;}
.font_10{ font-size:10px;}
這個(gè)是文字鏈接樣式
示例代碼 [m.dounai2.com]
a{color:#3a76ce;text-decoration:none;}
(這個(gè)是網(wǎng)站里,默認(rèn)的凡是代鏈接的都是這個(gè)顏色)
a:hover{text-decoration:underline;}
(這個(gè)是網(wǎng)站里凡是代鏈接的樣式表現(xiàn)形式,鼠標(biāo)移上去出下劃線)
(這個(gè)是網(wǎng)站里,默認(rèn)的凡是代鏈接的都是這個(gè)顏色)
a:hover{text-decoration:underline;}
(這個(gè)是網(wǎng)站里凡是代鏈接的樣式表現(xiàn)形式,鼠標(biāo)移上去出下劃線)
下面這幾個(gè)是自己隨意定義的,網(wǎng)站里用的比較多的.假如有非凡的你可以在子樣式里定義.
示例代碼 [m.dounai2.com]
a.red{color:#FF3131;}
a.gray{color:#656565;}
a.blue{color:#2C7FFF;}
a.xhx{ text-decoration:underline}
(這個(gè)是代下劃線的,假如你的這個(gè)鏈接樣式,在鼠標(biāo)沒(méi)有移上去時(shí)就有下劃線時(shí),就加上這個(gè).
因?yàn)閏lass="(這個(gè)里可以用多個(gè)樣式)"
a.gray{color:#656565;}
a.blue{color:#2C7FFF;}
a.xhx{ text-decoration:underline}
(這個(gè)是代下劃線的,假如你的這個(gè)鏈接樣式,在鼠標(biāo)沒(méi)有移上去時(shí)就有下劃線時(shí),就加上這個(gè).
因?yàn)閏lass="(這個(gè)里可以用多個(gè)樣式)"
例如:<a class="red xhx" herf="#">您好</a>
這個(gè)樣式就是紅色的代下劃線的.假如不加xhx那就是紅色的不代下劃線樣式,只有鼠標(biāo)移上去之后才會(huì)出下劃線!
分開(kāi)寫,這樣可以套用多個(gè)文字樣式,這樣重復(fù)性少很多!
下面這個(gè)是圖片鏈接樣式
示例代碼 [m.dounai2.com]
img{vertical-align:middle; border:none;}
(寫上這個(gè)圖片會(huì)默認(rèn)的在文字中間,要不然圖片和文字會(huì)對(duì)不齊)
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;}
(寫上這個(gè)圖片會(huì)默認(rèn)的在文字中間,要不然圖片和文字會(huì)對(duì)不齊)
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;}
比如你的圖片大小比較多,你可以象我這樣寫,把圖片大小的樣式寫義出來(lái),然后在用到的時(shí)候直接用就可以
我定義這個(gè)是:圖片代邊框,而且邊框里面與圖片之間有一象索的距離.當(dāng)鼠標(biāo)移上去邊框變顏色
示例代碼 [m.dounai2.com]
a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}
例如:這個(gè),為什么后面有個(gè)(img.img20) ,這個(gè)是不代鏈接的,在圖片后加上這個(gè)樣式,圖片上就會(huì)有邊框而且不代鏈接a.img20 img,這個(gè)是給圖片代鏈接用的<a class="img20">圖片</a>這樣圖片就會(huì)代鏈接
還有就是你網(wǎng)站里經(jīng)常用到的框架比較多的把它寫出來(lái),寫好后下邊要做的工作就是把你寫的這些樣式,
另做一個(gè)html頁(yè)面,把你這些樣式都在html頁(yè)面里做出來(lái),分好欄目!
例如:文字樣式 文字鏈接樣式 圖片樣式 框架樣式 常用樣式
都做好后,當(dāng)你瀏覽時(shí),頁(yè)面顯示的效果就是你寫的樣式的效果.這些工作做完后你就可以給你的網(wǎng)站進(jìn)行修理了!
當(dāng)你需要用到共有里的樣式時(shí),你就打開(kāi)那個(gè)html頁(yè)面,找相對(duì)應(yīng)的那個(gè)樣式!直接拿過(guò)去套用就可以了,不用再去css里找了!
這樣方便!而且還能直接看到效果~
/所屬分類:Div+CSS教程/更新時(shí)間:2008-06-05
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- web標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色解決方法
- DivCSS:并非所有內(nèi)容都必須要div做“容器”
- CSS二列寬度自適應(yīng)
- Web Developer插件 Miscellaneous工具教程
- CSS下拉及多級(jí)彈出式菜單
- Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之三布局深入
- Div CSS三列布局最先顯示中列的方法
- 如何實(shí)現(xiàn)超鏈接類似按鈕陷下的效果?
- DIVCSS布局中如何組織樣式表以便于簡(jiǎn)化、維護(hù)
- DivCSS教程:letter-spacing與word-spacing屬性詳解
猜你也喜歡看這些
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁(yè)效果的實(shí)現(xiàn)
- CSS實(shí)例:用fieldset、legend實(shí)現(xiàn)文字寫在邊線上的效果
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格
- CSS布局實(shí)例:僅一張圖片實(shí)現(xiàn)圓角!
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- DIV CSS JS仿kijiji導(dǎo)航條
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- DOV CSS表單:超炫的單選框與復(fù)選框效果!-Adam
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):CSS框架思維雛形與CSS文件精簡(jiǎn)
- 教程說(shuō)明:
Div+CSS教程-CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):CSS框架思維雛形與CSS文件精簡(jiǎn)。