今天在#論壇有網(wǎng)友問(wèn)起"同一頁(yè)面如何制作多種鏈接樣式",于是自己就隨手寫(xiě)了一個(gè):CSS制作多種鏈接樣式代碼,結(jié)果卻寫(xiě)錯(cuò)鳥(niǎo),其實(shí) 多種鏈接樣式制作方法 挺簡(jiǎn)單的,看看下面這個(gè)多種鏈接樣式制作方法的實(shí)例,你就明白了如何用CSS制作多種鏈接樣式了
<html>
<head>
<title>CSS制作多種鏈接樣式實(shí)例</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}
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>
第一種樣式(默認(rèn)的) <a href="http://www.">個(gè)人日志</a> <br>
第二種樣式 <a class="red" href="http://www.">個(gè)人日志</a><br>
另外一種實(shí)現(xiàn)鏈接樣式的方法 <a class="ameth" href="http://www.">個(gè)人日志</a><br>
<div class="other">DIV容器實(shí)現(xiàn)鏈接樣式的方法 <a class="other" href="http://www.">個(gè)人日志</a></div><br>
</body>
</html>
當(dāng)然,你完全可以將CSS代碼寫(xiě)入一個(gè)CSS文件,這樣做的好處,不僅是你的網(wǎng)頁(yè)HTML代碼簡(jiǎn)潔了,而且你會(huì)發(fā)現(xiàn)速度也跟著提升了,因?yàn)闉g覽器會(huì)緩存你的CSS文件,更重要的是你要改變樣式時(shí)只需要改變CSS樣式表文件就可以了
這樣寫(xiě)
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}
現(xiàn)在,你只需要將CSS包含進(jìn)你的HTML文件就可以了
index.htm
<html>
<head>
<title>CSS制作多種鏈接樣式實(shí)例</title>
<link rel="stylesheet" type="text/css" href="default.css">
<!-- 鏈接樣式表 -->
</head>
<body>
第一種樣式(默認(rèn)的) <a href="http://www.">個(gè)人日志</a> <br>
第二種樣式 <a class="red" href="http://www.">個(gè)人日志</a><br>
另外一種實(shí)現(xiàn)鏈接樣式的方法 <a class="ameth" href="http://www.">個(gè)人日志</a><br>
<div class="other">DIV容器實(shí)現(xiàn)鏈接樣式的方法 <a class="other" href="http://www.">個(gè)人日志</a></div><br>
</body>
</html>
本站原創(chuàng),歡迎轉(zhuǎn)載,請(qǐng)注明出處: http://www./blog.php/ID_274.htm
|
