伪类实例1

伪类实例

         效果如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    </head>
    <body>
        <div class="toubu">
            <a href="#">音乐</a>
            <a href="#">网页</a>
            <a href="#">新闻</a>
            <a href="#">视频</a>
        </div>
    </body>
</html>

css 如下：
* {
    padding: o0px;
    margin: 0px;
}
.toubu {
    width:100%;
    height: 30px;
    background: pink;
    text-align: center;
    line-height: 30px;
}

a {
    color:red;
    padding:20px;
    text-decoration: none;
}
a:hover {
    padding: 5px;
    border: 1px solid blueviolet;
    background-color: red;
    color:blue;
    
}
a:visited {
    color:green;
}

 

posted @ 2017-12-28 13:51  借风拥你  阅读(131)  评论(0)  编辑  收藏  举报