`
edzhh
  • 浏览: 66612 次
  • 性别: 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]
分享到:
评论

相关推荐

    7款CSS3超链接下划线动画特效代码

    "7款CSS3超链接下划线动画特效代码" 是一个关于CSS3技术在网页设计中的实际应用案例,特别是针对超链接(a标签)的下划线进行美化和动态效果的设计。CSS3是层叠样式表的最新版本,提供了更多的样式控制选项和动态...

    Css——超链接样式

    这里我们将深入探讨CSS中的超链接样式及其四个关键状态。 1. `a:link` - 链接平常的状态 当用户尚未点击链接时,`a:link`用于定义超链接的初始样式。这通常包括颜色、文字装饰(如下划线)和字体大小等。例如,...

    CSS改变超链接属性

    在这个场景中,我们需要使用CSS来改变超链接的属性,从而实现特定的视觉效果和交互体验。 首先,我们要了解超链接的基本结构。在HTML中,`&lt;a&gt;`标签用于创建超链接,其`href`属性定义了链接的目标URL。例如,将...

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

    总的来说,CSS伪类选择器极大地增强了我们对超链接样式的控制能力,让网页设计更加灵活和个性化。无论是修改颜色、下划线,还是添加其他视觉效果,都可以通过巧妙运用`:link`, `:visited`, `:hover`, 和`:active`来...

    18种基于html5 svg和css3的神奇超链接动画效果

    本资源“18种基于html5 svg和css3的神奇超链接动画效果”正是利用这两者的强大力量,创新性地展示了超链接的多样化动画表现形式,突破了传统单一的下划线高亮效果。 SVG(Scalable Vector Graphics)是一种基于XML...

    HTML-CSS-Div测试习题.docx

    本资源摘要信息主要围绕 HTML、CSS、Div 等相关知识点展开,涵盖了网页设计、HTML 标记、CSS 样式表、文本属性、超链接、表格、背景颜色等多方面的内容。 一、HTML 基础知识 * HTML 中,`&lt;pre&gt;` 标记的作用是预...

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

    "css样式"标签则直接点明了主题,即这个资源是关于CSS样式的,特别是与超链接相关的CSS3特效。 【文件名称列表】 由于提供的信息只有一个数字"1544",这可能是一个错误或者遗漏,通常压缩包内的文件名会包含更具体...

    css-dictionary(CSS常用英语词汇详解)

    CSS中的`border`属性用于设置元素四周的边框样式、宽度和颜色。 - **Banner**: 页面横幅。常见于网站顶部的大图区域,通常用于展示重要信息或广告。 - **Both**: 两者都。`clear:both`用于清除左右两侧的浮动元素,...

    资料-项目4 穿搭速递-列表超链接CSS伪类.rar.rar

    在本项目“穿搭速递-列表超链接CSS伪类”中,我们将深入探讨如何使用CSS(层叠样式表)来美化和控制HTML列表中的超链接元素。CSS伪类是实现这一目标的关键工具,它们允许我们根据元素的不同状态来应用特定的样式。...

    html超链接去掉下划线

    要去除超链接的下划线,我们可以使用CSS(层叠样式表)进行样式定义。以下就是三种简洁的CSS代码方法: 1. **使用`text-decoration`属性**: CSS中的`text-decoration`属性用于设置文本的装饰,如下划线、上划线或...

    css 浮雕式超链接

    利用CSS,我们可以实现各种视觉效果,包括创建浮雕式的超链接,这使得网页元素更具交互性和吸引力。在本主题中,我们将深入探讨如何使用CSS创建浮雕效果的超链接,并分享一些实用技巧。 首先,让我们理解浮雕效果。...

    css控制超链接(css超链接样式)

    【CSS控制超链接样式】是Web前端开发中的一个重要部分,它允许我们自定义HTML中`&lt;a&gt;`标签的外观和行为。以下是对这个主题的详细解释: ### 一、CSS伪类 伪类是CSS中一种特殊的声明,用于指定元素在特定状态下的...

    CSS定义超链接四个状态的正确顺序L-V-H-A

    在CSS(层叠样式表)中,我们经常需要对网页中的超链接进行样式定义,以实现不同的视觉效果。超链接有四个不同的状态,每个状态对应不同的用户交互情况。正确理解和应用这四个状态的顺序至关重要,因为不正确的顺序...

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

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

    使用CSS去掉网页中超链接的下划线示例

    然而,在某些设计中,我们可能希望去除超链接的默认下划线,并根据超链接的不同状态自定义颜色和下划线样式。 要实现这一目标,可以通过CSS(层叠样式表)来控制超链接的显示样式。CSS为开发者提供了一系列的伪类...

    CSS层叠样式表技术参考手册

    - **链接样式**:探讨如何使用CSS美化超链接,包括更改颜色、添加下划线等。 - **状态控制**:讲解`:hover`、`:active`等伪类的使用。 - **2.5 CSS列表** - **列表样式**:介绍如何自定义列表项符号及布局方式。 ...

    javascript取下划线

    ### JavaScript与CSS去除超链接下划线方法 在网页设计中,经常需要对超链接进行样式调整以适应整体页面的设计风格。其中,去除超链接默认的下划线效果是一种常见的需求。下面将详细介绍如何通过JavaScript和CSS来...

    创建超链接及css 样式设置

    ### 创建超链接及CSS样式设置知识点整理 #### 超链接创建基础 超链接是HTML中非常基础且重要的部分,它允许用户点击文本或图片后跳转到另一处位置,可以是同一页面内的不同部分,也可以是互联网上的其他页面,甚至...

    CSS定义超链接样式的顺序及四个伪类的用法示例介绍

    在CSS中,定义超链接样式是网页设计的基本要素之一,主要通过四个伪类来实现不同的链接状态。这四个伪类是`:link`、`:visited`、`:hover`和`:active`,它们按照“爱恨”原则(LVHA)排列,即Link、Visited、Hover、...

    android TextView 支持CSS样式

    ### Android TextView 支持CSS样式详解 #### 一、引言 在Android开发过程中,为了增强界面的表现力和可维护性,开发者常常需要利用到HTML和CSS的技术来丰富`TextView`的内容展示。虽然原生的Android SDK并没有直接...

Global site tag (gtag.js) - Google Analytics