不管字体的大小如何,为了保证我们的图像都出现在链接文本的下面,我们将要使用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 。
-------------------------------------------------
更多的利用CSS,链接下划线也玩自定义请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期:2007-8-31