用CSS实现链接的虚线下划线效果

修改您的样式表，找下边这段（一般都在开头）
a {
color:#3399FF;
font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/
text-decoration:none; /*下划线效果：无下划线*/
}

a:hover {
color:#4499EE;
text-decoration:none; /*下划线效果：无下划线*/
border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/
}

　　 a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。
一些CSS定义虚线实例代码

table{width:200px;height:100px;}
.table1{border:1px solid #6E6B85}
.table2{border:1px solid #000 dotted}
.table3{border-top:1px solid #f00 dotted;border-left:1px solid #f00 dotted;}
.table3 td{border-right:1px solid #f00 dotted;border-bottom:1px solid #f00 dotted;}
.table4 td{border:1px solid #f00 dotted;}

TD一 TD二
TD一 TD二
TD一 TD二
TD一 TD二

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

新建网页 2

　haha haha
haha haha

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

TD

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

TD

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用CSS实现链接的虚线下划线效果

    修改您的样式表,找下边这段(一般都在开头) a { color:#3399FF; font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/ text-decoration:none; /*下划线效果:无下划线*/ } a:hover { color:#4499EE; text-decoration:none; /*下划线效果:无下划线*/ border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/ } a{}控制连接的效

  • CSS小例子(只显示下划线的文本框，像文字一样的按钮)

    只显示下划线的文本框,像文字一样的按钮 body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-left:0px; border-right:0p

  • 利用CSS，链接下划线也玩自定义

    原文链接:CSS Design: Custom Underlines 由 A List Apart 杂志及作者授权翻译.(Translated with the permission of A List Apart Magazine and the author[s].) 说明:文章中"[补充]"内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容. 虽然网页设计师通常有大量的方法控制文档如何呈现,但是基本的CSS不能为页面中链接下方的下划线样式提供很多选

  • CSS：自定多姿多彩的网页链接下划线

    CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩. 一.基本原理 首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后的网页背景,可以使用透明的.gif图形. 其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }. 自定义链接下划线示例 第三,为显示出

  • IOS 开发之UILabel 或者 UIButton加下划线链接

    IOS 开发之UILabel 或者 UIButton加下划线链接

    IOS 开发之UILabel 或者 UIButton加下划线链接          本文主要介绍了IOS中 UILable及UIButton的带下划线链接的实现方法及附有源码下载,大家开发IOS 应用有需要的可以参考下: 方法一: NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"查看所有中奖记录"]; NSRange strRange = {0,[str lengt

  • jquery鼠标悬停导航下划线滑出效果

    本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} .

  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

  • 关于超链接的下划线 使用说明

    关于超链接的下划线 使用说明

    关于超链接中的下划线这个及细节的问题,想必大家都有过讨论和思考,大家都知道,把握一个原则即可:"让使用者清楚的区分超链接文本和其他文本形式,并潜意识知道可以点击.":但对于是否可以潜意识知道可以点击,还是有争议的,不同的人,不同的环境会有不同的见解. 不妨分几个场景讨论一下: 1. 导航区域,潜意识我会去点击. 即便有下划线也是个"古老形式"的摆设,所以一般没有下划线:好的设计不仅满足点击,还满足视觉的层级关系. 2. 整页全是链接,下划线成了可有可无的表现. 象新

  • 易语言将日期框的字体加粗倾斜添加下划线等修改字体的方法

    易语言将日期框的字体加粗倾斜添加下划线等修改字体的方法

    字体属性 数据类型:字体:设置对象的字体属性. 语法: 对象.字体. 角度 =  整数型 对象.字体. 加粗 =  逻辑型 对象.字体. 倾斜 =  逻辑型 对象.字体. 删除线 =  逻辑型 对象.字体. 下划线 =  逻辑型 对象.字体. 字体大小 =  整数型 对象.字体. 字体名称 =  文本型 应用对象:日期框等许多组件 例程 说明: 将日期框的字体的加粗属性设置为"真". 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价

  • vue router-link下划线和颜色问题及解决

    vue router-link下划线和颜色问题及解决

    目录 router-link下划线和颜色问题 解决方法 "router-link"各种属性解释 1.":to" 属性 2."replace" 属性 3."tag" 属性 4."active-class" 属性 5."exact" 属性 router-link下划线和颜色问题 使用router-link链接的文字,默认为蓝色并带下划线,很不好看. 解决方法 在<style scope

随机推荐