web-css
一.CSS选择器：1.基础选择器
根本选择器：
>.标签选择器
格式：标签名称{}
>.类选择器（重）
格式：.class属性的值{}
>.id选择器
格式：#id属性的值{}
>.通配符（表现所有）
格式：*
<style>
/*1.标签选择器*/
div{
width: 200px;
height: 300px;
background-color: azure;
}
span{
color: brown;
}
/* 2.类选择器 */
.div2{
background-color: blue;
}
.d2{
background-color: yellow;
}
/* 3.id选择器 */
#div3{
background-color: chocolate;
}
/* 4.通配符 */
*{
border: 1px solid black;
}
</style>
<body>
<div>div1</div>
<div class="div2 d2 ddd">div2</div>
<div id="div3">div3</div>
<span>span</span>
</body> 优先级：ID选择器>类选择器>标签选择器（有雷同属性时 如果没有雷同属性 则共同作用）
2.复合选择器
1.父子选择器---一定是父子关系不能隔代
格式：父>子{} 渲染子
2.子女选择器---先人下的所有子女都渲染
格式：先人 子女{}
3.相邻兄弟选择器 向下渲染，如果向下相邻的兄弟不为目的标签则不渲染
格式：兄+弟{} 向下渲染弟
4.兄弟选择器
格式：兄~弟{} 向下渲染所有的弟
5.交集
格式：选择器1选择器2选择器n{}---满足所有选择器的目的
6.并集
格式：选择器1，选择器2，选择器n{}---只要满足并集中的任一个选择器的目的都渲染
<style>
/*1.父子选择器*/
/* div下的和div具有父子关系的所有标签 */
div>*{
background-color: blueviolet;
}
/* div下的和div具有父子关系的所有lin标签 */
div>li{
background-color: yellowgreen;
}
body>li{
background-color: aquamarine;
}
/* 2.后代选择器 */
body li{
border: 1px solid black;
}
/* 3.相邻兄弟选择器 */
.li2+li{
color: coral;
}
/* 4.兄弟选择器 */
.li6~li{
color: darkviolet;
}
</style>
</head>
<body>
<div>
<li>li1</li>
<li class="li2">li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<span>span</span>
</div>
<li class="li6">li6</li>
<span>span</span>
<li>li7</li>
<li>li8</li>
</body> <style>
div{
width: 300px;
height: 200px;
border: 1px solid black;
}
/* 既满足类选择器.div又满足id选择器#div1 */
.div#div1{
background-color: aqua;
}
/* 并集 */
div,span{
color: blue;
}
</style>
</head>
<body>
<div class="div" id="div1">div1</div>
<div class="div">div2</div>
<span>span</span> ## 优先级的计算规则
CSS选择器优先级的计算依照 **特别性** 规则：
- 选择器的特别性由四个值表现（从左到右紧张性依次递减） ``
- 内联样式：一个内联样式提供一个 ``
- ID选择器：一个ID选择器提供一个 ``
- 类选择器、属性选择器、伪类选择器：每一个提供 ``
- 标签选择器：一个标签选择器提供一个 ``
- 通配符选择器：``
- 继续属性：比上述所有更低，最低的
举例子来看：
- `body div p`：``
- `ol p`：``
- `.type p`：``
- `#main ~ p`：``
- `div.text ~ p `：``
- 按照特别性从左到右比力 `` > ``
- 如果优先级一样的话，后定义的覆盖先定义的（雷同属性，不雷同则共同作用）
3.属性选择器
允许根据元素的属性或属性值来进行选择
1.根本属性选择器
格式：[属性名]{}
2.属性=值
格式：[属性名="属性值"]{}
3.以**开头
格式：[属性名^="属性值"]{}
4.以**结尾
格式：[属性名$="属性值"]{}
5.包含**
格式：[属性名*="属性值"]{}
<style>
/* 1.基本属性 */
{
background-color:red;
}
{
background-color: bisque;
}
/* 2.属性=值 */
{
background-color: black;
}
{
background-color:yellow ;
}
/* 3.以什么开头 */
{
background-color: brown;
}
/* 4.以什么结尾 */
{
background-color: cadetblue;
}
/* 5.包含 */
{
background-color: white;
}
</style>
</head>
<body>
<li class="a" id="">li1</li>
<li class="ab" id="">li2</li>
<li class="abc" id="">li3</li>
<li class="abcd" id="">li4</li>
<li title="123">li5</li>
</body> 4.伪类选择器
1. 链接伪类选择器
紧张用于处理链接元素在不同交互状态下的样式。
- `:link`：用于选择未被访问的状态
- `:visited`：用于选择被访问的状态
- `:hover`：用于选择鼠标悬停时的状态
- `:active`：用于选择正在被激活（鼠标点击）的元素的状态
2.结构伪类选择器
根据元素在文档树（document）中的位置来选择的。
- `:first-child`：选择作为其父元素中第一个子元素的元素
- `:last-child`：选择作为其父元素中最后一个子元素的元素
- `:nth-child(n)`：选择作为其父元素中第n个子元素，n可以是数字，可以是关键字（even偶数 odd奇数）、也可以是公式（`2n+1`）
- `:nth-last-child(n)`：将上面这个`:nth-child(n)`倒过来。
- `:first-of-type`：选择作为其父元素中第一个指定范例的子元素
- `:last-of-type`：选择作为其父元素中最后一个指定范例的子元素
- `:nth-of-type(n)`：选择作为其父元素中第n个指定范例的子元素
- `:nth-last-of-type(n)`：将上面这个`:nth-of-type(n)`倒过来。
- `:only-child`：选择作为其父元素中唯逐一个的子元素
- `:only-of-type`：选择作为其父元素中唯逐一个指定范例的子元素
3.目的伪类选择器
选择当前活动的目的元素，通常用于URL的锚点链接
4.表单相干伪类选择器
用于选择表单元素的不同状态
- `:enable`：选择可用的表单元素
- `:disable`：选择不可用的表单元素
- `:checked`：选择被选中的表单元素
- `:required`：选择具有`required`属性的元素
- `:optinal`：选择没有`required`属性的元素
- `:valid`：选择符合表单验证的元素
- `:invalid`：选择不符合表单验证的元素
- `:in-range`：选择数据在表单范围内的元素
- `:out-of-range`：选择数据不在表单范围内的元素
5.否定伪类选择器
选择不匹配的选择器的元素
6.焦点相干伪类选择器
- `:focus`：选择当前获得焦点的元素
- `:focus-within`：选择包含获得焦点的子元素的父元素
- `:focur-visible`：选择当前获得焦点且焦点可见的元素
5.伪元素选择器
用于选取元素中的特定部门，这些部门在文档树中并不真实存在，只是通过CSS来进行的假造创建和样式化的内容。
- `::before` 和 `::after`：在选定元素的内容之前或之后添加额外的内容，content属性指定添加的内容。
- `::first-letter`：选定元素的内容的第一个字符
- `::first-line`：选定元素的内容的第一行笔墨
- `::selection`：选定元素的内容被选中时
- `::placeholder`：设置表单输入框提示笔墨的样式
二.CSS的常见样式
1.形状相干
宽、高、边线、字体相干的样式
2.阴影效果
阴影效果紧张有文本阴影和盒子阴影
3.文本效果
4.超出处理方案
5.隐蔽和表现
针对自己，可以实现标签的隐蔽和表现。
在CSS中，`display`属性控制标签的隐蔽和表现。
`display`不但仅可以或许隐蔽大概表现标签，而且可以修改标签默认属性，如将块标签修改为行内标签，大概将行内标签修改为块标签。
6.背景样式
7.定位题目
定位：css的定位效果是，重新调整标签的位置关系
position：static 默认效果
绝对定位：将标签确定在某一个位置
父相子绝（如果某一个子元素需要做绝对定位，参照的父元素必须做相对定位）
8.CSS3新特性
CSS3诞生于2010年前后，W3C在12年左右发布了C3标准。
+ 媒体查询
+ 字体设置
+ 动画、过渡、变换等动画效果
+ avg等icon的使用
+ ……
9.媒体查询
媒体查询在CSS2时，就已经存在了。
媒体查询:指的是CSS对于当前展示页面的设备的查询本领，**适配对应的屏幕分辨率。**
CSS2：
@media 查询，在css2就出现了，最开始用来指定对应的设备，如tv表现电视（tv）、screen表现电脑、print表现打印机，后来随着移动端的发展，设备的更新，为了响应现在日异月新的表现屏设备展示数据，css3提供了媒体查询，紧张针对不同分辨率的屏幕。在2010年前，移动互联网的发展，促使大量各种分辨率的屏幕出现。CSS2提供的媒体就不满足时代的发展了，因此C3正式推出了符合当前时代发展的媒体查询，是以分辨率为媒体的查询标准了。
10.@font-face 字体
可以使用@font-face，通过自定义的字体文件，实现任意字体在页面笔墨中的使用。
11.过渡效果
过渡，是CSS3提供的，用来让CSS样式，实现补间动画的一种本领，在规定的时间内，从开始到竣事这个区间内，实现动画的自动补齐。
12.幻化效果
1.平移 2.旋转 3.缩放 4.倾斜
三、小型案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿淘宝商品页面</title>
<!--
理解整个页面的结构
1.div-box
2.ul-prods
3.li-pord
a-pro-href
img-prod-img
div-prod-introduce
div-prod-price
div-prod-boss
div-prde-sale
-->
<style>
.box{
width: 1200px;
margin: auto;
}
.prod{
width: 234px;
height: 349px;
border: 1px solid #f2f2f2;
list-style: none;
float: left;
line-height: 1.5;
}
.prod-href{
text-decoration: none;
}
.prod:hover{
border-color: red;
}
span{
font-size: 14px;
color: #9b9b9b;
}
.prod-price{
font-size: 17px;
color: red;
}
.prod-boss{
font-size: 12px;
color: #9b9b9b;
}
.prod-sale{
text-align: end;
font-size: 12px;
color: #9b9b9b;
border-top: 1px solid #f2f2f2;
padding-top: 10px;
}
.prod-text{
width: 214px;
height: 329;
margin: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="prods">
<!-- 编写一个商品链接 -->
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
<li class="prod">
<a href="http://item.taobao.com/item.htm?spm=a21n57.sem.item.64.8f993903mlOGNI&priceTId=2150405417292511137221878e17ea&utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&id=562337484837&xxc=ad_ztc"" class="prod-href">
<div class="prod-text">
<div class="prod-picture"><img width="214px" height="198px" src="C:\Users\liton\Desktop\屏幕截图 2024-10-18 162953.png" alt=""></div>
<div class="prod-introduce">
<span>A4加大文件盒透明亚克力文件盒多层大容量资料收纳办公前台桌面</span>
</div>
<div class="prod-price">￥4</div>
<div class="prod-boss">三锐旗舰店</div>
<div class="prod-sale">月销 2000+</div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html> 上述代码仅作演示，图片和内部笔墨均雷同；
效果图：
https://i-blog.csdnimg.cn/direct/4b423b99029240f4bbee577d72ab8847.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]