天天看點
傳回

css構造超連結

<!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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				/*IE6 IE7涓??劇ず涓?????绾?/
				text-decoration:none;
				color:red;
				border-bottom:1px dashed #333;
				
				display:block;
				width:140px;
				line-height:150%;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 缁??炬?ュ??涓?杈規? -->
		<a href = "http://www.php100.com">PHP100.COM涓???缃?</a>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				
				border:1px solid #333;
				background:#ccc;
				text-decoration:none;
				color:#f00;
				/*IE7涓?涓?杈規??劇ず涓??烘??/
				line-height:150%;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ?ㄦ??绔?娈佃?戒腑??涓?瓒??炬??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php100.com">PHP</a>涓????變韓绔?<p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				
				background:url(tb.gif) no-repeat left center;
				text-decoration:none;
				color:#f00;
				line-height:150%;
				padding-left:15px;
			}
			a:hover
			{
				background:url(tk.gif) no-repeat left center;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ?ㄨ?????懼??娣誨??璁闆??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php200.com">PHP</a>涓????變韓绔?<p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a:link,a:visited,a:active,a:hover
			{
				
				background:url(tb.gif) no-repeat left center;
				text-decoration:none;
				color:#f00;
				line-height:150%;
				padding-left:15px;
			}
			a:hover
			{
				background:url(tk.gif) no-repeat left center;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ?╃?ㄦ淳???ュ獎???炬??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php200.com">PHP</a>涓????變韓绔?<p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				
				background:url(underline1.gif) repeat-x left bottom;
				text-decoration:none;
				line-height:150%;
			}
			a:hover
			{
				background:url(underline1-hover.gif) repeat-x left bottom;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ?╃?ㄦ淳???ュ獎???炬??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php200.com">PHP</a>涓????變韓绔?<p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				color:red;
			}
			a:hover
			{
				color:blue;
			}
			
			.ex
			{
				color:green;
				background:url(tk.gif) no-repeat left center;
				padding:10px;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 绐??烘?劇ず涓???绫誨?????炬??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php100.com">PHP</a>涓????變韓绔?!<a href = "http://www.php200.com" class = "ex">璁哄??</a><p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a[href ^= "http:"]
			{
				background:url(tb.gif) no-repeat left center;
				padding-left:10px;
				color:red;
			}
			a[href ^= "mailto:"]
			{
				background:url(tk.gif) no-repeat left top;
				padding-left:15px;
				padding-top:5px;
				color:green;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 浣跨?ㄥ??ч???╁?ㄦ?ュ???炬??-->
		<p>PHP100.COM涓???缃?,<a href = "http://www.php100.com">PHP</a>涓????變韓绔?!<a href = "mailto:[email?protected]">??浠?lt;/a><a href = "http://www.php200.com" class = "ex">璁哄??</a><p>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				display:block;
				width:160px;
				height:25px;
				line-height:25px;
				text-align:center;
				background:1px solid black;
				color:lightgreen;
				font-size:12px;
				text-decoration:none;
				background:#06f;
			}
			a:hover
			{
				background:#f60;
				color:#fff;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ??寤烘??????缈昏漿 -->
		<a href = "http://www.php100.com">PHP100.COM涓???缃?</a>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			a
			{
				display:block;
				width:200px;
				height:40px;
				line-height:40px;
				text-align:center;
				background:1px solid black;
				color:lightgreen;
				font-size:12px;
				text-decoration:none;
				background:url(button.gif) no-repeat;
			}
			a:hover
			{
				background:url(button-over.gif) no-repeat;
				color:#fff;
			}
			
		</style>
	</head>
	
	<body>
		<!-- ?鋒???懼????缈昏漿 -->
		<a href = "http://www.php100.com">PHP100.COM涓???缃?</a>
		
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			ul
			{
				list-style-type:none;
			}
			ul li
			{
				height:25px;
			}
			ul li a
			{
				width:160px;
				height:30px;
				line-height:30px;
				display:block;
				background:url(tb.gif) no-repeat left center;
				padding-left:30px;
				color:red;
			}
			ul li a:hover
			{
				color:maroon;
				background:url(tk.gif) no-repeat left center;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 浠ヨ?塊??杩??ユ?峰? -->
		<a href = "http://www.php100.com">PHP100.COM涓???缃?</a>
		<ul>
			<li><a href = "http://www.aaa.com">AAAAA</a></li>
			<li><a href = "http://www.bbb.com">BBBBB</a></li>
			<li><a href = "http://www.ccc.com">CCCCC</a></li>
			<li><a href = "http://www.ddd.com">DDDDD</a></li>
			<li><a href = "http://www.eee.com">EEEEE</a></li>
		</ul>
	</body>
</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">
<html>
	<head>
		<title>css????瓒??炬??lt;/title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:100px;
				
			}
			p a
			{
				position:relative
			}
			
			p a span
			{
				display:none;
			}
			p a:hover span 
			{
				display:block;
				border:1px solid black;
				width:150px;
				height:100px;
				background:lightyellow;
				position:absolute;
				top:15px;
				left:0px;
			}
			/*瑙ｅ??E5.5 IE6??????棰? 涓?涓?BUG*/
			p a:hover
			{
				font-size:100%;
			}
		</style>
	</head>
	
	<body>
		<!-- 绾?CSS宸ュ?鋒??绀?-->
		<p><a href = "http://www.php100.com">PHP<span>PHP瀹??圭?绔?<br /><img src = "1.jpg"></span></a>100.COM涓???缃?</p>
	</body>
</html>

?

css
上一篇: php怎麼給超連結設定樣式,html中如何設定超連結的樣式
下一篇: html引用百度搜尋

繼續閱讀