- 相關(guān)推薦
css使標(biāo)題右側(cè)區(qū)塊更多教程
一般我們都會把“更多”這個鏈接放在H標(biāo)簽中，然后用到相對定位來實(shí)現(xiàn)�？梢允褂秘�(fù)margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標(biāo)簽中，我將之獨(dú)立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不
標(biāo)題右側(cè)“更多”的實(shí)現(xiàn)
曾經(jīng)做上圖所示的效果,會使用到position來相對定位到h2標(biāo)簽的右側(cè).這樣的做法,代碼確實(shí)會多好幾行. 其實(shí)可以用個笨一點(diǎn)的辦法來實(shí)現(xiàn)的：
譬如html代碼如下：
< h2>< a h ref="#" >標(biāo)題< /a> < span>更多…< /span> < /h2>
使用potsition的css差不多如下：
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
這樣才能實(shí)現(xiàn)更多在右側(cè).其實(shí)真的還可以更簡單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實(shí)只是利用了margin-top 的負(fù)數(shù)來實(shí)現(xiàn),因?yàn)槟J(rèn)的float會換行到h2標(biāo)簽下面去，所以讓它自個跳上去。大致代碼就是如此了,是不是很簡單?我說很簡單嘛！由于很簡單,所以就不放出單獨(dú)的測試頁面了.
一般我們都會把“更多”這個鏈接放在H標(biāo)簽中，然后用到相對定位來實(shí)現(xiàn)。可以使用負(fù)margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標(biāo)簽中，我將之獨(dú)立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不至引起歧義。
演示：
運(yùn)行代碼框
/* */
【css使標(biāo)題右側(cè)區(qū)塊更多教程】相關(guān)文章：
css教程07-22
css經(jīng)典教程07-18
（優(yōu)）css教程07-21
（必備）css教程07-25
【熱】css教程07-24
css經(jīng)典教程[集合]07-30
css教程13篇[必備]07-20
css教程精品(13篇)07-23