CSS渡一教程学习笔记(十二)--伪元素

最新推荐文章于 2022-11-03 17:13:16 发布

zhou_shadow

最新推荐文章于 2022-11-03 17:13:16 发布

阅读量335

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/zhou_shadow/article/details/91990982

版权

css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了CSS伪元素的应用，包括如何利用伪元素解决浮动模型中的父级包住浮动元素问题，以及如何运用浮动实现ul-li标题设置和报纸布局。通过实例代码展示了伪元素的使用方法及其在页面布局中的效果。

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

伪元素存在于任意一个HTML标签里面。可以通过CSS显示展示出来。任意一个标签元素在创建时都带有两个伪元素分别为before和after,伪元素可以和正常元素一起使用,但是伪元素没有正常的元素结构。伪元素结构上存在，但没有写在HTML代码里面，可以被css正常操作，但是没有HTML标签结构，也即是可以当成HTML元素，但是没有元素结构，也就是所谓“伪元素”。其中伪类都是行级(内联)元素。类似于span等display:inline等元素，可以把他当成一个普通行级元素使用，只是只能用样式先选中，再进行操作。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        span::before{
            /*伪元素必定存在的一个属性，content:""必须存在，即使什么都不添加*/
            content:"伪元素before";
            background-color:yellow;
            /*将行级元素转为内联块元素*/
            display:inline-block;
            width:200px;
            height:200px;
        }
        span::after{
            content:"伪元素after"


        }
    </style>
</head>
<body>
<span>
<!--逻辑上存在before,如果不操作，则不可见，如果使用CSS操作出来，则可以添加修改一些css-->
    正常元素
<!--逻辑上存在after-->
</span>
</body>
</html>

结果：
在这里插入图片描述

利用伪元素来解决浮动模型-父级包住浮动元素的问题

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .container{
            border:1px solid #000000;
        }
        .content {
            float:left;
            width: 50px;
            height: 50px;
            background-color:#FFCCEE;
        }
        .container::after{
            content:'';
            display:block;
            clear:both;
        }
        span{
            position:absolute;
            width:200px;
            height:200px;
            background-color:#EFFFFF;
        }
    </style>
</head>
<!--notice:
凡是设置了position:absolute;
flaot:left/right的块级元素。
系统内部会自动将该块级元素转化成
display:inline-block;
-->
<body>
<div class="container">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
</div>
<br>
<br>
<br>
<br>
<span>123456789</span>
</body>
</html>

结果：
在这里插入图片描述

利用浮动完成ul-li标题设置

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用Ul-li完成标题设置</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            color:orangered;
            font-family: Arial;

        }

        .nav{
            list-style:none;
        }
        .nav .nav-item{
            float:left;
            height:30px;
            margin:0 5px;
            line-height: 30px;
            text-align:center;
        }
        .nav .nav-item a {
            padding:0 5px;
            text-decoration:none;
            font-weight:bold;
            height:30px;
            display:inline-block;
        }
        .nav .nav-item a:hover {
            padding:0 5px;
            text-decoration:none;
            font-weight:bold;
            color:white;
            background-color:orangered;
            height:30px;
            display:block;
            border-radius:15px;
        }
        /*清除浮动流*/
        .nav::after{
            content:"";
            display:block;
            clear:both;
        }

    </style>
</head>
<body>
<ul class="nav">
    <li class="nav-item">
        <a href="#">淘宝</a>
    </li>
    <li class="nav-item">
        <a href="#">天猫超市</a>
    </li>
    <li class="nav-item">
        <a href="#">京东超市</a>
    </li>
    <li class="nav-item">
        <a href="#">拼多多</a>
    </li>
    <li class="nav-item">
        <a href="#">网易优选</a>
    </li>
</ul>
555555555555555555555555
</body>
</html>

在这里插入图片描述

利用浮动实现报纸布局

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用浮动实现报纸布局</title>
</head>
<style>
    img{
        width:100px;
        float:left;
    }
</style>
<body>
<div>
<img src="finance.jpg">
    1996年出演电视剧《女强人》，1998年主演电视剧《还珠格格》获得广泛关注，2002年主演电影《一见钟情》涉足影坛 [1]
    。2004年凭借冯小刚执导的电影《手机》获得第27届大众电影百花奖最佳女主角。2005年发行首张个人专辑《刚刚开始》。
    2007年凭借电影《心中有鬼》获得第44届台湾电影金马奖最佳女配角； [2]  同年主演的电影《苹果》
    入围第57届柏林国际电影节主竞赛单元，获得第4届欧亚国际电影节最佳女演员。 [3]  2010年主演李玉执导的电影
    《观音山》获得第23届东京国际电影节最佳女演员，该片亦获东京国际电影节最佳艺术贡献奖。 [4-5]
    2011年担任第24届东京国际电影节评委。
    2013年获好莱坞报道年度最佳国际艺人奖，
    [6]  2013-2017年连续五年蝉联福布斯中国名人榜榜首。
    [7]  2016年主演电影《我不是潘金莲》获得第64届圣塞巴斯蒂安国际电影节最佳女演员，
    成为获得两次国际A类电影节最佳女演员的华人演员， [8]
    该片亦获圣塞巴斯蒂安国际电影节最佳影片金贝壳奖。 [9]
    2017年登上美国《时代周刊》封面并上榜影响世界的100人，
    担任第70届戛纳国际电影节评委。
    同年凭借《我不是潘金莲》获得第31届中国电影金鸡奖最佳女主角、
    [10]  第11届亚洲电影大奖最佳女主角 及第8届中国电影导演协会年度女演员。
</div>
</body>
</html>

结果：
在这里插入图片描述