自主划线:链接文字上划线、下划线同时出现如何实现？来源: 发布时间:星期四, 2009年2月12日 浏览:65次 评论:0
链接文字  上划线、下划线、删除线(贯穿线)、闪烁等可以通过CSStext-decoration属性来实现 其属性值和效果相对应关系如下:text-decoration: none: 无装饰 blink: 闪烁 underline: 下划线 line-through: 删除线(贯穿线) overline: 上划线 更详细 text-decoration介绍请参考这里学习了此属性  些使用方法 我们不难看出链接文字上划线、下划线同时出现可以通过:text-decoration:underlineoverline即可以实现了或许你有疑问这两个属性值可以同时了现吗？答案是肯定是可以实现我们看下面运行效果:=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ] 看到效果了吧 虽然我们实现了链接文字上划线、下划线同时出现但还有很多细节我们并不满意、线型单只是实线； 2、颜色不可更改(默认线条颜色为链接文字颜色)； 3、距离文字边距不可控制感觉离文字太近了我们想到了更好 办法可以去除text-decoration属性给链接加上、下边框线同样可以让上划线、下划线同时出现我们看下面运行效果=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ] 在默认情况下 块级元素默认宽度是父级元素宽度并且占据整行页面空间所以我们看上面效果就出现了整行都给链接所占据我们可以作些调整设置链接元素为左浮动并设置左边距为30px我们来看看效果=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ] 你可以改变上面 运行代码作些调试多动手、多研究是学习CSS好办法:)0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
