CSS实例教程:网页区块中标题右侧更多

呼啦呼啦天

呼啦呼啦天

2016-02-19 23:39

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐CSS实例教程:网页区块中标题右侧更多,希望大家看完后也有个好心情,快快行动吧!

标题右侧更多的实现

曾经做上图所示的效果,会使用到position来相对定位到h2标签的右侧.这样的做法,代码确实会多好几行. 其实可以用个笨一点的办法来实现的:

譬如html代码如下:

h2 a h ref="#" 标题 /a span更多 /span /h2

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

使用potsition的css差不多如下:

h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}

这样才能实现更多在右侧.其实真的还可以更简单:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}

其实只是利用了margin-top 的负数来实现,因为默认的float会换行到h2标签下面去,所以让它自个跳上去。大致代码就是如此了,是不是很简单?我说很简单嘛!由于很简单,所以就不放出单独的测试页面了.

一般我们都会把更多这个链接放在H标签中,然后用到相对定位来实现。可以使用负margin来完成这个效果,而且更加简单。另外,针对于语义方面,我稍作修改,一般我们都是将链接套在H标签中,我将之独立到外部,这样既便在禁用CSS后,还是能保持一个良好的阅读形式而不至引起歧义。

演示

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

展开更多 50%)
分享

猜你喜欢

CSS实例教程:网页区块中标题右侧更多

Web开发
CSS实例教程:网页区块中标题右侧更多

CSS网页制作布局实例教程

Web开发
CSS网页制作布局实例教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS实例教程:CSS Hack

Web开发
CSS实例教程:CSS Hack

CSS实例教程:制作漂亮的网页表单

Web开发
CSS实例教程:制作漂亮的网页表单

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS实例教程:制作网页2级导航

Web开发
CSS实例教程:制作网页2级导航

CSS实例教程:reflow

Web开发
CSS实例教程:reflow

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

css教程:css和document

css教程:css和document

IE7与web标准设计(3)

IE7与web标准设计(3)
下拉加载更多内容 ↓