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:123@qq.com">使用属性选择器来做链接</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:123@qq.com">创建按钮和翻转</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:123@qq.com">按钮具有图象的翻转</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>

　　

原文地址：https://www.cnblogs.com/liu-zhijun/p/10630203.html

时间： 2024-10-13 15:45:18

24, CSS 构造超链接的相关文章

CSS 构造表格

表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </t

css 构造文本

css 构造文本 1. 首行缩进 text-indent :20px;  2em; 10% 2. 文本对齐 text-align : left, right ,center , 3. 文本行高 line-height 4. 字间隔 word-spacing 5. 字母间隔 letter-spacing 6. 文本修饰 text-decoration : underline, overline ,lint-through 7. 字体 font-family 8. 字体大小 font-size 9.

纯CSS构造树状结构图

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS构造树状结构图</title> </head> <body> <div style="width:380px; height:600px; border:1px dashed gray; margin:30px auto; text-align:ce

23 , CSS 构造列表与导航

1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: 0; Padding:0; Width: 200px; List-style-image:url(images/list.gif); Line-height: 150%; } 3. 以背景图片作为项目列表图标 Ul { List-style-type:none; } Li { Background:

关于对CSS中超链接那部分的设置

a:link{                                  //正常下的超链接 color:red;                          //超链接的颜色 text-decoration:none;       //超链接没有下划线 } a:visited{                     //访问过的超链接 color:yellow;                 //访问过的超链接颜色 text-decoration:none;    //访问过

CSS控制超链接

一.伪类 CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)    偽类的语法:元素标签 偽类名称{属性:属性值;} 二.超链接        a:link:未访问的链接        a:hover:鼠标移动到链接上        a:active:鼠标按下链接        a:visited:已访问的链接如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A <style type="text/css"> a:lin

【CSS】使用CSS改变超链接样式

超链接代码 1 <ahrefahref="http://www.divCSS5.com/"target="_blank" 2 title="关于divCSS的网站">DIV+CSS</a> 解析如下: href后跟被链接地址目标网站地址这里是http://www.divCSS5.com/ target _blank--在新窗口中打开链接 _parent--在父窗体中打开链接 _self--在当前窗体打开链接,此为默认值 _

21 , CSS 构造模型

1. div 2. 边距 3. 边框 4. 定位 5. 浮动 1 21.1  div 部分(division)---<div>元素,经常以 div 形式引用---是 XHTML 元素,用于定义 XHTML 文 件中的区域. 1.添加 div <div> <p>This is our content area.</p> </div> 给 div 添加一个 id <div id=”container”> <p>This is

CSS构造文本

<style type="text/css"> /*字体*/ body{ font-family:"Microsoft Yahei"; /*或者用这个,font-family:"微软雅黑"*/ font-size:12px; /*字体大小(像素)*/ color:#654; /*颜色为:#665544,左边是简写*/ font-weight:bold; /*粗体*/ font-style:italic;/*斜体*/ text-deco