快捷導(dǎo)航

淘寶段正淳的css筆記大全第2/4頁

更新時間：2007年10月25日 11:12:38 作者：

圓角的做法.

為了這個圓角,前段開發(fā)們付出的努力是在是太多了.又要考慮http連接數(shù),又要考慮css與html的代碼量與語義.
貼出的是最近考慮替換現(xiàn)有圓角做法的方案,可能還有許多未考慮的狀況.但是大體的編寫方式便是如下.
好處是便于維護,只有一個圖片.還可以某種程度上的任意縮放.缺點是多了無意義的html代碼.

css：

復(fù)制代碼代碼如下:

.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;/*臨時定的寬度*/  
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這個標簽在firefox下會有左邊有1px空隙的bug,很討厭.能想到的簡單的方法只有-1px的margin了.

css：

復(fù)制代碼代碼如下:

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>表格標題< /caption>  
< tr>  
< th>標題< /th>  
< th>標題< /th>  
< th>標題< /th>  
< th>標題< /th>  
< /tr>  
< tr>  
< td> 內(nèi)容< /td>  
< td> 內(nèi)容< /td>  
< td> 內(nèi)容< /td>  
< td> 內(nèi)容< /td>  
< /tr>  
< /table> 

需要正視的二個標簽

acronym這個標簽用來解釋名詞很爽,但是用得太少.(我也一直想用來著,所以記下了.)
css：
acronym{cursor:help}
html：
< acronym title="段正淳又是金庸筆下一個十分奇特的人物。他奇特在到處留情，情人極多，見一個愛一個，而又絕不是徒然風(fēng)流薄幸，當(dāng)他是單獨對著一個情人的時候，他真是真心真意愛這個情人的，只好說這個人的感情特別豐富，別無其他解釋。" >文字< /acronym>
ins這個標簽忘記是在哪個網(wǎng)站上看到過用來在h2里顯示更多的鏈接,后來查了書,大家都覺得有點欠妥,有點爭議.
css：
還未寫入css組件…欠奉上了
html：
< h2>標題< ins>< a x >更多>>< /a>< /ins>< /h2>