CSS實例教程：網頁區塊中標題右側更多

2024-07-11 08:24:14

字體：大中小

來源：轉載

供稿：網友

一般我們都會把“更多”這個鏈接放在H標簽中，然后用到相對定位來實現。可以使用負margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不
標題右側“更多”的實現

曾經做上圖所示的效果,會使用到position來相對定位到h2標簽的右側.這樣的做法,代碼確實會多好幾行. 其實可以用個笨一點的辦法來實現的：
譬如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;
}
這樣才能實現更多在右側.其實真的還可以更簡單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實只是利用了margin-top 的負數來實現,因為默認的float會換行到h2標簽下面去，所以讓它自個跳上去。大致代碼就是如此了,是不是很簡單?我說很簡單嘛！由于很簡單,所以就不放出單獨的測試頁面了.
一般我們都會把“更多”這個鏈接放在H標簽中，然后用到相對定位來實現。可以使用負margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不至引起歧義。
演示：
運行代碼框

<!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>關于標題中的“更多”</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測試</h2><a href="" _fcksavedurl="""" title="點擊查看更多詳情" class="more"> 更多</a><ul><li>列表1~~~~</li><li>列表2~~~~</li><li>列表3~~~~</li><li>列表4~~~~</li><li>列表5~~~~</li></ul></div></body></html>            </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">
<!--分享 -->
<div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1338670.html'>CSS學習之類目之間豎線的練習實例</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1338672.html'>吸引用戶點擊的按鈕設計以及網頁按鈕實例</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>
<!--分享 -->
</div>

<div   id="iwvjtn8m0"   class="pinglun">
<!-- 評論 -->
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title">
<tr>
<td><strong>發表評論</strong></td>
<td align="right"><a href="/e/pl/?classid=215&id=1338671">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1338671&down=2"></script></span>條評論</a></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="56%" align="left">用戶名:
<input name="username" type="text" class="inputText" id="username" value="" size="16" /></td>
<td width="44%" align="left">密碼:
<input name="password" type="password" class="inputText" id="password" value="" size="16" /></td>
</tr>
<tr>
<td align="left">驗證碼:
<input name="key" type="text" class="inputText" size="10" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td>
<td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" />
匿名發表</td>
</tr>
</table>
<textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流