24, CSS 构造超链接

Posted liu-zhijun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:"] {

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.以访问链接样式

<ul>

<li><a href="http://www.andybudd.com/">Andy Budd‘s Blogography</a></li>

<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>

<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>

<li><a href="http://www.clagnut.com/">Clagnut</a></li>

<li><a href="http://www.htmldog.com/">HTML Dog</a></li>

<li><a href="http://adactio.com/journal/">Adactio</a></li>

<li><a href="http://www.allinthehead.com/">All In TheHead</a></li>

<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>

<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>

</ul>

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 工具提示

<p>

<a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website

rocks) </span></a> is a web developer basedin Brighton England.

</p>

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构造超链接给链接加上边框

<!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>CSS构造超链接给链接加上边框</title>
<style type="text/css">
	a{
		text-decoration: none;
		color: red;
		border-bottom: 1px dashed #333;
		background: red;
		display: block;
		width: 160px;
		line-height: 150%;
	}
	</style>
</head>

<body>
<div>
<ul>
<li><a href="#">CSS构造超链接给链接加上边框</a></li>
<li><a href="#">CSS构造超链接给链接加上边框</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>

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

<!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{
		border: 1px solid #333;
		background: #ccc;
		text-decoration: none;
		color: #f00;
		line-height: 150%;
		
	}
	</style>
</head>

<body>
<div>

<p>在文章段落中加上超级链接1<a href="#">在文章段落中加上超级链接2</a>在文章段落中加上超级链接3</li>


</div>
</body>
</html>

  3用背景图象添加记号1

<!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{
	    
		background:url(images/2.jpg) no-repeat left center;
		text-decoration:none;
		color: #f00;
		line-height:150%;
		padding-left:15px;
		
	}
	</style>
</head>

<body>
<div>

<p>在文章段落中加上超级链接1<a href="#">在文章段落中加上超级链接2</a>在文章段落中加上超级链接3</li>


</div>
</body>
</html>

  3用背景图象添加记号2.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{
	    background:url(images/2.jpg) no-repeat left center;
		text-decoration:none;
		color: #f00;
		line-height:150%;
		padding-left:15px;
		
	}
	a:hover{
		background: url(images/8.png) no-repeat left center;
	}
	</style>
</head>

<body>
<div>

<p>用背景图象添加记号1<a href="#">用背景图象添加记号2</a>用背景图象添加记号3</p>


</div>
</body>
</html>

  4利用派生来影响链接

<!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:link,a:visited,a:active,a:hover{
	    
		background:url(images/2.jpg) no-repeat left center;
		text-decoration:none;
		color: #f00;
		line-height:150%;
		padding-left:15px;
		
	}
	a:visited{
		background: url(images/8.png);
	}
	</style>
</head>

<body>
<div>

<p>利用派生来影响链接1<a href="#">利用派生来影响链接2</a>利用派生来影响链接3</p>


</div>
</body>
</html>

  5利用图片作为下划线

<!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{	    
		background:url(images/11.png) repeat-x left bottom;
		text-decoration: none;
		}
	a:hover{
		background:url(images/12.png) repeat-x left bottom;
	}
	</style>
</head>

<body>
<div>

<p>利用图片作为下划线1<a href="#">利用图片作为下划线2</a>利用图片作为下划线3</p>


</div>
</body>
</html>

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

<!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{	    
		color:red;
		
		}
	a:hover{
		color:blue;
	}
	.ex{
		color: green;
		background: url(images/8.png) no-repeat left center;
		padding: 10px;
	}
	</style>
</head>

<body>
<div>

<p>突出显示不同类型的链接1<a href="#">突出显示不同类型的链接2</a>突出显示不同类型的链接3<a href="#" class="ex">突出显示不同类型的链接2</a></p>


</div>
</body>
</html>

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

<!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[href^="http:"]{
		background: url(images/8.png) no-repeat left center;
		padding-left: 10px;
		color: red;
	}
	a[href^="mailto:"]{
		background: url(images/2.jpg) no-repeat left center;
		padding-left: 10px;
		color: green;
	}
	
	</style>
</head>

<body>
<div>

<div>属性选择器来做链接1<a href="#">使用属性选择器来做链接2</a>使用属性选择器来做链接3<a href="http://www.baidu.com">性选择器来做链接3<a href="mailto:[email protected]">使用属性选择器来做链接</a></div>


</div>
</body>
</html>

  8创建按钮和翻转

<!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 {
Display: block;
Width:160px;
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;
}
	
	</style>
</head>

<body>
<div>

<div>创建按钮和翻转1<a href="#">创建按钮和翻转2</a>创建按钮和翻转3<a href="http://www.baidu.com">创建按钮和翻转3<a href="mailto:[email protected]">创建按钮和翻转</a></div>


</div>
</body>
</html>

  9按钮具有图象的翻转

<!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 {
Display: block;
Width:200px;
height: 44px;
Line-height:40px;
Background:url(images/13.png);
font-size: 12px;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
Background:url(images/14.png);
color:#fff;
}
	
	</style>
</head>

<body>
<div>

<div>按钮具有图象的翻转1<a href="#">按钮具有图象的翻转2</a>按钮具有图象的翻转3<a href="http://www.baidu.com">按钮具有图象的翻转3<a href="mailto:[email protected]">按钮具有图象的翻转</a></div>


</div>
</body>
</html>

  10以访问链接样式

<!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">
	ul{
	list-style-type: none;
	
	}
	ul li{
		height: 25px;
	}
	ul li a{
		width: 260px;
		height:30px;
		line-height: 30px;
		display: block;
		background: url(images/16.png) no-repeat left center;
		padding-left:30px;
		color: red;
	}
	ul li a:visited{
	color: maroon;
	background: url(images/15.png) no-repeat left center;
	}
	</style>
</head>

<body>
<ul>
	<li><a href="http://www.andybudd.com/">Andy Budd‘s Blogography</a></li>
	<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>
	<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>
	<li><a href="http://www.clagnut.com/">Clagnut</a></li>
	<li><a href="http://www.htmldog.com/">HTML Dog</a></li>
	<li><a href="http://adactio.com/journal/">Adactio</a></li>
	<li><a href="http://www.allinthehead.com/">All In TheHead</a></li>
	<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>
	<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>
</ul>
</body>
</html>

  11纯 css 工具提示一段文字1

<!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>纯 css 工具提示</title>
<style type="text/css">
	body{
	margin: 100px;
	}
	p a{
		position: relative;
	}
	p a span{
	display: none;
	}
	p a:hover span{
		position: absolute;
		top: 20px;
		left: 0px;
		display:block;
		border: 1px solid black;
		width:150px;
		height;100px;
		background: lightyellow;
	}
	p a:hover{
		font-size: 100%;
	}
	</style>
</head>

<body>
<p>
	<a href="http://www.baidu.com">纯 css 工具提示<span>纯 css 工具提示</span>具提示纯 css 工具提示
		
	</a>
</p>
</body>
</html>

  11纯 css 工具提示一张图片2

<!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>纯 css 工具提示</title>
<style type="text/css">
	body{
	margin: 100px;
	}
	p a{
		position: relative;
	}
	p a span{
	display: none;
	}
	p a:hover span{
		position: absolute;
		top: 20px;
		left: 0px;
		display:block;
		border: 1px solid black;
		width:150px;
		height;100px;
		background: lightyellow;
	}
	p a:hover{
		font-size: 100%;
	}
	</style>
</head>

<body>
<p>
	<a href="http://www.baidu.com">纯 css 工具提示<span>纯 css 工具提示<br/><img src="images/pic7.jpg"</span>具提示纯 css 工具提示
		
	</a>
</p>
</body>
</html>

  

以上是关于24, CSS 构造超链接的主要内容,如果未能解决你的问题,请参考以下文章

怎样用css去除超链接的下划线

使用CSS去除链接下划线

HTML代码片段

HTML代码片段

使用css隐藏超链接行

修改 CSS Hover 超链接效果