css基础-链接

来源：互联网发布：在淘宝开店和天猫开店编辑：程序博客网时间：2024/06/04 19:37

1.首先，是这个章节基本拿来实现样式表的html标记

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><h2>Introducing the band</h2><p>To find out more about members of<a href="#">The Dead Goods</a></p>please select the appropriate person for a fulll profile.<ul>    <li><a href="#">Simon Collison</a> </li>    <li><a href="#">John Lenon</a> </li>    <li><a href="#">Jimi Hendrix</a> </li>    <li><a href="#">JeffBuckley</a> </li>    <li><a href="#">Kurt Cobain</a> </li>    <li><a href="#">Janis Joplin</a> </li>    <li><a href="#">Keith Moon</a> </li></ul></body></html>

2.链接的样式主要是通过处理伪类来设计出不同风格的。伪类分别为：link: active: hover: visited:

 a:link{            /*未被访问的链接*/            color: #f00;        }        a:visited{            /*访问过后的链接*/            color: #999;        }        a:hover{            /*鼠标置于该链接上时*/            color:#333        }        a:active{            /*点击该链接时*/            color:#000;        }

*伪类的防止顺序要遵照 LoVe HaTe来放置。这样才能起到作用。

3.该变链接的文本样式：text-decoration

设置边框：border:

        a:link{            /*未被访问的链接*/            text-decoration: none;            color: #f00;           border:1px solid #333;            background: #333333;            padding: 2px;            line-height: 150%;        }

4.将链接与列表相结合

<pre name="code" class="html"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        ul{            list-style-type: none;            margin: 5px;            padding: 2px;            border: 1px solid #333;            width:160px;            font:bold 12px 'Lucida Grande',Verdana,sans-serif;        }        li{            background:#dddddd;            margin: 0;            border-left: 1px solid #ffffff;            border-top: 1px solid #ffffff;            border-right: 1px solid #aaaaaa;            border-bottom: 1px solid #666666;        }        ul a:visited,ul a:hover,ul a:link,ul a:visited{            display: block;            padding: 2px 10px;            text-decoration: none;        }        ul a:link{            color: #f00;        }        ul a:visited{            color:#666666;        }        ul a:hover{            color: #f00000;            background: #ffffff;        }        ul a:active{            color: #333;        }    </style></head><body><ul id="drink1">    <li><a href="#"> Drinnks Menu</a></li>    <li><a href="#">Beer</a></li>    <li><a href="#">Spirits</a></li>    <li><a href="#">Cola</a></li>    <li><a href="#">Lemonade</a></li>    <li><a href="#">Tea</a></li>    <li><a href="#">Coffee</a></li></ul></body></html>

0 0