css练习

最新推荐文章于 2025-05-31 20:44:09 发布

ZhaoXuWen23

最新推荐文章于 2025-05-31 20:44:09 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/ZhaoXuWen23/article/details/113363402

本文主要探讨CSS在网页设计中的应用，通过一系列实战练习，帮助读者掌握布局技巧、选择器用法、响应式设计等核心概念，提升CSS技能水平。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    a:link{
        color: red;
    }{#初始值是红色#}
    a:visited {
        color: blue;
    }{#点击过时蓝色#}
    a:hover {
        color: green;
    }{#悬浮时绿色#}
    a:active {
                       color: yellow;
                   }
    {#点击是黄色#}
    .box{
        width: 100px;
                        }
    .top,.bottom{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
                        }

    .box:hover .top{
        background-color: red;
    }
    {#这种情况是点击box任何部分，。top都会变成红色#}

    .add:after{
        content: '欢迎加入前端学习';
        color:red;
    }
{#    在add后面添加文字#}
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="add">hello,yuan</div>
</body>
</html>

背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .span1{
            display: inline-block;

            width: 20px;
            height: 20px;
            background-image: url("123.png");
            background-position: -9px center;

        }
        .span2{
            display: inline-block;

            width: 20px;
            height: 20px;
            background-image: url("123.png");
            background-position: -33px center;

        }
        .span3{
            display: inline-block;

            width: 20px;
            height: 20px;
            background-image: url("123.png");
            background-position: -59px center;

        }
        .span4{
            display: inline-block;

            width: 20px;
            height: 20px;
            background-image: url("123.png");
            background-position: -85px center;

        }
        .span5{
            display: inline-block;

            width: 20px;
            height: 20px;
            background-image: url("123.png");
            background-position: -111px center;

        }
        {#通过 background-position: -111px center;来调节图片的位置#}
        {#块级标签不能设置在同一行，而内联标签不能够设置宽高等属性  display属性可以把内联标签变为块级标签，#}
        {#也可以把块级标签变为内联标签，也可以同时变为块级内联标签，这样这个问题就解决了#}
        {#可以就写一个background，然后在后面写上各种属性就可以#}

    </style>
</head>
<body>


    <span class="span1"></span>
    <span clas