CSS3_

最新推荐文章于 2024-05-22 00:06:01 发布

研究了个寂寞

最新推荐文章于 2024-05-22 00:06:01 发布

阅读量151

点赞数

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

本文链接：https://blog.csdn.net/m0_51380540/article/details/120304687

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

视频地址：https://www.bilibili.com/video/BV1YJ411a7dy

HTML+CSS+JS
结构+表现+交互
技术网站： https://www.runoob.com/css3/css3-tutorial.html

一、CSS简介

1.1 什么是CSS

Cascading Style Sheet（层叠级联样式表）
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

浏览器打开开发人员工具

1.2 CSS发展史

CSS 1.0
CSS 2.0----DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS 2.1----浮动、定位
CSS 3.0----圆角、阴影、动画… 浏览器兼容性。

二、CSS快速入门

2.1 快速入门

style
直接在HTML文件中写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <!--  style 内可以编写CSS代码
    格式：
        选择器{
                声明1;
                声明2;
                声明3;
        }
    -->
    <style>
        h1{
            color: pink;
        }

    </style>

</head>
<body>
<h1>我是h1标签</h1>

</body>
</html>

另写一个css文件，通过link标签引入（推荐，推荐）
在这里插入图片描述
CSS优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

2.2 CSS的3种导入方式

样式优先级：行内样式>内部样式>外部样式？？？？？
并不是，而是就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    style内包含的是内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>
    <!--    引入外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--    样式优先级：行内样式>内部样式>外部样式？？？  不是，而是就近原则    -->
<!--这是行内样式-->
<h1 style="color: chartreuse">我是h1标签</h1>

</body>
</html>

外部样式的两种引入方式:

链接式----link标签
导入式----<style>@import url("css文件路径");</style>

三、CSS选择器（重点+难点）

选择器网址：https://jquery.cuishifeng.cn/
作用：选择页面上的某一个或者某一类元素

3.1 基本选择器

标签选择器：选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中h1标签*/
        h1{
            color: #048507;
            backdrop-filter: blur(8px);
            background-color: cadetblue;
        }
        /*选中h2标签*/
        h2{
            color: #048507;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h2>标标标</h2>
</body>
</html>

类选择器：选择所有class属性一至的标签，可以跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中h1标签*/
        h1{
            color: #048507;
            backdrop-filter: blur(8px);
            background-color: cadetblue;
        }
        /*选中h2标签*/
        h2{
            color: #048507;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h2>标标标</h2>
</body>
</html>

id选择器：全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器使用方法    id唯一不能重复
                  #id名字{}
          选择器优先级
                  标签选择器 》 类选择器 》 id选择器
        */
        #h1-1{color: #ff1515}
        #h1-2{color: #ff1515}
        #h1-3{color: #ff1515}
    </style>
</head>
<body>
<h1 id="h1-1">标签1</h1>
<h1 id="h1-2">标签2</h1>
<h1 id="h1-3">标签3</h1>
<h1>标签4</h1>

</body>
</html>

选择器的优先级：不遵循就近原则
id选择器 > 类选择器 > 标签选择器

3.2 层次选择器

层次结构如下：
在这里插入图片描述
层次选择器分类：

后代选择器：在某个元素后面–

/*后代选择器--body后代中所有的p标签*/
body p{background-color: deeppink;}

子类选择器：一代，儿子–>

/*  子类选择器--body子类中所有的p标签  */
body>p{background-color: deeppink;}

(相邻)兄弟选择器：同辈，只有一个，向下–+

/*  相邻兄弟选择器-- active类兄弟中相邻的（也就是下一个）p标签 */
.active+p{background-color: pink}

通用兄弟选择器：当前选中元素的所有向下兄弟元素–~

/*  通用兄弟选择器-- active类相邻（也就是以下所有的）兄弟中的p标签 */
.active~p{background-color: #ff1515}

扩展
可以只在第一个li标签中加class或者id，通过层级选择器选中其他li标签

3.3 结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  禁止使用class标签和id  -->
    <style>
        /*选中ul中的第一个li标签*/
        ul li:first-child{background-color: #ff1515}

        /*选中ul中的最后一个li标签*/
        ul li:last-child{background-color: #009080}

        /*  选中p1，定位到父元素，选择当前的第一个子元素
          选择当前p元素的父级元素，选中父级元素的第1个元素，，，，并且是当前元素才生效------按顺序选*/
        p:nth-child(1){background-color: chartreuse}

        /*选择当前p元素的父级元素，选中父级元素的第2个p元素------按类型选*/
        p:nth-of-type(2){background-color: aqua}

    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>

</body>
</html>

另：

a:hover{background:#000000;}

3.4 属性选择器（重要）

id+class结合~~更强大
格式：标签[属性名 / 属性名=属性值(可以使用正则表达式)]{}
总结几个正则：

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: deeppink;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性选择器的格式：
                标签[属性名 / 属性名=属性值(可以使用正则表达式)]{}
                正则表达式有：
                        =   绝对等于
                        *=   包含这个元素
                        ^=   以这个开头
                        $=   以这个结尾
        */

        /*   选中带有id属性的标签 */
        /*a[id]{background: yellow;}*/

        /* 选中id等于first的标签*/
        /*a[id="first"]{background: aliceblue;}*/

        /*  选中class中带有links元素的标签  */
        /*a[class*="links"]{background: yellow;}*/

        /* 选中href属性中以http开头的标签   */
        /*a[href^=http]{background: yellow;}*/

        /* href中以pdf结尾的标签 */
        /*a[href$=pdf]{background: yellow;}*/
        
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item first" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

四、美化网页元素（文字、阴影、超链接、列表、渐变 …）

4.1 为什么要美化网页

有效传递网页信息
美化网页，页面漂亮才能吸引用户
凸显页面主题
提高用户体验

span标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{font-size: 40px}
    </style>
</head>
<body>
我爱学习 <span id="title1">Java</span>

</body>
</html>

4.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    font-family 字体
    color 颜色
    font-size 字体大小
    font-weight  字体粗细
    -->
    <style>
        body{font-family: 楷体;color: #009080}
        h1{font-size: 30px}
        .p1{font-weight: lighter}

        #id1{font: bold 20px/100px Arial}
    </style>
    <!-- 另有  font：字体风格（斜体、意大利）  粗细  大小/距上面宽度  字体（楷体）  -->

</head>
<body>
<h1>鬼吹灯</h1>

<p class="p1">
    民国时期，胡八一祖父胡国华因为家道中落和自己吃喝嫖赌抽样样俱全而被迫去盗墓
</p>
<p>
    故事中用两个小片段交代人物出场、故事背景以及关于盗墓的一些基本常识，高潮则开始于胡八一和胖子跟随考古队，利用秘书残卷中风水秘术来解读天下大川脉搏，寻找一处失落在地下的琼楼宝殿——精绝古城
</p>
<p id="id1">hello</p>

</body>
</html>

4.3 文本样式

颜色
文本对其方式 text-align=center
首行缩进
行高单行文字上下居中！！
装饰（下划线，等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--颜色：rgb    或  rgba(a表示透明度)
    text-align    排版  靠左 居中 靠右
    text-indent: 2em   缩进两个字符
    background      背景颜色
    height          高度
    line-height     行高   高度和行高相同时会有剧中效果
    text-decoration   下underline 中line-through 上overline

    vertical-align  两个元素垂直居中
    a标签 text-decoration: none  去除下划线
    -->
    <style>
        h1{
            color: rgba(125,25,255,0.9);
            text-align: center;
        }
        .p1{text-indent: 2em;}
        .p3{
            background: pink;
            height: 300px;
            /*line-height: 300px;*/
        }
        .l1{text-decoration: underline}
        .l2{text-decoration: line-through}
        .l3{text-decoration: overline}

        img,span{vertical-align: middle}
        a{text-decoration: none}

    </style>
</head>
<body>
<a href="https://www.dongqiudi.com/">dongqiudi</a>
<p class="l1">123123123</p>
<p class="l2">111222333</p>
<p class="l3">132132132</p>

<h1>鬼吹灯</h1>

<p class="p1">
    民国时期，胡八一祖父胡国华因为家道中落和自己吃喝嫖赌抽样样俱全而被迫去盗墓，却被一看风水老先生制止并于百年后传授一本秘书残卷《十六字阴阳风水秘术》，懂此书可知风水，可观天文，并以此可知隐藏在奇川大山中的琼楼古墓，此书历经磨难最终传到胡八一手上。“文革”时期上山下乡的热潮使得胡八一和胖子（胡八一的哥们）开始探秘之行，期间又由人介绍认识考古队的Shirley杨和陈教授，以四人为主开始梦幻奇绝的探秘之旅。
</p>
<p>
    故事中用两个小片段交代人物出场、故事背景以及关于盗墓的一些基本常识，高潮则开始于胡八一和胖子跟随考古队，利用秘书残卷中风水秘术来解读天下大川脉搏，寻找一处失落在地下的琼楼宝殿——精绝古城，从而揭开千年部族消失之谜，却在精绝古城中遭遇种种离奇，无论是尸香魔芋的怪异魔力还是关于先知的预言，最终考古队中只有四人从鬼洞中死里逃生。而在龙岭迷窟倒斗的时候，除了遭遇各种匪夷所思的诡异外，
</p>

<p class="p3">
    I have had my invitation to this world's festival, and thus my life has been blessed.Early in the day it was whispered that we should sail in a boat, only thou and I, and never a soul in the world would know of this our pilgrimage to no country and to no end.
</p>
<hr>
<p>
    <img src="img/a.jpg" alt="">
    <span>dongqiudidongqiudidongqiudi</span>
</p>


</body>
</html>

4.4 文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        a{text-decoration: none;
        color: pink}
        /*鼠标放上的状态*/
        a:hover{color: blue; font-size: 40px;}
        /*鼠标点击未松开*/
        a:active{color: #009080}

        /*未访问的链接*/
        /*a:link{color: #ff0000}*/
        /*已访问的链接*/
        /*a:visited{color: blueviolet}*/

        /*text-shadow  阴影部分  颜色 水平偏移 垂直便宜 阴影半径*/
        .price{text-shadow: #ff1515 5px 5px 2px;}
    </style>
</head>
<body>
<p>
    <a href="#">
        <img src="img/45.jpg" alt="">
    </a>
</p>
<p>
    <a href="">码出高效</a>
</p>
<p>
    <a href="">老师</a>
</p>
<p class="price">
￥99
</p>

</body>
</html>

4.5 列表样式

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   外部链接导入样式    -->
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>


</body>
</html>

css代码

#nav{
    width: 300px;
    background: aliceblue
}
.title{
    font-size: 18px; /*字体大小*/
    font-weight: bold; /**/
    text-indent: 1em; /**/
    line-height: 30px; /*行高*/
    background: red;
}
ul{
    background: aliceblue;
}
/*ul li*/
/* list-style:
none  去掉圆点
circle  空心圆
decimal 数字
square  方块
*/
ul li{
    height: 30px;  /*行高*/
    list-style: none;
    text-indent: 1em;
}

/*a链接的设定  通常和hover一起*/
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

4.6 背景图像应用及渐变

背景图像应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            weight: 300px;
            height: 500px;
            border: red;
            /*默认是平铺  repeat*/
            background-image: url("images/37.png")
        }
        .div1{background-repeat: repeat-x}
        .div2{background-repeat: repeat-y;}
        .div3{background-repeat: no-repeat;}
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

渐变https://www.grabient.com

body{background-image: linear-gradient(19deg, #4f3412 0%, #4f3ff2 100%);}

五、盒子模型

4.1 什么是盒子模型

在这里插入图片描述
margin : 外边距
padding : 内边距
border : 边框

4.2 边框

边框的粗细
边框的颜色
边框的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的会有外边框  可以通过margin设置*/
        body{
            /*margin: 0px;*/
        }
        .div{
            width: 300px;
            border: 5px solid red;
        }
        h2{
            font-size: 14px;
            color: white;
            background: blue;
        }
        form{background: #ffffef}

        div:nth-of-type(1) input{
            border: 3px solid #ff1515;
        }
        div:nth-of-type(2) input{
            border: 3px dashed #ff1515;
        }

    </style>
</head>
<body>
<div class="div" >
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <span><input type="text"></span>
        </div>
        <div>
            <span>密码：</span>
            <span><input type="password"></span>
        </div>
        <div>
            <span>邮箱：</span>
            <span><input type="email"></span>
        </div>
    </form>
    
</div>

</body>
</html>

4.3 内外编剧及居中

/*margin 外边框
margin：0  上下左右
margin：0 auto 上下  左右
margin：0 1 2 3 顺时针
padding同理
*/
margin: 0 auto;

居中：margin: 0 auto;
居中有要求：外面有块元素，块元素有宽度

4.4 圆角边框

/*一个值 全部， 两个值左上右下 右上左下  四个值时左上开始顺时针旋转*/
/*可以画圆型等等，圆时要求弧度等于半径*/
border-radius: 150px;

4.5 盒子阴影

/*参数 ： 向右偏移量  向下偏移量  散度(阴影覆盖面积)越大越模糊  颜色*/
box-shadow: 20px 20px 10px red;

六、浮动

6.1 标准文档流

块元素：独占一行
行内元素：不独占一行

6.2 display

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行！！！
none：消失
这个也是行内元素排列的方式，但是我们很多情况使用float

6.3 float 浮动

left：左侧浮动
right：右侧浮动
both：两侧都浮动
none

clear：指定不允许元素周围有浮动元素。
left
right
both
none
inherit

6.4 父级元素塌陷问题

浮动元素后面加空的div

.clear{
	clear: both;
	margin: 0;
	padding: 0;
}

设置父元素高度

#father{
	border:1px #000 solid;
	height:800px;
}

overflow（元素溢出时加下拉条）有点类似于iframe

父类添加伪类：after（推荐）

#father:after{
	content:'';
	display:block;
	clear: both;
}

小结：

浮动元素后面加空的div
简单，代码中尽量避免空的div
设置父元素高度
简单，元素假设有了固定高度就会被限制
overflow
简单，但是下拉场景尽量避免使用
父类添加伪类：after（推荐）
写法稍微复杂一点，但是没有副作用

6.5 对比

display
方向不可以控制，但是不会出现父级元素塌陷问题
float
浮动起来的话会脱离标准文档流，会出现父级元素塌陷问题

七、定位

7.1 相对定位

相对于原来的位置进行偏移，他仍然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 10px;
        }
        #father{
            border: 1px solid #000000;
            margin: 5px;
            padding: 10px;
        }
        #first{
            border: 1px dashed #ff1515;
            background: #ff1515;
            margin: 5px;
            position: relative;
            top: 10px; /* 距离上面10个px*/
            right: 5px; /* 距离右面5个px*/
        }
        #second{
            border: 1px dashed #ff9911;
            background: #ff9911;
            margin: 5px;
        }
        #third{
            border: 1px dashed #ff1599;
            background: #ff1599;
            margin: 5px;
            position: relative;
            bottom: 5px; /* 距离下面5个px*/
            left: 10px; /* 距离左面10个px*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first"> 第一个盒子</div>
    <div id="second"> 第二个盒子</div>
    <div id="third"> 第三个盒子</div>
</div>

</body>
</html>

作业： 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            border: 2px red solid;
            height: 300px;
            width: 300px;
            padding: 5px;
        }
        a{
            background: #ffc9e3;
            text-decoration: none;
            color: white;
            width: 100px;
            height: 100px;
            text-align: center;  /*保证左右居中*/
            line-height: 100px; /*保证上下居中*/
            display: block;/* 原来是内联元素，改为块级元素*/
        }
        a:hover{
            background: #3aacff;
        }
        .a2,.a4{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

</body>
</html>

7.2 绝对定位

相对于XXX定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
父级元素存在定位会相对于父级元素进行定位
在父级范围内移动
相对于父级或浏览器位置进行指定偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

7.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: #3aacff;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: #ff1e37;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

7.4 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index学习</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="./img/bg.jpg" alt=""></li>
        <li class="tipText"> 学习微服务找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>

</div>

</body>
</html>

#content{
    width: 160px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    /*两元素重合，都距离夫元素75px*/
    position: absolute;
    width: 160px;
    height: 25px;
    top: 75px;
}
.tipText{
    color: white;
    /*显示的层级，值越大优先级越高*/
    z-index: 99;
}
.tipBg{
    background: #000000;
    /*设置透明度*/
    opacity: 0.5;
}

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

八、网页动画（特效）

研究了个寂寞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3_

CSS3一、CSS简介二、CSS快速入门三、HTML+CSS+JS结构+表现+交互视频地址：https://www.bilibili.com/video/BV1YJ411a7dy技术网站：https://www.runoob.com/css3/css3-tutorial.html一、CSS简介二、CSS快速入门三、
复制链接

扫一扫