web-css - 技术栈

一.CSS选择器：

1.基础选择器

基本选择器：

>.标签选择器

格式：标签名称{}

>.类选择器（重）

格式：.class属性的值{}

>.id选择器

格式：#id属性的值{}

>.通配符（表示所有）

格式：*

css 复制代码

 <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{}---只要满足并集中的任一个选择器的目标都渲染

css 复制代码

<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>

css 复制代码

<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选择器优先级的计算遵循 **特殊性** 规则：

选择器的特殊性由四个值表示（从左到右重要性依次递减） `[0,0,0,0]`
内联样式：一个内联样式提供一个 `[1,0,0,0]`
ID选择器：一个ID选择器提供一个 `[0,1,0,0]`
类选择器、属性选择器、伪类选择器：每一个提供 `[0,0,1,0]`
标签选择器：一个标签选择器提供一个 `[0,0,0,1]`
通配符选择器：`[0,0,0,0]`
继承属性：比上述所有更低，最低的

举例子来看：

`body div p`：`[0,0,0,3]`
`ol p`：`[0,0,0,2]`
`.type p`：`[0,0,1,1]`
`#main ~ p`：`[0,1,0,1]`
`div.text ~ p `：`[0,0,1,2]`
按照特殊性从左到右比较 `[0,1,0,0]` > `[0,0,0,1000]`
如果优先级一样的话，后定义的覆盖先定义的（相同属性，不相同则共同作用）

3.属性选择器

允许根据元素的属性或属性值来进行选择

1.基本属性选择器

格式：[属性名]{}

2.属性=值

格式：[属性名="属性值"]{}

3.以**开头

格式：[属性名^="属性值"]{}

4.以**结尾

格式：[属性名$="属性值"]{}

5.包含**

格式：[属性名*="属性值"]{}

css 复制代码

 <style>
        /* 1.基本属性 */
        [class]{
            background-color:red;
        }
        [title]{
            background-color: bisque;
        }
        /* 2.属性=值 */
        [class="abc"]{
            background-color: black;
        }
        [title="123"]{
            background-color:yellow ;
        }
        /* 3.以什么开头 */
        [class^="ab"]{
            background-color: brown;
        }
        /* 4.以什么结尾 */
        [class$="d"]{
            background-color: cadetblue;
        }
        /* 5.包含 */
        [class*="abc"]{
            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.伪类选择器

链接伪类选择器

主要用于处理链接元素在不同交互状态下的样式。

`: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.倾斜

三、小型案例：

css 复制代码

<!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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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&amp;priceTId=2150405417292511137221878e17ea&amp;utparam=%7B%22aplus_abtest%22%3A%2228d25b6a0c80ac2453db128b68acd5f5%22%7D&amp;id=562337484837&amp;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>

上述代码仅作演示，图片和内部文字均相同；

效果图：