css基础-链接

最新推荐文章于 2024-02-11 21:06:24 发布

netweng

最新推荐文章于 2024-02-11 21:06:24 发布

阅读量341

点赞数

分类专栏： css基础笔记

本文链接：https://blog.csdn.net/netweng/article/details/44812273

版权

css基础笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

netweng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础-链接

1.首先，是这个章节基本拿来实现样式表的html标记 Introducing the bandTo find out more about members ofThe Dead Goodsplease select the appropriate person for a fulll profile. Simon Collison John L
复制链接

扫一扫