24, CSS 构造超链接

最新推荐文章于 2023-02-02 10:53:09 发布

柳志军

最新推荐文章于 2023-02-02 10:53:09 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

分类专栏： DIV+CSS

本文链接：https://blog.youkuaiyun.com/lzjgame/article/details/88924135

DIV+CSS 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用CSS来美化和增强超链接的表现，包括添加边框、背景图象、利用派生选择器、图片翻转效果、创建工具提示等。通过各种技巧，可以实现链接在不同状态下的独特样式，提升网页的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

超链接边框
派生超链接
属性选择器超链接
动态超链接
图像翻转超链接
CSS 工具提示

1.给链接加上边框

A:link {

Color: #f00;

Text-decoration: none;

Border-bottom: 1px dashed #333;

Line-height: 150%;

}

2.在文章段落中加上超级链接

A:link {

Color: #f00;

Text-decoration: none;

Border: 1px solid #333;

Background: #ccc;

Padding: 2px;

Line-height: 150%;

}

用背景图象添加记号

A:link {

Color:#f00;

Padding: 0 15px 0 0;

Background:url(images/arrow.gif) no-repeat right center;

}

A:visited {

Color:#999;

Padding: 0 15px 0 0;

Background:url(images/checkmark.gif) no-repeat right center;

}

4.利用派生来影响链接

P a:link, p a:visited, p a:hover, p a:active {

Color:#f00;

}

Ul a{

Color:#000;

}

5.利用图片作为下划线

A:link, a:visited {

Color: #666;

Text-decoration:none;

Background: url(images/underline1.gif) repeat-x left bottom;

}

A:hover, a:active {

Background:url(images/underline1-hover.gif);

}

6.突出显示不同类型的链接

.external {

Background:url(images/externalLink.gif) no-repeat right top;

Padding-right: 10px;

}

7.使用属性选择器来做链接

a[href^=“http:”] {

background:url(images/externalLink.gif) no-repeat right top;

padding-right: 10px;

}

a[href^=“mailto:”] {

background:url(images/email.png) no-repeat right top;

padding-right: 13px;

}

8.创建按钮和翻转

a {

Display: block;

Width: 6em;

Padding: 02.em;

Line-height: 1.4;

Background-color: #94b8e9;

Border: 1px solid black;

Color: #000;

Text-decoration: none;

Text-align: center;

}

a:hover {

background-color: #369;

color:#fff;

}

9.具有图象的翻转

a {

Display: block;

Width: 200px;

Height: 40px;

Line-height: 40px;

Background-color: #94b8e9;

Color: #000;

Text-decoration: none;

Text-indent:50px;

Background: #94b8ea url(images/button.gif) no-repeat left top;

}

A:hover {

Background: #369 url(images/button_over.gif) no-repeat left top;

Color: #fff;

}

9.以访问链接样式

Andy Budd's Blogography
Stuff and Nonsense
Hicks Design
Clagnut
HTML Dog
Adactio
All In TheHead
Mark Boulton
Ian Lloyd
ul {

list-style:none;

}

li {

margin: 5px 0;

}

li a {

display: block;

width: 300px;

height: 30px;

line-height: 30px;

color: #000;

text-decoration: none;

background: #94B8E9 url(images/visited.gif) no-repeat left top;

text-indent: 10px;

}

li a:visited {

background-position: right top;

}

10.纯 css 工具提示

Andy Budd (This website

rocks) is a web developer basedin Brighton England.

a.tooltip {

position: relative;

}

a.tooltip span {

display: none;

}

a.tooltip:hover {

font-size: 100%; /* Fixes bug in IE5.x/Win */

}

a.tooltip:hover span {

display:block;

position:absolute;

top:1em;

left:2em;

padding: 0.2em 0.6em;

border:1px solid #996633;

background-color:#FFFF66;

color:#000;

}

1CSS构造超链接给链接加上边框
CSS构造超链接给链接加上边框
　　2在文章段落中加上超级链接在文章段落中加上超级链接

在文章段落中加上超级链接1在文章段落中加上超级链接2在文章段落中加上超级链接3
　　3用背景图象添加记号1 在文章段落中加上超级链接

在文章段落中加上超级链接1在文章段落中加上超级链接2在文章段落中加上超级链接3
　　3用背景图象添加记号2.html 用背景图象添加记号

用背景图象添加记号1用背景图象添加记号2用背景图象添加记号3
　　4利用派生来影响链接利用派生来影响链接

利用派生来影响链接1利用派生来影响链接2利用派生来影响链接3
　　5利用图片作为下划线利用图片作为下划线

利用图片作为下划线1利用图片作为下划线2利用图片作为下划线3
　　6突出显示不同类型的链接突出显示不同类型的链接

突出显示不同类型的链接1突出显示不同类型的链接2突出显示不同类型的链接3突出显示不同类型的链接2
　　7使用属性选择器来做链接使用属性选择器来做链接

属性选择器来做链接1 使用属性选择器来做链接2使用属性选择器来做链接3 性选择器来做链接3 使用属性选择器来做链接
　　8创建按钮和翻转创建按钮和翻转

创建按钮和翻转1 创建按钮和翻转2创建按钮和翻转3 创建按钮和翻转3 创建按钮和翻转
　　9按钮具有图象的翻转按钮具有图象的翻转

按钮具有图象的翻转1 按钮具有图象的翻转2按钮具有图象的翻转3 按钮具有图象的翻转3 按钮具有图象的翻转
　　10以访问链接样式按钮具有图象的翻转
　　11纯 css 工具提示一段文字1 纯 css 工具提示
纯 css 工具提示纯 css 工具提示具提示纯 css 工具提示
```
</a>
```
　　11纯 css 工具提示一张图片2 纯 css 工具提示
纯 css 工具提示纯 css 工具提示