CSS實(shí)例教程：網(wǎng)頁(yè)區(qū)塊中標(biāo)題右側(cè)更多

2024-07-11 08:44:31

字體：大中小

供稿：網(wǎng)友

一般我們都會(huì)把“更多”這個(gè)鏈接放在H標(biāo)簽中，然后用到相對(duì)定位來(lái)實(shí)現(xiàn)?？梢允褂秘?fù)margin來(lái)完成這個(gè)效果，而且更加簡(jiǎn)單。另外，針對(duì)于語(yǔ)義方面，我稍作修改，一般我們都是將鏈接套在H標(biāo)簽中，我將之獨(dú)立到外部，這樣既便在禁用CSS后，還是能保持一個(gè)良好的閱讀形式而不
標(biāo)題右側(cè)“更多”的實(shí)現(xiàn)

曾經(jīng)做上圖所示的效果,會(huì)使用到position來(lái)相對(duì)定位到h2標(biāo)簽的右側(cè).這樣的做法,代碼確實(shí)會(huì)多好幾行. 其實(shí)可以用個(gè)笨一點(diǎn)的辦法來(lái)實(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í)真的還可以更簡(jiǎn)單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實(shí)只是利用了margin-top 的負(fù)數(shù)來(lái)實(shí)現(xiàn),因?yàn)槟J(rèn)的float會(huì)換行到h2標(biāo)簽下面去，所以讓它自個(gè)跳上去。大致代碼就是如此了,是不是很簡(jiǎn)單?我說(shuō)很簡(jiǎn)單嘛！由于很簡(jiǎn)單,所以就不放出單獨(dú)的測(cè)試頁(yè)面了.
一般我們都會(huì)把“更多”這個(gè)鏈接放在H標(biāo)簽中，然后用到相對(duì)定位來(lái)實(shí)現(xiàn)?？梢允褂秘?fù)margin來(lái)完成這個(gè)效果，而且更加簡(jiǎn)單。另外，針對(duì)于語(yǔ)義方面，我稍作修改，一般我們都是將鏈接套在H標(biāo)簽中，我將之獨(dú)立到外部，這樣既便在禁用CSS后，還是能保持一個(gè)良好的閱讀形式而不至引起歧義。
演示：
運(yùn)行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="gb2312" /><title>關(guān)于標(biāo)題中的“更多”</title></head><body><style  type ="text/css">/*  <![CDATA[  */h2,ul,li{margin:0;padding:0;font-size:14px;}.test{width:300px;height:200px;border:1px solid #CCC;}.test h2{height:21px;line-height:21px;}.test .more{float:right;margin-top:-15px;font-size:12px;}/*  ]]>  */</style><div class="test"><h2>Raino的H2測(cè)試</h2><a href="" _fcksavedurl="""" title="點(diǎn)擊查看更多詳情" class="more"> 更多</a><ul><li>列表1~~~~</li><li>列表2~~~~</li><li>列表3~~~~</li><li>列表4~~~~</li><li>列表5~~~~</li></ul></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

上一篇：建議網(wǎng)頁(yè)設(shè)計(jì)師用CSS制作網(wǎng)站導(dǎo)航菜單

下一篇：簡(jiǎn)單學(xué)習(xí)css組合與CSS嵌套的寫(xiě)法