e股脑电脑教程网
  • 首 页
  • 操作系统
  • 应用软件
  • 下载工具
  • 影音视频
  • 办公软件
  • 媒体制作
  • 网站建设
  • 平面设计
  • 数据库
  • 程序开发
  • 视频教程
编辑推荐: | 文章搜索:
您现在的位置: e股脑 >> 网站建设 >> Html·Css教程 >> 利用CSS,链接下划线也玩自定义 >> 教程正文
 
教程搜索
 
 
相关教程
  • 五彩缤纷建网页(4)背景与字体的搭配
  • 五彩缤纷建网页(3)色彩的象征
  • 精通 CSS 滤镜(四)
  • 精通 CSS 滤镜(三)
  • XHTML代码规范
  • 精通 CSS 滤镜(一)
  • 精通 CSS 滤镜(二)
  • CSS入门
  • 网站首页head区代码规范
  • CSS2盒模型的3D示意图
  • 增强网站的可访问性
  • 利用CSS,链接下划线也玩自定义
  • 网页留白的艺术
  • 网页色彩搭配的内涵
  • 巧用CSS制作树状目录
  • 巧用CSS的Border属性制作特效菜单
 
 

图文教程


  • Windows抢了谁的饭碗 非主流操作系统To

  • 地球还是火星 平常心看“非主流”

  • 综合运用Office 2007批量制作奖状

  • 没有系统盘如何才能修复受损系统?

  • 巧妙运用Excel中边界的附加功能!
 
 
赞 助 商
 
 
利用CSS,链接下划线也玩自定义
  • 来源:e股脑
  • 点击次数:
  • 更新时间:2007-8-9

padding-bottom : length


取值:

length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。

说明:

检索或设置对象底边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。

在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 paddingBottom 。

-------------------------------------------------

因为下划线图形是定位于链接元素的底部,所以我们需要保证链接不能横跨多行(如果他们被允许跨越多行,那么只有最低的一行链接文本显示自定义下划线)。我们将使用CSS的white-space属性禁止链接文本换行。

a { white-space: nowrap; }

-------------------------------------------------

[补充]

语法:

white-space : normal | pre | nowrap

取值:

normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象

nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明:

设置或检索对象内空格字符的处理方式。

空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体   来添加空格,用 br 元素来添加换行。

此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace 。

-------------------------------------------------

链接元素的所有CSS属性可以合并为:

a {

text-decoration: none;

background: url(underline.gif) repeat-x 100% 100%;

padding-bottom: 4px;

white-space: nowrap;

}

如果你想自定义下划线的效果只在鼠标滑过链接时出现,只需设置CSS背景属性为:hover伪类,取代直接设置于链接元素上的样式即可。

a {

text-decoration: none;

padding-bottom: 4px;

white-space: nowrap;

}

a:hover {

background: url(underline.gif) repeat-x 100% 100%;

}

示例


上一页  1 2 
  • 上一篇教程: 网页留白的艺术
  • 下一篇教程: 增强网站的可访问性
  •  

    关于本站 | 广告联系 | 版权声明 | 使用帮助

    Copyright © 2004-2008 www.egunao.com All rights reserved.