天蠶在你身邊
不方便打電話(huà)?讓天蠶聯(lián)絡(luò)你
天蠶在你身邊
不方便打電話(huà)?讓天蠶聯(lián)絡(luò)你
Css中的三個(gè)應(yīng)用小技巧
1、應(yīng)用counter()在列表中自動(dòng)添加序列號(hào)。這個(gè)也是在css2.1中已經(jīng)支持了,它可以方便為頁(yè)面標(biāo)題、區(qū)塊和各種連續(xù)出現(xiàn)的內(nèi)容添加序號(hào)。這樣就不必限制在<ol>顯示效果了。
這之需在:before偽類(lèi)里的content屬性加入counter(),我們看看下面的例子:
Body{
Counter-reset:heading;
}
H4:before{
Counter-increment:heading;
Content:”heading #” counter(heading)”.”;
}
如果大家像看更加強(qiáng)大的例子,重慶網(wǎng)站建設(shè)建議大家去網(wǎng)上收索一下,能夠得到更多例子。
2、 在css中應(yīng)用attr()顯示HTML屬性值。
Attr()功能在css2.1標(biāo)準(zhǔn)中就出現(xiàn)了,現(xiàn)在運(yùn)用的比較多,用此顯示HTML標(biāo)簽的屬性,省去了以往javascript處理的過(guò)程。
應(yīng)用這個(gè)功能的用到三種元素,:before/:after偽類(lèi)樣式,.content屬性,下面我們看看應(yīng)用例子
H3:before{
Content:attr(data-prefix) “”;
}
<h3 data-prefix=”custom prefix”>這是一個(gè)標(biāo)題</h3>
Attr()的相關(guān)功能還很多,大家可以去了解下。
3、使用calc()做算術(shù)。這個(gè)函數(shù)可以執(zhí)行簡(jiǎn)單的計(jì)算,如加減乘除;免去了一些運(yùn)算js的代碼運(yùn)用。下面我們可以看一個(gè)例子:你想創(chuàng)建一個(gè)元素,使它的寬度占滿(mǎn)它的父元素,但還要留出一部分像素寬做其它用處:
.parent {
width: 100%;
border: solid black 1px;
position: relative;
}
.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
background-color: #ff8;
text-align: center;
}
運(yùn)用一些小技巧可以極大的減輕web開(kāi)發(fā)人員的一些重復(fù)工作。噢啦。
重慶網(wǎng)絡(luò)公司
地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8
郵編:400015
電話(huà):023-63612462
EMAIL:cnjl_net@163.com