CSS制作多种链接样式 css超链接样式 好看

CSS制作多种链接样式

今天在51.la论坛有网友问起"同一页面如何制作多种链接样式",于是自己就随手写了一个:CSS制作多种链接样式代码,结果却写错鸟,其实 多种链接样式制作方法 挺简单的,看看下面这个多种链接样式制作方法的实例,你就明白了如何用CSS制作多种链接样式了

<html>

<head>

<title>CSS制作多种链接样式实例</title>

<style type="text/css">

<!--

a:link { color: #CC3399; text-decoration: none}

a:visited { color: #FF3399; text-decoration: none}

a:hover { color: #800080; text-decoration: underline}

a:active { color: #800080; text-decoration: underline}

a.red:link { color: #FF0000; text-decoration: none}

a.red:visited { color: #FF0000; text-decoration: none}

a.red:hover { color: #606060; text-decoration: underline}

a.red:active { color: #606060; text-decoration: underline}

a.ameth:link { color: #400040; text-decoration: none}

a.ameth:visited { color: #400040; text-decoration: none}

a.ameth:hover { color: #FF3399; text-decoration: underline}

a.ameth:active { color: #FF3399; text-decoration: underline}

div.other a:link { color: #004000; text-decoration: none}
CSS制作多种链接样式 css超链接样式 好看

div.other a:visited { color: #004000; text-decoration: none}

div.other a:hover { color: #008000; text-decoration: underline}

div.other a:active { color: #008000; text-decoration: underline}

-->

</style>

<!-- 链接样式表 -->

</head>

<body>

第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>

第二种样式 <a href="http://www.dayanmei.com">个人日志</a><br>

另外一种实现链接样式的方法 <a href="http://www.dayanmei.com">个人日志</a><br>

<div>DIV容器实现链接样式的方法 <a href="http://www.dayanmei.com">个人日志</a></div><br>

</body>

</html>

当然,你完全可以将CSS代码写入一个CSS文件,这样做的好处,不仅是你的网页HTML代码简洁了,而且你会发现速度也跟着提升了,因为浏览器会缓存你的CSS文件,更重要的是你要改变样式时只需要改变CSS样式表文件就可以了

这样写

css样式文件 default.css

a:link { color: #CC3399; text-decoration: none}

a:visited { color: #FF3399; text-decoration: none}

a:hover { color: #800080; text-decoration: underline}

a:active { color: #800080; text-decoration: underline}

a.red:link { color: #FF0000; text-decoration: none}

a.red:visited { color: #FF0000; text-decoration: none}

a.red:hover { color: #606060; text-decoration: underline}

a.red:active { color: #606060; text-decoration: underline}

a.ameth:link { color: #400040; text-decoration: none}

a.ameth:visited { color: #400040; text-decoration: none}

a.ameth:hover { color: #FF3399; text-decoration: underline}

a.ameth:active { color: #FF3399; text-decoration: underline}

div.other a:link { color: #004000; text-decoration: none}

div.other a:visited { color: #004000; text-decoration: none}

div.other a:hover { color: #008000; text-decoration: underline}

div.other a:active { color: #008000; text-decoration: underline}

现在,你只需要将CSS包含进你的HTML文件就可以了

index.htm

<html>

<head>

<title>CSS制作多种链接样式实例</title>

<link rel="stylesheet" type="text/css" href="default.css">

<!-- 链接样式表 -->

</head>

<body>

第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>

第二种样式 <a href="http://www.dayanmei.com">个人日志</a><br>

另外一种实现链接样式的方法 <a href="http://www.dayanmei.com">个人日志</a><br>

<div>DIV容器实现链接样式的方法 <a href="http://www.dayanmei.com">个人日志</a></div><br>

</body>

</html>

本站原创,欢迎转载,请注明出处: http://www.dayanmei.com/blog.php/ID_274.htm

  

爱华网本文地址 » http://www.413yy.cn/a/25101013/183133.html

更多阅读

电脑无法启动,电脑开不了机,电脑不能开机 开机无法启动

? ? 如果你经常和电脑打交道,电脑无法启动、电脑开不了机、电脑不能开机,相信您肯定遇到过;根据我多年电脑维护的经验分析,造成这样的原因,有好多种,接下来一一列举分析下:开机后,风扇转动,有滴的自检声,但是突然就没电了,70%可能

教你如何在QQ空间日志里添加图片超链接 qq空间说说文字超链接

在QQ空间日志里添加图片超链接不是很难,虽然QQ空间里有添加超链接的功能,但是这个只能给文字添加超链接,不能给图片添加超链接,这里我就告诉大家如何在QQ空间日志里添加图片超链接,稍后再讲文字添加超链接。一、制作图片超链接(1)在桌面

css样式改变鼠标指针形状实例 css 指针样式

改变鼠标指针形状的方法有两种;一种:用css样式表来改变鼠标指针形状。另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状我们先来看第一种:用css样式表来改变鼠标指针形状。有些时候我们并不需要

制作图片带字 图片制作带字在线

在线制作QQ头像带字的女生 QQ头像带字的男生 免费店铺店标在线制...在线设计静态头像带杠杠带字免费版。 http://www.jiqie.com/3/32 : 2014最新时尚动感流光... 在线制作QQ情侣卡通头像男生超拽版。 http://www.jiqie.com/3/36 : 1

声明:《CSS制作多种链接样式 css超链接样式 好看》为网友小甜心分享!如侵犯到您的合法权益请联系我们删除