- 相關(guān)推薦
css使標題右側區塊更多教程
一般我們都會(huì )把“更多”這個(gè)鏈接放在H標簽中，然后用到相對定位來(lái)實(shí)現�？梢允褂秘搈argin來(lái)完成這個(gè)效果，而且更加簡(jiǎn)單。另外，針對于語(yǔ)義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個(gè)良好的閱讀形式而不
標題右側“更多”的實(shí)現
曾經(jīng)做上圖所示的效果,會(huì )使用到position來(lái)相對定位到h2標簽的右側.這樣的做法,代碼確實(shí)會(huì )多好幾行. 其實(shí)可以用個(gè)笨一點(diǎn)的辦法來(lái)實(shí)現的：
譬如html代碼如下：
< h2>< a h ref="#" >標題< /a> < span>更多…< /span> < /h2>
使用potsition的css差不多如下：
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
這樣才能實(shí)現更多在右側.其實(shí)真的還可以更簡(jiǎn)單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實(shí)只是利用了margin-top 的負數來(lái)實(shí)現,因為默認的float會(huì )換行到h2標簽下面去，所以讓它自個(gè)跳上去。大致代碼就是如此了,是不是很簡(jiǎn)單?我說(shuō)很簡(jiǎn)單嘛！由于很簡(jiǎn)單,所以就不放出單獨的測試頁(yè)面了.
一般我們都會(huì )把“更多”這個(gè)鏈接放在H標簽中，然后用到相對定位來(lái)實(shí)現�？梢允褂秘搈argin來(lái)完成這個(gè)效果，而且更加簡(jiǎn)單。另外，針對于語(yǔ)義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個(gè)良好的閱讀形式而不至引起歧義。
演示：
運行代碼框
/* */
【css使標題右側區塊更多教程】相關(guān)文章：
css屬性定位教程07-23
CSS入門(mén)教程01-25
CSS閉合浮動(dòng)元素教程06-26
CSS選擇器教程06-05
CSS教程之盒模型10-17
設置excel表格標題教程11-29
CSS基礎教程之背景圖片07-31
CSS-層疊樣式表基礎教程08-10