今天在51.la论坛有网友问起"同一页面如何制作多种链接样式",于是自己就随手写了一个:CSS制作多种链接样式代码,结果却写错鸟,其实 多种链接样式制作方法 挺简单的,看看下面这个多种链接样式制作方法的实例,你就明白了如何用CSS制作多种链接样式了 <html> <head> CSS制作多种链接样式实例 <style type="text/css"> </style> </head> <body> 第一种样式(默认的)
个人日志
第二种样式 个人日志
另外一种实现链接样式的方法 个人日志
</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> CSS制作多种链接样式实例 <link rel="stylesheet" type="text/css" href="default.css"> </head> <body> 第一种样式(默认的) 个人日志
第二种样式 个人日志
另外一种实现链接样式的方法 个人日志
</body> </html>
第二种样式 个人日志
另外一种实现链接样式的方法 个人日志
DIV容器实现链接样式的方法
个人日志
</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> CSS制作多种链接样式实例 <link rel="stylesheet" type="text/css" href="default.css"> </head> <body> 第一种样式(默认的) 个人日志
第二种样式 个人日志
另外一种实现链接样式的方法 个人日志
DIV容器实现链接样式的方法
个人日志
</body> </html>
1405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
