1. 語(yǔ)義化結(jié)構(gòu)
先看一段頁(yè)面代碼：
<div class="rightcl_part toggle_box" id="help_guide_3">
<div class="stretch ac_toggler">我的勛章<span title="點(diǎn)擊收起"></span></div>
<div class="medal clearfix toggle_body">勛章內(nèi)容</div>
<div class="paddingleft toggle_body">查看更多</div>
</div>
繁多的“class”、“id
”等標(biāo)簽令頁(yè)面越來(lái)越臃腫，
網(wǎng)站制作者想爆頭腦取名，瀏覽者不易閱讀
，無(wú)從下手
。借助Html5更語(yǔ)義化的結(jié)構(gòu)標(biāo)簽，我們
可以如下優(yōu)化：
<section> <header>我的勛章<span title="點(diǎn)擊收起"></span></header>
<article>勛章內(nèi)容</article>
<footer >查看更多</footer>
</section>
當(dāng)然在Html5時(shí)代想完全和“class”、“id”說(shuō)拜拜是不可能的，當(dāng)頁(yè)面需要同時(shí)出現(xiàn)多個(gè)“section”、“header”等時(shí) ，一種方法是分別定義不同的“class
”或“id
” ，另一方法就是借助更強(qiáng)大的css
選擇器了，這里列舉幾個(gè)“選擇器”樣例：body nav+section {} 定位最外層的section 元素section>section {} 定位下一個(gè)section 元素
section section article {} 定位article 元素
2. 自由透明度
在Css3時(shí)代網(wǎng)站建設(shè)者們終于可以?huà)仐夐L(zhǎng)長(zhǎng)的透明濾鏡 ，在同一個(gè)樣式里分別為“背景”
、“文字”、“邊框”定義不同的透明度了
，css
樣式如下：.box {
color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
height:100px;
width:100px;
}
但發(fā)現(xiàn)奇怪的一點(diǎn)邊框的透明度會(huì)與背景的透明度相疊加 ，具體更好的分離透明度方法還在嘗試中。
3. 盡情圓角吧
昔日當(dāng)碰到應(yīng)對(duì)不同寬度的圓角結(jié)構(gòu) ，不得不分兩段或三段來(lái)處理
，現(xiàn)在也可以通過(guò)一句樣式來(lái)完成了！圓角樣式：
border-radius:10px; 可以直接加入上面的樣式測(cè)試效果：
.box { color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
border-radius:10px; /*圓角率*/
height:100px;
width:100px;
}
也可分別定義四個(gè)角的圓角率 ，樣式如下：
border-top-right-radius:10px; border-bottom-right-radius:10px;border-bottom-left-radius:10px; border-top-left-radius:10px;
其實(shí)Mozilla(Firefox) 、Webkit(Safari
和Chrome)
內(nèi)核也早已有自己的圓角樣式，具體如下表：CSS3 | Mozilla | WebKit |
border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
border-radius | -moz-border-radius | -webkit-border-radius |
4.“文字” 、“盒子”陰影
擯棄長(zhǎng)長(zhǎng)濾鏡樣式的快感 ，也只有Css3
時(shí)代才能感受得到，期待早日到來(lái)。文字陰影：text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
盒子陰影：box-shadow: 0 0 10px rgb(0,0,0);
可繼續(xù)加入上面的樣式測(cè)試效果：
.box {
color: rgba(255,255,255,0.9); /*文字透明度*/
background-color: rgba(0,0,0,0.2); /*背景透明度*/
border:3px solid rgba(0,0,0,0.5); /*邊框透明度*/
border-radius:10px; /*圓角率*/
text-shadow: 2px 2px 1px rgba(0,0,0,0.5); /*文字陰影*/
box-shadow: 0 0 10px rgb(0,0,0); /*盒子陰影*/
height:100px;
width:100px;
}
甚至看到網(wǎng)上有更瘋狂的做法 ，幾個(gè)陰影同時(shí)添加：
text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);
其中盒子陰影濾鏡對(duì)瀏覽器版本要求比較高 ，若使用較低版本的FireFox
和Chrome
可使用原生樣式測(cè)試效果：
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
5. 同一盒子多背景圖
Web開(kāi)發(fā)時(shí)，添加多個(gè)背景圖只需在原來(lái)的基礎(chǔ)上 ，中間以逗號(hào)隔開(kāi)即可
，樣式如下：
background-image: url(testBg1.gif) , url(testBg2.gif);
background-repeat: no-repeat;
background-position: bottom left , top right;
網(wǎng)站建設(shè) 網(wǎng)站制作 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站建設(shè)公司 沈陽(yáng)網(wǎng)站建設(shè) 沈陽(yáng)網(wǎng)頁(yè)設(shè)計(jì) 高端網(wǎng)站設(shè)計(jì) 沈陽(yáng)網(wǎng)站制作公司 高端網(wǎng)站建設(shè) 沈陽(yáng)網(wǎng)絡(luò)公司 沈陽(yáng)網(wǎng)站制作
沈陽(yáng)易勢(shì)科技有限公司 © 2006-2013 , All rights reserved. 遼B2-20150173-8
