CSS选择器典型应用

最新推荐文章于 2022-11-21 13:58:20 发布

Lucivita

最新推荐文章于 2022-11-21 13:58:20 发布

阅读量373

点赞数

分类专栏： Web前端 html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_41568313/article/details/112847496

版权

1. 自己编写案例解释如何用::after伪元素清除浮动

1.1消除浮动前

<style>
    .main{
        background-color: pink;
        width: 300px;
    }
    .main>div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        float: left;
    }
</style>
</head>
<body>
    <div class="main">
        我是大盒子
      <div class="one">我是盒子1</div>
      <div class="two">我是盒子2</div>
    </div>
    
</body>

效果图：

1.2消除浮动后

.main::after{
        content: "";
        display: block;
        clear: both;
}

效果图：

2 .通过before伪元素来实现如下效果图：

2,1代码：

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1398862_895g8rzof8l.css">
    <style>
        .main {
            width: 400px;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
            position: relative;
        }
        .main input {
            text-indent: 20px;
            border: 1px solid #d8d8d8;
            border-radius: 5px;
            width: 170px;
            height: 30px;
        }
        .user-icon:before {
            content: "";
            background-image: url(img/user-icon.png);
            width: 18px;
            height: 18px;
            display: block;
            background-size: 100%;
            position: absolute;
            top: 78px;
            left: 144px;
        }
        .psd-icon::before {
            content: "";
            background-image: url(img/psd-icon.png);
            width: 18px;
            height: 18px;
            display: blo

最低0.47元/天解锁文章

Lucivita

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器典型应用

1. 自己编写案例解释如何用::after伪元素清除浮动1.1消除浮动前<style> .main{ background-color: pink; width: 300px; } .main>div{ width: 100px; height: 100px; border: 1px solid red; float: left; }</s.
复制链接

扫一扫

专栏目录