`
edzhh
  • 浏览: 65666 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS-双下划线超链接样式

阅读更多
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好双下划线连接样式</title>

<STYLE type=text/css>

A.coolcss:link {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: 1px dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss:visited {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: 1px dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss:hover {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: 2px solid #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}

A.coolcss2:link {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: thin dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss2:visited {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: thin dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss2:hover {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: 2px solid #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}

A.coolcss3:link {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: medium dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss3:visited {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: medium dotted #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
A.coolcss3:hover {
        CURSOR: hand; COLOR: #ff6633; BORDER-BOTTOM: 2px solid #ff6633; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}


A:link {
        FONT-SIZE: 12pt; COLOR: #cccccc; LINE-HEIGHT: 20pt; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
A:hover {
        FONT-SIZE: 12pt; COLOR: #b8f400; LINE-HEIGHT: 20pt; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
A:active {
        FONT-SIZE: 12pt; COLOR: #cccccc; LINE-HEIGHT: 20pt; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
A:visited {
        FONT-SIZE: 12pt; COLOR: #cccccc; LINE-HEIGHT: 20pt; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}

</STYLE>
</head>
<body>
<p><a class="coolcss" target="_blank" href="#">双下划线连接样式===1px</a></p>
<p>&nbsp;</p>
<p><a class="coolcss2" target="_blank" href="#">多好看的样式===thin</a></p>
<p>&nbsp;</p>
<p><a class="coolcss3" target="_blank" href="#">只在IE下有效=====medium</a></p>
<p>&nbsp;</p>
<p><a class="coolcss" target="_blank" href="#">要是能在FF下也有效就更好了啦=1px</a></p>


</body>
</html>[/html]
分享到:
评论

相关推荐

    css通过伪类来设置超链接样式附示例

    css设置超链接样式是通过伪类来实现的,默认状态下,创建的超级链接的文字颜色为蓝色,并带有下划线,访问之后变为紫色,下面有个不错的示例,喜欢的朋友可以尝试操作下

    7款CSS3鼠标滑过超链接动画特效.zip

    7款CSS3鼠标滑过超链接动画特效是一款使用伪元素来制作超链接的下划线,并使用CSS3 animation来制作各种动画效果。

    CSS3自定义样式超链接按钮 鼠标滑过带动画特效

    解压密码:RJ4587 超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过...

    RTF转换成HTML的控件(.net)

    该组件可以将 RTF 转换成 HTML 3.2、HTML 4.01 和 XHTML 1.0 等格式,支持 CSS 样式。 开发人员在.Net桌面程序或web应用程序中都方便可以使用这个组件,仅需2行代码! 输出的 HTML/XHTML 格式完全符合W3C标准。...

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    7个jQuery+Dragdealer.js内容滚动条拖拽滑动解7款CSS3超链接下划线动画特效代码 7款CSS3制作美化的搜索框样式代码 7款非常漂亮的CSS3鼠标hover图片动画特效 7款酷炫HTML5+Canvas全屏网页背景动画特效18款

    精通CSS+DIV网页样式与布局视频教材

    精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...

    如何去掉超链接下划线用三个简单的实例来说明

    去掉超链接的下划线,需要用样式表CSS来控制,下面将举三个简单的实例来说明如何控制超链接的下划线,感兴趣的朋友可以参考下

    同一html页面中不同链接的不同样式的css代码

    超链接的样式有: a:link 链接未点击上去时候 a:visited 链接已经点击过的 a:hover 鼠标放在链接上未点击 a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态 大家都知道想要设置统一的...

    运用css中的伪类设计页面

    1)平时和访问过的链接都没有下划线并且显示为黑色字,设计样式上让每行的偶数链接显示绿色字并且没有下划线。 2)鼠标移动到链接上方时链接文字显示下划线和蓝色字,点击(按下)链接时链接文字显示下划线并且变为红色...

    作业-王者荣耀.zip

    2,图片放大效果:通过使用CSS样式和过渡效果,为首页中的图片添加一种放大的视觉效果。当鼠标悬停在图片上时,图片逐渐放大,增强用户的交互体验。 3,超链接变色后下划线:为页面上的超链接设置交互效果。当鼠标...

    turing-bistro:基本 HTML 和 CSS 练习

    你有两个限制: 您不能更改任何 HTML 标记你不能使用 JavaScript开始将容器居中从超链接中删除下划线当鼠标悬停在超链接上时更改超链接的样式以美元符号 ($) 为每个菜单价格添加前缀中间的使导航中的项目水平对齐像...

    css中使用ul li ul li ul li ul li 实现四层级联菜单

    复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//... &lt;head&gt; &lt;title&gt;&lt;/title&gt;...style type=”text/css”&gt;... /*–a标签的默认颜色为黑色–*/ text-decoration:none; /*–隐藏超链接的下划线–*/ } a:

    Div和CSS编写中对包含选择器和通配选择器的使用

    这个例子表示对“id="nav"”的元素里面的超链接应用该样式(超链接取消下划线),而其他网页元素的超链接不受影响。包含选择器是常用的选择器之一,它让我们能对一些元素做精确的个性化设定。选择器组合上面讲到的...

    简要讲解CSS中的类型选择器、ID选择器、类选择器

    网页元素:在CSS教程中,对于如“&lt;p&gt;&lt;/p&gt;”、“&lt;h3&gt;&lt;/h3&gt;”这些不再称呼为标签,而统一称呼为网页元素。在网页元素中,都可以按...该例子表示网页上所有的超链接取消下划线。 ID选择器CSS ID选择器允许选择网页元素的ID

    xheditor-1.1.14

    如果您希望样式表存储在系统自带的模板目录ui.css中,请将插件对象的样式名留空,则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名 具体调用方法请参考演示文件夹中...

    html入门到放弃笔记

    也称为 "双标记" , 必须成对出现 语法:&lt;标记&gt;内容标记&gt; Demo : 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 header 标记 -- &lt;header&gt;&lt;/header&gt; 2、非封闭类型的标记 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

    程序天下:JavaScript实例自学手册

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

Global site tag (gtag.js) - Google Analytics