|
圓角的做法.
為了這個(gè)圓角,前段開(kāi)發(fā)們付出的努力是在是太多了.又要考慮http連接數(shù),又要考慮css與html的代碼量與語(yǔ)義.
貼出的是最近考慮替換現(xiàn)有圓角做法的方案,可能還有許多未考慮的狀況.但是大體的編寫(xiě)方式便是如下.
好處是便于維護(hù),只有一個(gè)圖片.還可以某種程度上的任意縮放.缺點(diǎn)是多了無(wú)意義的html代碼.
css：
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景圖片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*臨時(shí)定的寬度*/
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px;
}
html：
< div class="c">
< i>< i>< /i>< /i>
< p>
按鈕按鈕按鈕按鈕按鈕按鈕
按按按按按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕
< /p>
< b>< b>< /b>< /b>
< /div>
table的全局定義
caption這個(gè)標(biāo)簽在firefox下會(huì)有左邊有1px空隙的bug,很討厭.能想到的簡(jiǎn)單的方法只有-1px的margin了.
css：
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*邊框顏色*/
background:#c3d9ff;/*背景顏色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}
html：
< table>
< caption>表格標(biāo)題< /caption>
< tr>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< /tr>
< tr>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< /tr>
< /table>
需要正視的二個(gè)標(biāo)簽
- acronym這個(gè)標(biāo)簽用來(lái)解釋名詞很爽,但是用得太少.(我也一直想用來(lái)著,所以記下了.)
css：
acronym{cursor:help}
html：
< acronym title="段正淳又是金庸筆下一個(gè)十分奇特的人物。他奇特在到處留情，情人極多，見(jiàn)一個(gè)愛(ài)一個(gè)，而又絕不是徒然風(fēng)流薄幸，當(dāng)他是單獨(dú)對(duì)著一個(gè)情人的時(shí)候，他真是真心真意愛(ài)這個(gè)情人的，只好說(shuō)這個(gè)人的感情特別豐富，別無(wú)其他解釋。" >文字< /acronym>
- ins這個(gè)標(biāo)簽忘記是在哪個(gè)網(wǎng)站上看到過(guò)用來(lái)在h2里顯示更多的鏈接,后來(lái)查了書(shū),大家都覺(jué)得有點(diǎn)欠妥,有點(diǎn)爭(zhēng)議.
css：
還未寫(xiě)入css組件…欠奉上了
html：
< h2>標(biāo)題< ins>< a x mce_ >更多>>< /a>< /ins>< /h2>
出處：Taobao.com UI Team
責(zé)任編輯：moby
上一頁(yè) 段正淳的css筆記 [1] 下一頁(yè) 段正淳的css筆記 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 段正淳的css筆記 [2]
