论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

链接文字上划线、下划线同时出现如何实现?

文章类别:div+css布局 | 发表日期:2008-9-26 11:13:23

  
  链接文字的上划线、下划线、删除线(贯穿线)、闪烁等可以通过CSS的text-decoration属性来实现。其属性值与效果相对应的关系如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
text-decoration:
none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  删除线(贯穿线)
overline :  上划线

  更具体的text-decoration介绍请参考这里。

  学习了此属性的一些用法,我们不难看出,链接文字上划线、下划线同时出现可以通过:text-decoration: underline overline,即可以实现了。或许你有疑问,这两个属性值可以同时了现吗?答案是肯定的,是可以实现的,我们看下面的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  看到效果了吧,虽然我们实现了链接文字上划线、下划线同时出现。但还有很多细节我们并不满足。一、线型单一,只是实线;二、颜色不可更改(默认的线条颜色为链接文字的颜色);三、距离文字的边距不可控制,感觉离文字太近了。

  我们想到了更好的办法,可以去除text-decoration属性,给链接加上、下边框线,同样可以让上划线、下划线同时出现。我们看下面的运行效果。

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  在默认情况下,块级元素的默认宽度是父级元素的宽度,并且占据一整行的页面空间。所以我们看上面的效果,就出现了一整行都给链接所占据,我们可以作一些调整,设置链接元素为左浮动,并设置左边距为30px。我们来看看效果。

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  你可以改变上面的运行代码作一些调试,多动手、多思考是学习CSS的好办法。:)
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058