灵虚御风
醉饮千觞不知愁，忘川来生空余恨！

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 
46.cssday2
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式操作:设置长宽</title>
    <style>
        div{
            height: 50px;
            width: 100px;
        }
        /*给行内标签设置长宽没有任何影响*/
        span{
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
01 样式操作.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        /*Arial:宋体 sans-serif 无衬线*/
        p{
            font-family: "Microsoft Yahei","微软雅黑","Arial",sans-serif;
            font-size: 24px;
            font-weight: lighter;
            color: red;
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/
            /*加法三原色;七彩灯带;彩色;三原色;红绿蓝*/
            color: rgba(0,0,0,1.0);
            /*最后一个参数只能调节颜色的透明度 不能调节文本*/
        }
    </style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。</p>
</body>
</html>
02 字体属性.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字属性</title>
    <style>
        /*text-indent:首行缩进 */
        p{
            font-size: 16px;
            text-indent: 32px;
            /*align 靠边排列整齐*/
            /*text-align: left;*/
            /*text-align: right;*/
            text-align: justify;
            /*justify 仅对齐*/

            /*text-decoration: underline;*/
            /*text-decoration: underline 文本装饰:下划线 overline 上划线 line-through 线路贯通 中划线*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
        }
        a{
            text-decoration: none;
            color: orange;
        }
        a:hover{
            color: blue;
        }
    </style>
</head>
<body>
<p>属性规定元素中的文本的水平对齐方式。</p>
<s>属性规定元素中的文本的水平对齐方式。</s>
<a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a>
</body>
</html>
03文字属性.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        p{
            color: white;
            background-color: black;
        }
        div{
            /*background-color: orange;*/
            height: 500px;
            width: 500px;
            /*background-image: url("111.png");*/
            /*!*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*! image 图像*/
            /*background-repeat: repeat-x 背景重复 : 重复 x 横向 y:纵向*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            /*background-position: 10px 30px;*/
            /*!*第一个参数调节的是左右  第二个参数调节的上下*!*/
            background: orange url("111.png") no-repeat center center;

        }
    </style>
</head>
<body>
<p>背景图片平铺排满整个网页</p>
<div>

</div>
</body>
</html>
04 背景属性.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片示例</title>
    <style>
        .c1{
            height: 400px;
            background-color: red;
        }
        .c2{
            height: 400px;
            background-color: green;
        }
        .c3{
            height: 500px;
            background: url("111.png");
            background-attachment: fixed;
            /*background-attachment: fixed 背景附件：固定*/
        }
        .c4{
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
05 背景图片示例.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div{
            /*border-color: red;*/
            /*border-style: solid;*/
            /*solid 固体 实心的*/
            /*border-width: 1px;*/

            /*border: 3px solid black;*/
            /*border: solid 3px blue;*/
            /*dashed 虚线*/
            border: dashed green 3px;
        }
        p{
            border-left: 3px solid red;
            border-bottom: 5px dotted green;
            /*bottom 下 top 上*/
            border-top: 1px dashed orchid;
            border-right: 10px solid dimgrey;
        }
    </style>
</head>
<body>
    <div>
    使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
</div>
<p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p>
</body>
</html>
06 边框.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画圆</title>
    <style>
        div{
            height: 400px;
            width: 400px;
            background: red;
            border: 3px solid black;
            border-radius: 50%;
            /*radius 半径*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
07 画圆.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        body{
            /*margin-top: 0;*/
            /*margin-right: 0;*/
            /*margin-bottom: 0;*/
            /*margin-left: 0;*/
            /*!* 上下10px   左右20px*!*/
            /*margin: 10px 20px;*/
            /*margin: 10px 20px 30px;  !* 上   左右   下*!*/
            /*margin: 10px 20px 30px 40px;  !* 上 右  下 左 顺时针*!*/
            margin: 0;
            /*margin 边缘*/
            /*!*上下左右全为0*!*/
        }
        .c1 {
            height: 400px;
            width: 400px;
            border: 3px solid black;
        }
        .c2{
            background-color: green;
            height: 50px;
            width: 50px;
            border: 3px solid red;
            /*margin: auto 0;*/
        }
        p{
            border: 3px solid;
            /*padding-top: 20px;*/
            /*padding-left: 10px;*/
            /*padding-bottom: 30px;*/
            /*padding-right: 50px;*/
            /*text-align: right;*/

            padding: 10px; /* padding 同样支持1 2 3 4个参数  效果同margin*/
        }
    </style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2"></div>-->
<p>我们换个p</p>
<!--<p>我们换个p</p>-->

<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>
08 盒子模型.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        body{
            margin: 0;
        }
        #d1{
            border: 3px solid black;
        }
        .c1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
        .clearfix:after{
            content: "";
            display: block;
            /*display显示: block块*/
            /*clear: both 清除浮动*/
            clear: both;
            /* 左右两边都不能有浮动的元素*/
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>

</div>
</body>
</html>
09 浮动.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用浮动左右布局</title>
    <style>
        body{
            margin: 0;
        }
        .blog-left{
            float: left;
            width: 20%;
            height: 1000px;
            background-color: #4e4e4e;
        }
        .blog-right{
            float: right;
            width: 80%;
            height: 1000px;
            background-color: #eeeeee;
        }

    </style>
</head>
<body>
<div class="blog-left"></div>
<div class="blog-right">
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</body>
</html>
10 利用浮动实现左右布局.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出</title>
    <style>
        div{
            height: 50px;
            width: 50px;
            border: 3px solid red;
            overflow: hidden;
            /*overflow 溢出: hidden 隐藏;*/
        }
    </style>
</head>
<body>
<div>
    <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p>
</div>
</body>
</html>
11 溢出.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像</title>
    <style>
        body{
            margin: 0;
            background-color: darkgray;
        }
        div{
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;

        }
        img{
            /*max-width: 100%;*/
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <img src="111.png" alt="">
</div>
</body>
</html>
12 圆形头像实例.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        body {
            margin: 0;
        }
        /*.c1{*/
            /*height: 50px;*/
            /*width: 50px;*/
            /*background-color: green;*/
            /*top: 100px;*/
            /*left: 100px;*/
            /*position: static;*/
            /*!*!*默认是静态的 不能动位置*!*!*!*/
            /*!*position: relative;*!*/
            /*!*!*相对定位*!*!*!*!*/
        /*}*/
        .c2{
            height: 200px;
            width: 200px;
            background-color: red;
            top: 50px;
            left: 50px;
            position: absolute;
            /*!*绝对定位*!*!*!*/
        }
        /* fixed 相对页面静止 static 相对内容静止 */
        .c1 {
            border: 3px solid red;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 20px;
            bottom: 50px;
        }
    </style>
</head>
<body>
<!--<div class="c1">-->
    <!--<div class="c2"></div>-->
<!--</div>-->
<div class="c1">
    回到顶部
</div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: black"></div>
<div style="height: 1000px;background-color: blue"></div>
</body>
</html>
13 定位.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证是否脱离文档流</title>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<!--<div style="background-color: red;height: 50px;width: 50px;position: relative;left: 50px">relative相对定位</div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px"></div>-->

<!--<div style="background-color: red;height: 50px;width: 50px;position: relative">relative相对定位</div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px;position: absolute;left: 50px">absolute绝对定位</div>-->
<!--<div style="background-color: orchid;height: 50px;width: 50px"></div>-->


<div style="background-color: red;height: 50px;width: 50px;"></div>
<div style="background-color: blue;height: 50px;width: 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red">fixed相对窗口固定</div>
<div style="background-color: orchid;height: 50px;width: 50px"></div>
</body>
</html>
14 验证是否脱离文档流.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        body{
            margin: 0;
        }
        .cover{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 999;
        }
        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }
        /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
    </style>
</head>
<body>
div>我是最底层的</div>
<div class="cover"></div>
<div class="modal">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="text" id="d2"></label></p>
    <input type="submit">
</body>
</html>
15 模态框.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度比较</title>
    <style>
         .c1 {
             background-color: rgba(128, 128, 128, 0.9);
         }
         /*opacity 透明度 数值越小越模糊*/
        .c2{
            opacity: 0.5;
            background-color: rgb(128,128,128);
        }
    </style>
</head>
<body>
<p class="c1">111</p>
<p class="c2">222</p>
</body>
</html>
16 透明度比较.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除ul标签丑陋部分</title>
    <style>
        ul{
            list-style-type: none;
            padding: 0;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="">哈哈1</a></li>
    <li><a href="">哈哈2</a></li>
    <li><a href="">哈哈3</a></li>
</ul>
</body>
</html>
17 去除ul标签丑陋部分.html
复制代码

111.png

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="blog-left">
    <div class="blog-avatar">
        <img src="111.png" alt="">
    </div>
    <div class="blog-title">
        <p>Jason的博客</p>
    </div>
    <div class="blog-info">
        <p>这个人很帅,帅的什么都没有留下!</p>
    </div>
    <div class="blog-link">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li>
        </ul>
    </div>
    <div class="blog-tag">
        <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#Golang</a></li>
        </ul>
    </div>
</div>
<div class="blog-right">
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019-5-29</span>
        </div>
        <div class="article-body">
            <p>重金求子,事成500万答谢并赠送大别墅一套!</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>

    </div>
</div>

</body>
</html>
cnblogs.html
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        #d1{
            display: none;
            /*标签不显示 并且也不再占用位置*!*/
            /*visibility: hidden;*/
            /** 标签不显示 但是位置还在*!*!*/
        }
        span{
            display: inline-block;
             /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/
            /*height: 400px;*/
            /*width: 400px;*/
            background-color: red;
            border: solid 3px black;
        }
        .c1 {
            height: 50px;
            width: 50px;
            background-color: red;
            /*展览;*/
            display: inline;
            /*inline 内联*/
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: green;
            display: inline;
        }
    </style>
</head>
<body>
<p id="d1">123</p>
<p>123</p>
<span>span1</span>
<span>span2</span>
<div class="c1">div1</div>
<div class="c2">div2</div>
</body>
</html>
display属性.html
复制代码
复制代码
body {
    margin: 0;
    background-color: #eeeeee;
}
a {
    text-decoration: none;
    /*decoration装饰*/
}
ul {
    list-style-type: none;
    padding-left: 0;
}

.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color: #4e4e4e;
}

.blog-avatar {
    width: 200px;
    height: 200px;
    border: 5px solid white;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}

.blog-avatar img {
    max-width: 100%;
}

.blog-title,.blog-info {
    color: darkgrey;
    text-align: center;
}

.blog-link a,.blog-tag a{
    color: darkgrey;
}

.blog-link a:hover,.blog-tag a:hover{
    color: white;
}

.blog-link,.blog-tag {
    margin: 100px auto;
}



ul li {
    text-align: center;
    margin: 10px auto;
    font-size: 24px;
}




.blog-right {
    float: right;

    width: 80%;
    height: 1000px;
}

.article-list {
    background-color: white;
    margin: 20px 40px 20px 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.article-title {
    border-left: 5px solid red;
    text-indent: 16px;
}

.title {
    font-size: 36px;
}
.date {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    font-weight: bold;
}

.article-body {
    text-indent: 24px;
    font-size: 16px;
    border-bottom: 1px solid black;
}

.article-bottom {
    padding: 15px 20px;
}
mycss.css
复制代码

 

 

复制代码
css day2

2.如何调节样式
    两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)
    纸盒的厚度(边框)    称之为边框(border)
    内部的物品到盒子的距离(内部文本与边框的距离)  称之为 内边距(padding)
    物品本身的大小(文本大小)   称之为内容(content)

    浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说
    也不再占用原来的位置

    浮动的元素 会造成父标签塌陷

    clear  清除浮动带来的负面影响(父标签塌陷)

    定位：
        所有的标签默认都是静态的 无法直接调节位置
        你需要先将其设置成可定位状态
        1.相对定位
            相对于标签自身原来的位置
        2.绝对定位
            相对于已经定位过的父标签
            但只给你一个父标签的长宽 让你做定位
        3.固定定位
            相对于浏览器窗口 固定在某个位置

    浏览器会优先展示文本内容

        脱离文档流
            1.浮动的元素都是脱离文档流的
            2.绝对定位是脱离文档流的
            3.固定定位也是脱离文档流的
        不脱离文档流
            1.相对定位不脱离文档流

    模态框

    opacity   即可以调节颜色透明度也可以调文本透明度
    属性操作:
        字体属性:
            color  字体颜色
            font-size  字体大小(24px)
            font-weight  字重
            font-family  字体样式
        文字属性
            text-align:center/left/right/justify
            text-decoration装饰:none/underline/overline/line-through
            text-indent缩进:32px
        背景属性
            颜色：
                red
                #4e4e4e
                rgb(128,128,128)
                RGB颜色值 输入不限制格式,只要包含3个合格的整数即可
                rgba(255,0,0,0.5);} 相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,
                rgba(128,128,128,0.5)
            backgroud-color
            backgroud-image
            属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
                默认是平铺满这个区域
                浏览器窗口可以把它当成一个三维坐标系
                    横X
                    竖Y
                        指向用户的Z
                backgroud-repeat重复:no-repeat/repeat-x/repeat-y
                backgroud-position位置:center center 第一个上下 第二个左右

                支持简写
                    backgroud:red url('') no-repeat center center

                背景图片应用场景
                    所有浏览器你能够看到的都是走网路请求传输过来的
                    当你的网站需要用到很多小图标的时候，可以将所有的小图片放在一张
                    图片上，然后通过背景图片的位置来控制显示哪一个小图片
                    从而节省加载资源

            边框属性
                border-style:solid/dotted -组成的虚线/dashed .组成的虚线
                border-color:red
                border-width:5px

                支持简写
                border:3px solid red;

                border-top/left/right/bottom



            盒子模型
                以快递盒为例
                margin:外边距(标签与标签之间的距离)
                border:边框
                padding:内填充 内边距
                content:文本内容


                margin-top/left/right/bottom


                margin:1  2   3   4
                padding:1   2  3   4

            浮动
                float
                浮动是脱离文档流的 也不再遵循块儿级独占一行的特点
                浮动主要用于页面布局


                浮动会带来父标签塌陷的问题


                clear  清除浮动带来的影响
                clear:left/right/both

                display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素，此元素前后会带有换行符
                .clearfix:after{
                    content:''
                    display:block;
                    clear:both
                }
                哪里塌陷 就给谁加一个clearfix类属性即可
                如果给当前标签加没有效果 那么你可以考虑给目标标签外层
                再套一个div 然后给这个新的div加


            是否脱离文档流
                脱离
                    1.浮动
                    2.绝对定位abs
                    3.固定定位fixed

                不脱离
                    1.相对定位rela



            定位
                所有的标签默认都是静态的static 没有定位一说
                要想改变标签位置  需要先改变标签位置状态
                position:static

                1.相对定位  relative
                2.绝对定位  absolute
                3.固定定位    fixed

            溢出属性
                overflow:hidden,scroll,auto





            z-index
                模态框(百度登录页面)

            opacity
                透明度
总结
复制代码

 

posted on   没有如果,只看将来  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
· 49.jq day2
· 54.源码解析,模板语法,单表查询
· 关系选择器、属性选择器、伪类、伪元素选择器、分组与嵌套、选择器的优先级、宽度高度、字体、属性(text、background、border、display)
· 寒假打卡……
· 寒假打卡day7
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
 
Powered by:
博客园
Copyright © 2025 没有如果,只看将来
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示