a标签——伪类选择器练习

最新推荐文章于 2022-11-23 18:55:10 发布

从一至二

最新推荐文章于 2022-11-23 18:55:10 发布

阅读量283

点赞数 1

分类专栏： html学习记录文章标签： HTML

本文链接：https://blog.csdn.net/weixin_38158043/article/details/83019645

版权

html学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签伪类选择器——练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width:600px;
            height: 40px;
            background-color: pink;
            margin: 100px auto;
        }
        ul li{
            list-style: none;
            width: 120px;
            height: 40px;
            float: left;
            background-color:skyblue;
            text-align: center;
            line-height: 40px;
        }

        /*在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面*/

        /*在企业中和a标签盒子相关的属性都写在标签选择器中（显示模式、宽度、高度）*/

        /*在企业开发中和a标签文字、背景相关的都写在伪类选择器中*/

        ul li a{
            width: 120px;
            height: 40px;
            display: inline-block;
        }

        ul li a:link{
            color:brown;
            text-decoration: none;
        }
        ul li a:hover{
            color: yellow;
            background-color: pink;
        }
        ul li a:active{
            color: deeppink;
        }

    </style>
</head>
<body>

<ul>
    <li><a href="#">等你下课</a></li>
    <li><a href="#">告白气球</a></li>
    <li><a href="#">牛仔很忙</a></li>
    <li><a href="#">魔术先生</a></li>
    <li><a href="#">乔克叔叔</a></li>

</ul>
</body>
</html>

从一至二

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a标签——伪类选择器练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;a标签伪类选择器——练习&lt;/title&gt; &lt;style&gt; *{ mar
复制链接

扫一扫