首页 > 代码库 > CSS超链接和导航

CSS超链接和导航

2024-07-19 02:40:09   222人阅读

在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="http://www.mamicode.com/#">
 <div ></div>
 Home
 </a>
 </li>
 <li>
 <a href="http://www.mamicode.com/#">
 <div ></div>
 contract Us
 </a>
  
 </li>
 <li>
 <a href="http://www.mamicode.com/#">
 <div ></div>
 web Dev
 </a>
 </li>
 <li>
 <a href="http://www.mamicode.com/#">
 <div ></div>
 web Design
 </a>
  
 </li>
 <li>
 <a href="http://www.mamicode.com/#">
 <div ></div>
 Map
 </a>
  
 </li>
  
 </ul>
  
 </div>
  
 </body>
 </html>

CSS超链接和导航


联系
我们