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> <header>我的勛章<span title="點(diǎn)擊收起"></span></header> <article>勛章內(nèi)容</article> <footer >查看更多</footer> </section> section>section {} 定位下一個(gè)section 元素 section section article {} 定位article 元素 2. 自由透明度 在Css3時(shí)代網(wǎng)站建設(shè)者們終于可以?huà)仐夐L(zhǎng)長(zhǎng)的透明濾鏡 .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) 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-bottom-left-radius:10px; border-top-left-radius:10px; 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)濾鏡樣式的快感 文字陰影：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)上有更瘋狂的做法 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ì)瀏覽器版本要求比較高 -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ǔ)上 background-repeat: no-repeat; background-position: bottom left , top right;
繁多的“class”
<section>
當(dāng)然在Html5時(shí)代想完全和“class”、“id”說(shuō)拜拜是不可能的，當(dāng)頁(yè)面需要同時(shí)出現(xiàn)多個(gè)“section”、“header”等時(shí)
body nav+section {} 定位最外層的section 元素
.box {
border-top-right-radius:10px; border-bottom-right-radius:10px;
其實(shí)Mozilla(Firefox)
background-image: url(testBg1.gif) , url(testBg2.gif);
