网站首页站长博客下载中心域名交易站长论坛域名主机免费电邮免费域名中文排行排名查询站长书库书籍教程下载
设为首页
加入收藏
总编信箱
投稿或申请专栏请先 [登 陆]
学院首页 网络编程 网页设计 图形图象 数 据 库 服 务 器 网络媒体 网络安全 个人专栏 站长CLUB 业界新闻 信息公告
 当前位置:首页 >> 网页设计 >> Html/Css >> 正文
公告通知
返回上级列表
资料搜索
相关文章
利用CSS,链接下划线也玩自定义
[ 来源:太平洋电脑网 | 作者:无从考证 | 时间:2005-8-18 17:10:16 | 浏览:人次 ]
收藏到新浪ViVi 收藏到365KEY 收藏到我摘  字号选择〖    〗/ 双击滚屏 单击停止  

  不管字体的大小如何,为了保证我们的图像都出现在链接文本的下面,我们将要使用background-position(背景定位)属性定位图像至链接元素的底部。对于某些背景图形,例如箭头,对图像对齐元素的哪一边,你或许有自己的偏好。就我们这个例子而言,我们将背景置于底部的右边:

a { background-position: 100% 100%; }

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

[补充]

语法:

  background-position : length || length
  background-position : position || position

取值:

  length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
  position  : top | center | bottom | left | center | right

说明:

  设置或检索对象的背景图像位置。必须先指定 background-image 属性。
  该属性定位不受对象的补丁属性( padding )设置影响。
  默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
  如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
  如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
  对应的脚本特性为 backgroundPosition 。

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

  为了给链接文本正文的自定义下划线图形创建空间,我们将增加一些padding(填充)。依赖于所使用字体的大小,下划线图形的精确位置将会相对于链接文本的基线发生改变。建议你从bottom-padding开始,与下划线图形高度同高,调整以适合于你的需要:

a { padding-bottom: 4px; }

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

[补充]

语法:

  padding-bottom : length

取值:

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

说明:

  检索或设置对象底边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
  在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 paddingBottom 。

本新闻共4页,当前在第3页  1  2  3  4  


[发送给好友]  [打印本页]  [关闭窗口]  [返回顶部]   转载请注明来源:http://edu.chinaz.com   
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
栏目编辑: 设计风 责任编辑: 龙浪
原始作者: 无从考证 录入时间: 2005-8-18 17:10:16
信息来源: 太平洋电脑网 投稿信箱: Edu#chinaz.com
设为首页 - 加入收藏 - 关于我们 - 广告服务 - 版权申明 - 友情链接 - 联系方式 - 总编信箱 - 会员投稿