超级链接的美化

1、伪类：同一个标签，用户不同的状态，就会有不同的样式。

一定要是如下的顺序，不能更改，更改后可能就会没有效果。

　　a:link{ color:red;}这个是从未访问的超级链接为红色

　　a:visited{color:blue;}这个是访问后的超级链接变为蓝色

　　a:hover{color:green;}这个是鼠标放上去的时候超链接的文字颜色变为绿色，是一种交互效果

　　a:active{color:black;}这个是鼠标点击但是不松开会变为黑色

2、工作中的超级链接要求用户点到某个区域就相当于点到超链接。所以，工作中a标签大都和li一样宽高，这样就需要将a标签变为块级元素。

<!DOCTYPE html>
<html>
  <head>
    <title>导航条超链接美化.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
       <style type="text/css">
           *{margin:0;padding:0;}
           .nav{
               width:960px;
               border:1px solid red;
               margin:100px auto;
               overflow:hidden;
           }
           .nav ul{
               list-style:none;
           }
           .nav ul li{
               width:120px;<!--设置120px正好是div盒子的宽度，用li标签盒子的宽度去撑起间隔-->
               float:left;
           }
           .nav ul li a{
               text-decoration:none;
               display:block;
               width:120px;
               height:40px;
               text-align:center;
               line-height:40px;
           }
           .nav ul li a:link{
               color:red;//这个红色为什么出不来啊？
               
           }
           .nav ul li a:visited{
               color:blue;
           }
           .nav ul li a:hover{
               background:purple;
               color:yellow;
           }
       </style>

  </head>
  
  <body>
      <div class="nav">
          <ul>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
              <li><a href="#">网站导航</a></li>
          </ul>
      </div>
  </body>
</html>

posted @ 2016-07-27 21:03  苏羽垄  阅读(1499)  评论(0)  编辑  收藏  举报