首 页 ┆ 源码下载 ┆ IT学院 ┆ 字体下载 ┆ 模板下载 ┆ 源码发布 ┆ 广告合作 ┆ 网站地图
► 设为首页
► 加入收藏
► 联系我们
源码下载 >> ASP源码 | PHP源码 | ASP.net源码 | JSP源码 | CGI源码 | VC/C++源码 | VB源码 | Delphi源码 | Flash源码
文章学院 >> 网络编程 | 网页设计 | 图形图象 | 数据库 | 服务器 | 网络媒体 | 网络安全 | 操作系统 | 办公软件 | 软件开发 | 黑客知识
字体下载 >> 精制字体 | 非英字体 | 艺术字体 | 著名字体 | 哥特式 | 简单字体 | 手写体 | 节假日 | 图案字体 | 精度像素 | 中文字体
模板下载 >> 企业门户 | 数码网络 | 休闲娱乐 | 影视音乐 | 旅游名胜 | 文化艺术 | 电子商务 | 个性展示 | 登陆导航 | Flash模板
►►您当前的位置:源码园 → IT学院 → 网页设计 → Html/Css → 文章内容

CSS网页技巧:实现超级链接文字上划线和下划线

作者:佚名  来源:网上收集  发布时间:2007-6-20 2:31:17

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

text-decoration:
none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  删除线(贯穿线)
overline :  上划线

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

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

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

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

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

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

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

  你可以改变上面的运行代码作一些调试,多动手、多思考是学习CSS的好办法。:)


[] [返回上一页] [打 印]
  • 上一篇文章:DIV CSS网页技巧:网页布局中border断线现象
  • 下一篇文章:DVI CSS标准制作网页学习之学习DTD的元素

  • 相关文章:
  • 实例讲解深入学习CSS网页定位元素
  • DIV+CSS网页布局之边框的设置方法
  • CSS网页布局中HTML标签的语义
  • 基于XHTML的DIV+CSS网页制作布局技术
  • 整理:网页技术CSS网页布局的居中问题
  • CSS网页技巧:实现超级链接文字上划线和下划线
  • DIV CSS网页技巧:网页布局中border断线现象
  • DIV CSS网页布局技巧:background-color奇怪问题
  • DIV CSS网页布局中对段落进行排版的方法
  • [图文]DIV CSS网页布局实例:自定义标签布局页面
  • DIV CSS网页布局规范的对CSS的类及id命名
  • DIV CSS网页制作之不规则文字排版的CSS样式
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 源码发布
Copyright © 2003-2009 Ymyasp.Com. All Rights Reserved .
备案序号:粤ICP备07029071号