CSS进阶

最新推荐文章于 2024-10-09 20:10:15 发布
最新推荐文章于 2024-10-09 20:10:15 发布
阅读量37 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaowenzheng/article/details/134228466
版权

选择器

后代

<!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>
        /* 父标签 后代标签{} */
        div p{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <p>P</p>
    <div>
        <p>div中的P</p>
    </div>
</body>
</html>

子代

<!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>
        div>p>a{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">div中的a</a>
        <p>
            <a href="#">div中的p中的a</a>
        </p>
    </div>
</body>
</html>

并集

<!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>
        p,
        div,
        h1,
        h2{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <h1>h1</h1>
    <h2>h2</h2>
</body>
</html>

交集

<!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>
        p.abc{
            color: aqua;
        }
    </style>
</head>
<body>
    <p class="abc">带有class的p</p>
    <p>pp</p>
    <div class="abc">带有class的div</div>
</body>
</html>

伪类

<!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>
        /* 鼠标悬停时变色 */
        a:hover{
            color: rgb(14, 14, 14);
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
    <!-- 任何标签都可以添加hover伪类 -->
</body>
</html>

背景

背景色

<!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>
        div{
            background-color: aqua;
            /* background-color: #ccc; */
            /* background-color: rgba(red, green, blue, alpha); */
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

背景图

<!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>
        div{
            width: 300px;
            height: 400px;
            background-image: url(../微信图片_20230926210222.jpg);
            background-repeat: repeat;
            /* repeat平铺 no-repeat不平铺 repeat-x沿X轴平埔 repeat-y沿Y轴平铺 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景位置

<!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>
        div{
            width: 1000px;
            height: 1000px;
            background-image: url(../微信图片_20230926210222.jpg);
            background-repeat:no-repeat;
            /* repeat平铺 no-repeat不平铺 repeat-x沿X轴平埔 repeat-y沿Y轴平铺 */
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景属性连写

<!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>
        div{
            width: 800px;
            height: 800px;
            /* 推荐：background:color image repeat position */
            background: #000 url(../背景位置.png) no-repeat left top;
            /* 背景图位置如果用英文字母表示时，可以颠倒顺序 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示模式

块级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 独占一行 -->
    <!-- 宽度默认是父元素宽度，高度由内容撑开 -->
    <!-- 可以设置宽高 -->
    <div>div</div>
    <p>ppp</p>
    <!-- 例如div、p、h系列、ul、li等标签 -->
</body>
</html>

行内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一行可以显示多个 -->
    <!-- 宽度和高度默认由内容撑开 -->
    <!-- 不可以设置宽高，设置了也没用 -->
    <a href="#">空链接1</a>
    <a href="#">空链接2</a>
    <!-- 例如a、span、b、u、i、s等标签 -->
</body>
</html>

行内块

<!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>
        img{
            width: 250px;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 一行可以显示多个 -->
    <!-- 可以设置宽高 -->
    <img src="../微信图片_20230926210222.jpg" alt="">
    <img src="../微信图片_20230926210222.jpg" alt="">
    <!-- 例如input、textarea、button、select等 -->
    <!-- img标签有行内块元素特点，但在chrome调试工具内显示结果是inline -->
</body>
</html>

显示模式转换

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: black;
            color: white;
            /* 将块级元素转换为行内块 */
            display: inline-block;
            /* inline 转换为行内、block 转换为块级、inline-block 转换为行内块 */
        }
    </style>
</head>
<body>
    <div>123</div>
    <div>456</div>
</body>
</html>

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>
        div{
            color: aqua;
            color: blue;
        }
        .box{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

继承性

<!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>
        div{
            color: red;
            font-size: 30px;
            font-style: italic;
            height: 60px;
        }
    </style>
</head>
<body>
    <div> 
        div的标签
        <span>div的子标签</span>
        <!-- span标签内文字会继承和div相同的控制文字的style -->
        <!-- 不是控制文字的style不能继承 -->
    </div>
    <br>
    <br>
<div>
    <!-- 浏览器有默认样式时，继承会失效 -->
    <a href="#">超链接</a>
    <h1>h系列标签</h1>
    <!-- a标签的color会继承失效 -->
    <!-- h系列标签的font-size会继承失效 -->
</div>
</body>
</html>

盒子模型

介绍,实例及组成

<!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>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            border: 1px solid #000;
            /* 内边距 */
            padding: 30px;
            /* 外边距 */
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>内容填充</div>
    <div>内容填充</div>
</body>
</html>

优先级

内容区域的宽高设置

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>盒子内容区域</div>
</body>
</html>

边框

<!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>
        .div{
            width: 200px;
            height: 200px;
            background-color: palegreen;
            /* boder: 线条粗细 线条种类 线条颜色 */
            border: 1px solid #000;
            /* solid：实线、dashed虚线、dotted点线 */
            /* 这三种线使用的最多，其他种类的线通常用图片替代 */
        }
        /* 单方向设置，只给某个方向单独设置边框 */
        .dan{
            width: 200px;
            height: 200px;
            background-color: palegreen;
            /* border-方位名词 */
            border-left: #000 solid 1px;
            /* border会撑大盒子 */
        }
    </style>
</head>
<body>
    <div class="div">内容</div>
    <div class="dan">内容</div>
</body>
</html>

内边距

<!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>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 内边距也会撑大盒子 */
            /* 一个padding会增加四个方向的内边距 */
            padding: 50px;
            /* padding可以当复合属性使用 */

            /* 四值：上、右、下、左 */
            padding: 10px 20px 30px 40px;

            /* 三值：上、左右、下 */
            padding: 10px 40px 80px;

            /* 两值：上下、左右 */
            padding: 10px 40px;
        }
    </style>
</head>
<body>
    <div>实例文字</div>
</body>
</html>

内减模式

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: blueviolet;

            border: 10px black solid;
            padding: 10px;

            /* 使用box-sizing: border-box;后，盒子大小被固定下来，不会被撑大 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

外边距及其折叠现象

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;

            /* 外边距使用与内边距一样 */
            margin: auto;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

合并现象

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .one{
            margin-bottom: 50px;
        }
        .two{
            margin-top: 50px;
        }
    </style>
</head>
<!-- 垂直布局的块级元素，上下maargin会合并 -->
<!-- 取俩margin的最大值 -->
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

塌陷现象

<!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>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;

            overflow: hidden;
            /* 较为完美 */
        }

        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;

            /* display: inline-block; */
        }
        /* 互相嵌套的块级元素，子元素的margin-top会作用在父元素上 */
        /* 会导致父元素一起向下移动 */

        /* 给父元素设置border-top或padding-top 当父元素中没有border或padding时不可用  */
        /* 给父元素设置overflow：hidden */
        /* 转换为行内块元素 */
        /* 设置浮动 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

行内元素内外边距问题

<!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>
        span{
            margin: 100px;
            padding: 100px;
            /* 行内元素垂直位置需要用行高来改变 */
            line-height: 100px;
        }
    </style>
</head>
<!-- 行内元素的内外边距会部分不生效 -->
<!-- margin-top/bottom不生效 -->
<!-- padding-top/bottom不生效 -->
<body>
    <span>xpzn</span>
    <span>xpzn</span>
</body>
</html>

清除默认样式

<!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>
        /* 用通配符选择器清除即可 */
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

版心居中

<!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>
        div{
            width: 1000px;
            height: 300px;
            background-color: brown;

            /* 用margin: 0 auto;即可完成版心居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>版心</div>
</body>
</html>

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>
        /* 浮动标签默认顶部对齐 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;
        }
        .tow{
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 由于设置浮动，左右外边距不生效 */
            margin: 0 auto;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="tow">tow</div>
    <div class="three">three</div>
</body>
</html>
<!-- 浮动元素会脱离标准流，在标准流中不占位置 -->
<!-- 浮动元素比标准流元素高半个级别，可以覆盖标准流中的元素 -->
<!-- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 -->
<!-- 浮动在一行排列，可以设置宽高（行内块元素） -->

结构伪类

<!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>
        /* 第一个 */
        li:first-child{
            background-color: aqua;
        }
        /* 最后一个 */
        li:last-child{
            background-color: blue;
        }
        /* 第三个 */
        li:nth-child(3){
            background-color: blueviolet;
        }
        /* 倒数第三个 */
        li:nth-last-child(3){
            background-color: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>
<!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>
        /* 选中偶数 2n,even */
        li:nth-child(2n){
            background-color: aqua;
        }
        /* 选中奇数 */
        li:nth-child(2n+1){
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

伪元素

<!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>
        /* 伪元素默认为行内标签 */
        /* 伪元素中必须要加content */
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            content: '老鼠';
            color: blue;
            width: 100px;
            height: 100px;
            background-color: black;
        }
        .father::after{
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 通过CSS创建标签，用于装饰性的不重要的小图 -->
    
    <div class="father">爱</div>
</body>
</html>

清除浮动

<!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>
        .top{
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            margin: 0 auto;
            overflow: hidden;
        }
        .bottom{
            height: 200px;
            background-color: green;
        }
        .one{
            float: left;

            width: 190px;
            height: 300px;
            background-color: red;
        }
        .tow{
            float: right;

            width: 790px;
            height: 300px;
            background-color: blue;
        }
        /* .clearfix{
            clear:both
        } */


        /* .clearfix::after{
            content: '';
            伪元素添加的是行内元素，需转化为块级元素
            display: block;
            clear: both;

            补充代码，为了兼容性
            height: 0;
            visibility: hidden;
        } */


        /* .clearfix::before是为了解决外边距塌陷问题 */
        /* .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;
        } */



    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="one"></div>
        <div class="tow"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>
</html>
<!-- 清除浮动方法有 -->
<!-- 1、给父元素加高 -->
<!-- 2、额外标签法
        1）在父元素最后添加一个块级元素
        2）给添加的块级元素设置clear:both
    缺点是会在页面中添加额外的标签，会让HTML变得更加复杂 -->
<!-- 3、单伪元素清除法
        用伪元素代替了额外标签(项目中使用) -->
<!-- 4、双为元素清除法 -->
<!-- 5、给父元素设置 overflow:hidden -->

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>
</head>
<body>
    <p>
        <!-- css书写顺序：（浏览器执行效率会更高） -->
        <br>
        1、浮动/display
        <br>
        2、盒子模型：margin border padding 宽 高 背景色
        <br>
        3、文字样式
    </p>
</body>
</html>

小正的学习日记
关注
CSS进阶指引
09-25
接下来，我们将探讨CSS进阶中的一些关键知识点，包括BEM和OOCSS方法论、CSS预处理器的使用，以及代码组织和模块化的技巧。 BEM（Block, Element, Modifier）是一种CSS类命名方法论，旨在帮助开发人员创建可重用和...
CSS 进阶
A626796235的博客
01-07 434
CSS 进阶
css进阶
2301_77083521的博客
07-04 311
当使用 HTML 和 CSS 进行布局定位时，可以使用多种技术和属性来控制元素在页面中的位置和排列。以下是一些常用的布局定位技术和相关属性的介绍：1. 盒模型（Box Model）：每个 HTML 元素都被视为一个矩形的盒子，由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。调整这些属性可以控制盒子在页面中的大小和间距。2. 定位方式（Positioning）：使用`position`属性来定义元素的定位方式。
CSS进阶总结
m0_52336378的博客
06-17 594
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；/*内边距，上下左右，设置属性，会把盒子撑大,不能设置负数，负数就还原初始状态*//*融合行内于块级，用通俗的话讲，就是不独占一行的块级元素*//*复合样式：可以设置4个值，3个值，2个值，1个值*//*复合样式,可以设置4个值，3个值，2个值，1个值*//*复合样式：边框粗细1px，实线，红色线*//*外边距，可以设置负数，不会撑大盒子*//*第一种：右浮动*/
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 668
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
css进阶知识点速览
woshicaiji12138的博客
11-05 568
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2 {css}结果：在选择器1所找到标签的后代中注意：后代包括：儿子、孙子等等。
【CSS进阶】
zilin_taku的博客
07-06 369
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法： 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 代码： 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素 选择器语法： 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式作用：同时选择多组标签，设置同样的样式 选择器语法： 结果：找到选择器1和选择器2选中的标签，设置样式作用：选中页面同时满足多个选择器的标签 选择器语法： 结果：找到页面中既
前端开发学习——CSS进阶
2302_80311379的博客
08-04 1002
ul、li、dl、dt、dd、form、header、nav、footer等。1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等。属性值（颜色取值）：关键字、rgb表示法、rgba表示法、十六进制等。注意点：交集选择器中如果有标签选择器，一定要把标签选择器放在最前面。作用：根据HTML标签嵌套关系，选择父元素后代中满足条件的元素。作用：根据HTML标签嵌套关系，选择父元素子代中满足条件的元素。、b、u、i、s、strong、ins、em、del等。
css进阶学习
m0_63944966的博客
04-30 159
我们在看一个页面的时候常常会被页面里面炫酷的效果所震撼，而不少效果其实并不需要js来完成，我们学习的css也可以实现很多效果，尤其是css3。 1.多背景设置 标签里的背景颜色和背景图片常常会出现互相覆盖的情况，但其实背景图片可以不止设置一张图，可以多图片设置，而且图片之前的位置是互不影响的，具体代码如下，像这样就是设置了三个背景图，而url里面就是图片的位置，但是这些图不要太大，不然也是会相互重叠，这样的多背景适合把一些小图标加进背景里面。 background: url("./img/商城.p
HTML和CSS进阶
ZbyFt
07-07 538
HTML和CSS进阶1.内外边距padding(内边距):  用于控制内容与边框之间的距离例如，padding:10px，20px;  顺时针，可以这样理解，鼠标到包装盒的距离border(边框):   围绕在内边距和内容外的边框例如，border-top:10px solid red;  包装盒的厚度margin(外边距)：用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围...
CSS进阶书籍 网上基本没有书签，我的有
11-16
### CSS进阶书籍知识点概述 #### 一、深入探索CSS设计技术原理与方法 - **基础知识回顾**：书中首先对CSS的基本概念进行了回顾，包括选择器、属性与值等基础知识，为初学者打下坚实的基础。 - **布局原理**：详细...
CSS进阶学习资源 面试题
03-07
### CSS进阶学习资源知识点梳理 #### 一、CSS书写顺序 在编写CSS时，合理的书写顺序不仅能提高代码的可读性，还能帮助开发者更好地组织样式。以下是一种推荐的书写顺序： 1. **位置属性**：`position`, `top`, `...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1159
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1161
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 743
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-09 1760
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1245
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值