css构造超链接

最新推荐文章于 2023-12-22 14:21:57 发布
最新推荐文章于 2023-12-22 14:21:57 发布
阅读量311 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42773727
版权 
<!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构造超链接</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构造超链接</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构造超链接</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构造超链接</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构造超链接</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构造超链接</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构造超链接</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:1555322@qq.com">邮件</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构造超链接</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构造超链接</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构造超链接</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构造超链接</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;
			}
			/*解决IE5.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之超链接，盒子模型，定位
qq_2992427261
07-23 2149
css提供了四种a对象的伪类，他表示四种不同的状态， link：没有访问时的状态 visited：已经访问的链接 active：激活链接,单击链接但还没有释放之前的样式 hover：鼠标停留在链接上时 a{ …… } a:link{ …… } avisited{ …… } 注意在这里还有滤镜，动感模糊，透明度处理，阴隐设置，发光效果，x光效果（x...
24, CSS 构造超链接
lzjgame的博客
03-31 690
超链接边框 派生超链接 属性选择器超链接 动态超链接 图像翻转超链接 CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-decoration: none; Border-bottom: 1px dashed #333; Line-height: 150%; } 2.在文章段落中加上超级链接 A:link { Color: #f0...
通过构造方法连接服务器
guzhen518的博客
12-07 174
通过构造方法连接服务器 我们可以通过6个重载构造函数以不同的方式来连接服务器。这6个重载的构造函数可以分为两类： 1. 自动选择IP 这种方式是最常用的。所谓自动选择IP，是指当本机有多块网卡或者在一个网卡上绑定了多个IP时，Socket类会自动为我们选择一个可用的IP。在上述6个构造方法中有4个是使用这种方法来连接服务器的。 (1) public S...
和构造函数有关的链接
❂
03-05 170
http://blog.csdn.net/baiyq369/article/details/54926983http://www.cnblogs.com/xkfz007/archive/2012/05/11/2496447.html
CSS构造超链接
weixin_30721077的博客
08-01 204
超链接边框 派生超链接 属性选择器超链接 动态超链接 图像翻转超链接 CSS工具提示 1.给链接加上边框 A:link { Color: #f00; Text-decoration: none; Border-bottom: 1px dashed #333; Line-height: 150%...
初学者的 7 个链接构建技巧
最新发布
SEOjiaoxue的博客
12-22 1119
这些是我甜蜜的 n00by 链接建设婴儿的最后一句话。螺丝符合性！在链接建设（和生活）中，做你毫无歉意的自己。抛弃“适当和专业”的公司内容。拥抱你的风格，相信你的直觉，不要抄袭别人。尝试，尽情享受，并拥有自己独特的方法。
HTML_CSS_Satis_Sitesi:使用HTML和CSS进行动态网页设计
05-25
HTML和CSS是构建网页设计的基础，它们分别是HyperText Markup Language和Cascading Style Sheets...通过实践，你不仅会掌握网页的基本构造，还能了解到如何通过CSS实现美观的设计，并可能涉及JavaScript来增加交互性。
HTML 与 CSS
LemonStars的博客
07-13 749
新手所学基础：html与css样式
HTML超链接与图像详解
理解网页中的实体、H5超链接的构造和URL的工作原理，以及如何利用HTML标签和CSS控制图像和文本的呈现，对于创建功能完整、用户体验良好的网页至关重要。通过熟练掌握这些基础知识，开发者能够构建出更具吸引力和交互...
创建超链接
酷小亚
09-22 3404
超链接虽然在网页中占有不可代替的地位，但是在HTML中创建超链接非常简单，下面我随便讲一下！ 这次和以往不同，先上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建超链接</title> </head> <body> <a href="http://www.itcast.cn/" target="_self">传智
css设置超链接样式和css设置列表样式
热门推荐
qq_40135955的博客
04-09 2万+
<style type="text/css"> a:LINK { color: red; text-decoration: none; } a:VISITED { color: green; text-decoration: none; } a:HOVE...
CSS中的滑动门技术
风过留声
05-25 1444
原文地址：http://www.planabc.net/article.asp?id=107学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点
微信企业号之构造网页授权链接
lss0555的博客
12-04 5425
一.相关介绍 企业微信提供了OAuth的授权登录方式，可以让网页和企业微信共享用户ID，从而免去登录的环节。 二.网页授权的可信域名 在开始使用网页授权之前，开发者需要先登录到企业管理端后台，选择“企业应用”选项卡，进入需要使用网页授权的应用并编辑“可信域名”表单项，此选项将用于网页OAuth2.0授权的时候进行安全验证。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 htt...
css中margin、padding属性用法
12-23 537
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
css区块、浮动、定位、溢出、滚动条
01-14 267
CSS div { background:red; width:200px; height:100px; overflow:auto; scrollbar-face-color :pink; }
css边框与边界
01-14 244
CSS边框与边界 img { border:dashed 1px green; } <!-- 可依序设置上、右、下、左线颜色 border-color:red 四边均为红色 border-color:red green 上下为红色、左右为绿色 border-col
css定义选择器
01-15 236
定义选择器 #title { color:red; } PHP100.COM中文网 定义选择器 /*只适合title的h2标题*/ p#title { color:blue; } h2#ti
css构造表格
01-16 226
css构造表格 table { /* border-collapse:separate|collapse 设置或检索表格的行和单元格的边是否合并在一起 还是按照标准的HTML样式分开。 separate : 默认值。边框独立(标准HTML) collapse : 相邻边被合并
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值