给超级链接增加其他样式


答案：给超级链接增加其他样式
<html> 
<head> 
<style type="text/css"> 
a.one:link {color: #ff0000} 
a.one:visited {color: #0000ff} 
a.one:hover {color: #ffcc00} 

a.two:link {color: #ff0000} 
a.two:visited {color: #0000ff} 
a.two:hover {font-size: 150%} 

a.three:link {color: #ff0000} 
a.three:visited {color: #0000ff} 
a.three:hover {background: #66ff66} 

a.four:link {color: #ff0000} 
a.four:visited {color: #0000ff} 
a.four:hover {font-family: monospace} 

a.five:link {color: #ff0000; text-decoration: none} 
a.five:visited {color: #0000ff; text-decoration: none} 
a.five:hover {text-decoration: underline} 
</style> 
</head> 

<body> 
<p>Mouse over the links to see them change layout.</p> 

<p><b>This link changes color</b></p> 
<p><b>This link changes font-size</b></p> 
<p><b>This link changes background-color</b></p> 
<p><b>This link changes font-family</b></p> 
<p><b>This link changes text-decoration</b></p> 
</body> 

</html>
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

让文字的第一行特殊化
<html> 
<head> 
<style type="text/css"> 
p:first-line  
{ 
color: #ff0000; 
font-variant: small-caps 
} 
</style> 
</head> 

<body> 
<p> 
You can use the :first-line pseudo-element to 
 add a special effect to the first line of a text! 
</p> 
</body> 

</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上一个：容器高度100%的绝对定位布局
下一个：闭合浮动元素超级简单的方法

更多图片编程知识: