css补充

作者：weixin_40725706 | 2024-03-27 10:04:08

踩

css补充


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1 {
            color: red;
            font-size: 16px;
            border: 1px solid red;
 
        }
 
        .c1:hover {
            color: green;
            font-size: 40px;
            border: 5px solid green;
        }
 
        .c2 {
            color: red;
            font-size: 16px;
            border: 1px solid red;
 
        }
 
        .download {
            display: none;
        }
 
        .c2:hover .download {
            display: block;
        }
    </style>
</head>
 
<body>
    <div class="c1">hello world</div>
    <div class="c2">
        <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/01/0F/ChMlWVXK9e6INH9pAAWhh3ahSqQAAHsHgGHZMgABaGf864.jpg"
            height="100px" width="100px" alt="">
        <div class="download">
            <img src="	https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
        </div>
    </div>
</body>
 
</html>

一些影藏的东西可以用鼠标悬浮显示


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after {
            content: "yysd";
        }
    </style>
</head>
 
<body>
    <div class="c1">huakka</div>
    <div class="c1">balala</div>
</body>
 
</html>


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
        
        .item {
            float: left;
        }
 
        .bg {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class=" bg">
 
        <div class="clearfix">
            <div class="item">yyyyy</div>
            <div class="item">xxx</div>
            <div class="item"><img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt=""></div>
        </div>
    </div>
</body>
 
</html>


 .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
 
这个css伪类选择器直接在那些浮动标签后面加了块级空格，并clear：both，和那个直接div clear:both一样


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid black;
 
            right: 10px;
            bottom: 50px;
        }
    </style>
</head>
 
<body>
 
    <div style="height: 10000px;background-color: #5f5750">
        <div class="back"></div>
 
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
        <img src="https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg"
            alt="">
 
    </div>
 
 
 
 
</body>
 
</html>


<div class="back"></div>
这个位置可以随便放


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
 
        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;
 
            left: 0;
            right: 0;
            margin: 0 auto;
 
            top: 200px;
 
            z-index: 1000;
        }
 
        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 1;
            z-index: 999;
        }
    </style>
</head>
 
<body>
 
 
    <div style="height: 1000px" color="white">asdfasdfasd</div>
 
 
    <div class="mask"></div>
    <div class="dialog"></div>
 
 
</body>
 
</html>

z-index属性值越大就在显示层上层，opacity透明度为1时会让mask让背景全黑，看不到文字


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
 
            position: relative;
        }
 
        .c1 .c2 {
            height: 59px;
            width: 59px;
            background-color: #00FF7F;
 
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    </style>
</head>
 
<body>
    <div class="c1">
 
        <div class="c2"></div>
 
    </div>
</body>
 
</html>

这个ralative就是给这个标签内的标签提供相对定位参照

id选择器，标签选择器，类选择器，后代选择，属性选择，伪类选择都可以一直嵌套下去

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/323464