24, CSS 构造超链接

1. 超链接边框

2. 派生超链接

3. 属性选择器超链接

4. 动态超链接

5. 图像翻转超链接

6. 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%;

}

3. 用背景图象添加记号

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