今天小编跟大家讲解下有关CSS实例教程：网页区块中标题右侧更多 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实例教程：网页区块中标题右侧更多 的相关资料，希望小伙伴们看了有所帮助。
一般我们都会把“更多”这个链接放在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">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> [Ctrl A 全部选择 提示：你可先修改部分代码 再按运行]来源：爱蒂网
