CSS超链接和导航
2014-08-23 15:43 MADDOG520 阅读(373) 评论(0) 编辑 收藏 举报在CSS中设置超链接样式
之前我们在HTML中用<a>标签来表示超链接 通过点击跳转到另一个页面
在CSS中可以通过伪类选择对超链接访问时不同状态进行设定：
a:link：未被访问过的超链接样式
a:visited：被点击过的超链接样式
a:hover：鼠标指针经过超链接时的样式
a:active：当点击时超链接的样式
下面我们来做这张图片
当鼠标移到 每个单词 或 每个单词上面的绿条 时 单词和它上面的绿条就会发光
代码如下:
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html;charset=utf-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| .out{ | |
| width:100px; | |
| background-color:#000000; | |
| color:#ffffff; | |
| text-align:center; | |
| position: relative; | |
| margin:0 auto; | |
| top:100px; | |
| } | |
| ul,li{ | |
| margin:0px; | |
| padding:0px; | |
| list-style:none; | |
| } | |
| ul li div{ | |
| width:90px; | |
| height: 5px; | |
| background-color: #006F00; | |
| margin: 0 auto; | |
| } | |
| a{ | |
| color: #CCCCFF; | |
| font-weight:bold; | |
| text-decoration:none; | |
| } | |
| a:hover{ | |
| color: #ffffff; | |
| } | |
| a:hover div{ | |
| background-color:#00F100; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="out"> | |
| <ul class="inner"> | |
| <li> | |
| <a href="#"> | |
| <div ></div> | |
| Home | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <div ></div> | |
| contract Us | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <div ></div> | |
| web Dev | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <div ></div> | |
| web Design | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <div ></div> | |
| Map | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
