网页设计作业 - 小米商城首页

小米商城首页(未实现交互,仅html+img)

花了差不多10个小时,写了个空壳
图片和文字保存+调整,调到吐血,,,
记录一下吧,虽然有点丑单起码自己做过。

//2023.11.15:优化内容:

  1. 优化右上角区域宽度
  2. 添加页面1左侧导航覆盖色
  3. 搜索图标覆盖按钮色
  4. 页面2左侧盒子大小

声明:看的话仅供学习参考,仅供参考!

css用的外部,下面也有原css代码


HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>小米商城</title>
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!-- 外部css:css.134920.xyz -->
        <link rel="stylesheet" href="http://css.134920.xyz/homework/2023_11_11/css/style.css" />
        <!-- 搜索框style样式 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    </head>
    <body>
        <!-- 外部大区域 -->
        <div>
            <!-- 商城顶部区域 -->
            <div id="top">
                <!-- 超链接盒子 -->
                <div id="www_fanwo_top_css_134920_xyz">
                    <!-- 顶部左侧超链接 -->
                    <div id="top_left">
                        <a href="">小米官网</a>
                        <font class="smallbar">|</font>
                        <a href="">小米商城</a>
                        <font class="smallbar">|</font>
                        <a href="">小米澎湃OS</a>
                        <font class="smallbar">|</font>
                        <a href="">IoT</a>
                        <font class="smallbar">|</font>
                        <a href="">云服务</a>
                        <font class="smallbar">|</font>
                        <a href="">天星数科</a>
                        <font class="smallbar">|</font>
                        <a href="">有品</a>
                        <font class="smallbar">|</font>
                        <a href="">小爱开放平台</a>
                        <font class="smallbar">|</font>
                        <a href="">资质证明</a>
                        <font class="smallbar">|</font>
                        <a href="">协议规则</a>
                        <font class="smallbar">|</font>
                        <a href="">下载app</a>
                        <font class="smallbar">|</font>
                        <a href="">Select
                            Location</a>
                    </div>
                    <!-- 顶部右侧超链接 -->
                    <div id="top_right">
                        <a href="">登录</a>
                        <font class="smallbar">|</font>
                        <a href="">注册</a>
                        <font class="smallbar">|</font>
                        <a href="">消息通知</a>
                        <!-- 购物车 -->
                        <div class="shop">
                            <a href="">?购物车(0)</a>
                        </div>
                    </div>
                </div>
                <!-- 商城顶部区域结束 -->
            </div>
            <!-- 内容区域开始 -->
            <!-- 白底页面 -->
            <div id="p1color">
                <!-- 顶部导航 -->
                <div id="header_top">
                    <!-- 左侧logo -->
                    <div class="img_mi">
                        <img src="http://css.134920.xyz/homework/2023_11_11/img/mi.png" alt="">
                    </div>
                    <!-- 导航条文字开始 -->
                    <div class="header_nav">
                        <!-- 间隔白板 -->
                        <div class="bai">
                            <!-- 空白区 -->
                        </div>
                        <!-- 链接开始 -->
                        <div class="nav_link">
                            <ul>
                                <li><a href="">Xiaomi手机</a></li>
                                <li><a href="">Readmi手机</a></li>
                                <li><a href="">电视</a></li>
                                <li><a href="">笔记本</a></li>
                                <li><a href="">平板</a></li>
                                <li><a href="">家电</a></li>
                                <li><a href="">路由器</a></li>
                                <li><a href="">服务中心</a></li>
                                <li><a href="">社区</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 搜索框开始 -->
                    <div class="search">
                        <form action="#">
                            <button type="submit">
                                <i class="fa fa-search"></i>
                            </button>
                            <input type="text" placeholder="电视" name="search">

                        </form>
                    </div>
                    <!-- 顶部导航结束 -->
                </div>
                <!-- 第一部分 -->
                <div id="www_fanwo_top_archives_486_html_one">
                    <!-- 左侧区 -->
                    <div class="left">
                        <ul>
                            <li><a href="">手机<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">电视<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">家电<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">笔记本 平板<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">出行 穿戴<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">耳机 音箱<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">健康 儿童<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">生活 箱包<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">智能 路由器<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                            <li><a href="">电源 配置<img
                                        src="http://css.134920.xyz/homework/2023_11_11/img/iconfont-arrow-right-big.png"
                                        alt=""></a></li>
                        </ul>
                    </div>
                    <!-- 右侧图 -->
                    <a href="">
                        <div class="right_img">
                        </div>
                    </a>
                </div>
                <!-- 第二部分 -->
                <div id="www_fanwo_top_archives_486_html_two">
                    <!-- 左侧区域 -->
                    <div class="left">
                        <ul>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small1.png" alt="">
                                    <p>保障服务</p>
                                </a></li>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small2.png" alt="">
                                    <p>企业团购</p>
                                </a></li>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small3.png" alt="">
                                    <p>F码通道</p>
                                </a></li>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small4.png" alt="">
                                    <p>米粉卡</p>
                                </a></li>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small5.png" alt="">
                                    <p>以旧换新</p>
                                </a></li>
                            <li><a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/small6.png" alt="">
                                    <p>话费充值</p>
                                </a></li>
                        </ul>
                    </div>
                    <div class="css_134920_xyz_img-set">
                        <!-- 右边第一个盒子 -->
                        <div class="css_134920_xyz1">
                            <a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/box1img.png" alt=""></a>
                        </div>
                        <!-- 右边第二个盒子 -->
                        <div class="css_134920_xyz2"><a href=""><img
                                    src="http://css.134920.xyz/homework/2023_11_11/img/box2img.jpg" alt=""></a></div>
                        <!-- 右边第三个盒子 -->
                        <div class="css_134920_xyz3"><a href=""><img
                                    src="http://css.134920.xyz/homework/2023_11_11/img/box3img.png" alt=""></a></div>
                    </div>
                </div>
            </div>
            <!-- 白灰底页面 -->
            <div id="p2color">
                <!-- 第二部分页面限宽 -->
                <div id="p2css_134920_xyz-fanwo_top">
                    <!-- 横图 -->
                    <div class="hentu">
                        <a href="">
                            <img src="http://css.134920.xyz/homework/2023_11_11/img/imgXiaomi14pro.png" alt=""></a>
                    </div>
                    <!-- 手机/查看更多区域 -->
                    <div id="isolatefontarea">
                        <div class="phone_text">
                            <h2>手机</h2>
                        </div><a href="">
                            <div class="right_lookmore">
                                查看更多</div>
                            <div class="img_more">
                                <img src="http://css.134920.xyz/homework/2023_11_11/img/img_more.png" alt="">
                            </div>
                        </a>
                    </div>
                    <!-- 长图+8小图 -->
                    <!-- 手机区域左边长图 -->
                    <div class="leftlongimg">
                        <a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/longxiaomi14.png" alt=""></a>
                    </div>
                    <!-- 小方块图片区域开始 -->
                    <div class="p2_areaimg">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep1.png" alt="">
                                    <p class="phonename"> Xiaomi 14 Pro</p>
                                    <p class="describe"> 徕卡Summilux可变光圈镜头|小米澎湃OS
                                    </p>
                                    <p class="price">4999元起</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep2.png" alt="">
                                    <p class="phonename"> Xiaomi 14</p>
                                    <p class="describe"> 徕卡光学Summilux镜头|小米澎湃OS|第三代骁龙®8移动平台
                                    </p>
                                    <p class="price">3999元起</p>
                                
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep3.png" alt="">
                                    <p class="phonename"> Redmi Note 13 Pro
                                    </p>
                                    <p class="describe"> 小金刚品质</p>
                                    <p class="price">1399元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep4.png" alt="">
                                    <p class="phonename"> Redmi Note 13 Pro+
                                    </p>
                                    <p class="describe"> 天玑 7200-Ultra 处理器 </p>
                                    <p class="price">1899元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep5.png" alt="">
                                    <p class="phonename"> Redmi Note 13 5G
                                    </p>
                                    <p class="describe"> 1 亿像素 更快更清晰</p>
                                    <p class="price">1099元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1199元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep6.png" alt="">
                                    <p class="phonename"> Xiaomi MIX Fold 3
                                    </p>
                                    <p class="describe"> 轻薄折叠屏丨徕卡光学丨全焦段四摄</p>
                                    <p class="price">8999元起</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep7.png" alt="">
                                    <p class="phonename"> Redmi K60 至尊版
                                    </p>
                                    <p class="describe"> 旗舰体验全面超预期</p>
                                    <p class="price">2699元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2799元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep8.png" alt="">
                                    <p class="phonename"> Redmi 12 5G
                                    </p>
                                    <p class="describe"> 5G 骁龙芯,大屏大电量</p>
                                    <p class="price">949元起</p>
                                    
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 智能穿戴开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>智能穿戴</h2>
                        </div>
                        <div class="mi-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">耳机&nbsp;</font>
                                    </a></li>
                                <li><a href="">穿戴</a></li>
                            </ul>
                        </div>

                    </div>
                    <!-- 长图+8小图 -->
                    <!-- 手机区域左边长图 -->
                    <div class="leftlongimg">
                        <a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/zncd1.png" alt=""></a>
                    </div>
                    <!-- 小方块图片区域开始 -->
                    <div class="p2_areaimg">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd2.png" alt="">
                                    <p class="phonename"> Redmi Buds 5</p>
                                    <p class="describe"> 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航
                                    </p>
                                    <p class="price">199元</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd3.png" alt="">
                                    <p class="phonename"> Redmi Buds 5 AAPE 潮流限定版
                                    </p>
                                    <p class="describe"> 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航 </p>
                                    <p class="price">299元</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd4.png" alt="">
                                    <p class="phonename"> Xiaomi Buds 4 Pro
                                    </p>
                                    <p class="describe"> 48dB智能动态降噪|骨声纹通话降噪 | 独立空间音频</p>
                                    <p class="price">799元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1099元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd5.png" alt="">
                                    <p class="phonename"> Xiaomi Buds 3 Pro
                                    </p>
                                    <p class="describe"> 40dB自适应降噪 |空间音频 | HiFi高保真音质</p>
                                    <p class="price">399元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">699元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd6.png" alt="">
                                    <p class="phonename"> Redmi Buds 4 Pro
                                    </p>
                                    <p class="describe"> 43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟 </p>
                                    <p class="price">299元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">399元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd7.png" alt="">
                                    <p class="phonename"> Redmi Buds 4活力版 </p>
                                    <p class="describe"> 12mm大动圈 | 28小时长续航 | 触控便捷操作 </p>
                                    <p class="price">79元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">99元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/zncd8.png" alt="">
                                    <p class="phonename"> Redmi Buds 4
                                    </p>
                                    <p class="describe"> 35dB 智能主动降噪 | AI 通话降噪 | 30小时超长续航</p>
                                    <p class="price">179元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">229元</font>
                                    </p>
                                    
                                </a>
                            </li>

                            <!-- 第十小区域-->
                            <div class="hottenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>Redmi Buds 3</p>
                                        </div>
                                        <div class="price"> 129元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/zncd9.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="hottenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">净水器 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 笔记本|平板开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>笔记本 | 平板</h2>
                        </div>
                        <div class="hot-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">热门</font>
                                    </a></li>

                            </ul>
                        </div>

                    </div>
                    <!-- 长图+8小图 -->
                    <!-- 手机区域左边长图 -->
                    <div class="leftlongimg">
                        <a href=""><img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb1.png" alt=""></a>
                    </div>
                    <!-- 小方块图片区域开始 -->
                    <div class="p2_areaimg">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb2.png" alt="">
                                    <p class="phonename"> Redmi Pad SE</p>
                                    <p class="describe"> 高性价比千元平板|11英寸高刷护眼大屏|全金属一体机身|73.2天超长待机
                                    </p>
                                    <p class="price">899元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb3.png" alt="">
                                    <p class="phonename"> Xiaomi Pad 6 Max 14</p>
                                    <p class="describe"> 14英寸大屏幕|骁龙8+处理器|PC级多任务工作台 </p>
                                    <p class="price">3799元起</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb4.png" alt="">
                                    <p class="phonename"> Redmi G 游戏本 2022
                                    </p>
                                    <p class="describe"> 16英寸 2.5K 165Hz 电竞大屏</p>
                                    <p class="price">7499元起
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb5.png" alt="">
                                    <p class="phonename"> Xiaomi Pad 6
                                    </p>
                                    <p class="describe"> 11英寸2.8K护眼屏|骁龙870旗舰处理器|8840mAh大电量|MIUI高效办公体验
                                    </p>
                                    <p class="price">1799元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb6.png" alt="">
                                    <p class="phonename"> Xiaomi Pad 6 Pro
                                    </p>
                                    <p class="describe"> 骁龙8+旗舰处理器|11英寸2.8K护眼屏|8600mAh 67W快充|MIUI高效办公体验
                                    </p>
                                    <p class="price">2349元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb7.png" alt="">
                                    <p class="phonename"> RedmiBook Pro 15 2022 锐龙版
                                    </p>
                                    <p class="describe"> 可选全新锐龙7 6800H处理器,3.2K 90Hz高清屏,RTX 2050高性能独立显卡,CNC一体精雕工艺
                                    </p>
                                    <p class="price">5499元起</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb8.png" alt="">
                                    <p class="phonename"> Redmi Book 15E
                                    </p>
                                    <p class="describe"> 15.6‘’ 全高清大屏</p>
                                    <p class="price">3599元起</p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="hottenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>Redmi G Pro 游戏本 锐龙版 </p>
                                        </div>
                                        <div class="price"> 7299元起 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/bjbpb9.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="hottenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">热门 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 家电开始 -->
                    <!-- 家电往下,共用www_innyun_cn- -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>家电</h2>
                        </div>
                        <div class="www_innyun_cn-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">热门</font>
                                    </a></li>
                                <li><a href="">电视影音</a></li>
                                <li><a href="">空调</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 9小图+2小小图 -->
                    <div class="www_innyun_cn-p2_areaimg">
                        <ul>
                            <!-- 第一个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd1.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd2.png" alt="">
                                    <p class="phonename"> 小米电视6 65” OLED</p>
                                    <p class="describe">
                                        OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏 </p>
                                    <p class="price">5999元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">6999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd3.png" alt="">
                                    <p class="phonename"> 小米电视6 至尊版 65英寸</p>
                                    <p class="describe"> 百级分区背光 | 双120Hz高刷 | 4.5GB+64GB
                                    </p>
                                    <p class="price">6899元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">7999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd4.png" alt="">
                                    <p class="phonename"> 小米电视 ES55 2022款</p>
                                    <p class="describe">
                                        多分区背光 | MEMC动态补偿 | 杜比视界 </p>
                                    <p class="price">2379元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd5.png" alt="">
                                    <p class="phonename"> 巨省电 小米空调 1.5匹新1级能效
                                    </p>
                                    <p class="describe"> 强劲制冷 | 高效节能 | 智能互联</p>
                                    <p class="price">1899元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第六个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd6.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd7.png" alt="">
                                    <p class="phonename"> 米家新风空调 立式3匹
                                    </p>
                                    <p class="describe"> 全屋快通风,就要大新风</p>
                                    <p class="price">6399元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">7299元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd8.png" alt="">
                                    <p class="phonename"> 米家分区洗烘一体机 15kg
                                    </p>
                                    <p class="describe"> 健康分开洗 一台就够了</p>
                                    <p class="price">4999元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">5999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jd9.png" alt="">
                                    <p class="phonename"> 米家波轮洗衣机 10kg
                                    </p>
                                    <p class="describe"> 全景玻璃阻尼上盖 防夹手</p>
                                    <p class="price">899元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1499元</font>
                                        </font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>米家迷你波轮洗衣机Pro 3kg</p>
                                        </div>
                                        <div class="price"> 699元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/jd10.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="tenaddone">
                                <a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">热门 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 生活电器开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>生活电器</h2>
                        </div>
                        <div class="www_innyun_cn-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">电暖器</font>
                                    </a></li>
                                <li><a href="">扫地机</a></li>
                                <li><a href="">空净</a></li>
                                <li><a href="">清洁</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 9小图+2小小图 -->
                    <div class="www_innyun_cn-p2_areaimg">
                        <ul>
                            <!-- 第一个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd1.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd2.png" alt="">
                                    <p class="phonename"> 米家电暖器 温控版</p>
                                    <p class="describe"> 2200W 强劲功率,对流速热,居浴两用
                                    </p>
                                    <p class="price">279元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">329元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd3.png" alt="">
                                    <p class="phonename"> 米家石墨烯踢脚线电暖器 仿真火焰版</p>
                                    <p class="describe"> 加湿+火焰效果 | 悬浮外观 | 双核石墨烯速热
                                    </p>
                                    <p class="price">1299元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1599元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd4.png" alt="">
                                    <p class="phonename"> 米家石墨烯智能电暖器</p>
                                    <p class="describe"> 石墨烯高导热,即开即暖无需等
                                    </p>
                                    <p class="price">459元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">549元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd5.png" alt="">
                                    <p class="phonename"> 米家踢脚线电暖器E
                                    </p>
                                    <p class="describe"> 制暖身材小,抵御寒冬功劳大</p>
                                    <p class="price">449元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第六个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd6.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd7.png" alt="">
                                    <p class="phonename"> 米家石墨烯折叠踢脚线电暖器 超薄版
                                    </p>
                                    <p class="describe"> 0°-180°百变折叠不占地|石墨烯速热|智能恒温</p>
                                    <p class="price">799元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">899元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd8.png" alt="">
                                    <p class="phonename"> 米家石墨烯踢脚线电暖器
                                    </p>
                                    <p class="describe"> 石墨烯速热取暖,快上加快</p>
                                    <p class="price">749元</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/sd9.png" alt="">
                                    <p class="phonename"> 米家直流变频两季扇
                                    </p>
                                    <p class="describe"> 暖风和煦,凉风沁人</p>
                                    <p class="price">749元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">899元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>米家踢脚线电暖器1S</p>
                                        </div>
                                        <div class="price"> 649元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/sd10.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">电暖器 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 厨房电器开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>厨房电器</h2>
                        </div>
                        <div class="www_innyun_cn-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">净水器</font>
                                    </a></li>
                                <li><a href="">烟灶</a></li>
                                <li><a href="">电饭煲</a></li>
                                <li><a href="">微蒸烤</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 9小图+2小小图 -->
                    <div class="www_innyun_cn-p2_areaimg">
                        <ul>
                            <!-- 第一个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd1.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd2.png" alt="">
                                    <p class="phonename"> 米家净水器1600G</p>
                                    <p class="describe"> 2.1秒一杯水,还原自来水的澎湃流速</p>
                                    <p class="price">3499元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">4599元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd3.png" alt="">
                                    <p class="phonename"> 小米双核净水器1200G</p>
                                    <p class="describe"> 3.2L/min大流量,鲜活首杯水</p>
                                    <p class="price">2699元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">3499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd4.png" alt="">
                                    <p class="phonename"> 小米即热净水器Q600</p>
                                    <p class="describe"> 净热一体,1秒速热,精选调温每1℃ </p>
                                    <p class="price">2199元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">3499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd5.png" alt="">
                                    <p class="phonename"> 小米净水器H600G
                                    </p>
                                    <p class="describe"> 纯净生活双出水,六级过滤健康直饮</p>
                                    <p class="price">1199元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第六个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd6.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd7.png" alt="">
                                    <p class="phonename"> 米家净水器1000G
                                    </p>
                                    <p class="describe"> 澎湃大水量,5年免换RO滤芯</p>
                                    <p class="price">1699元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd8.png" alt="">
                                    <p class="phonename"> 小米双核净水器1200G
                                    </p>
                                    <p class="describe"> 3.2L/min大流量,鲜活首杯水</p>
                                    <p class="price">2699元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">3499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/cd9.png" alt="">
                                    <p class="phonename"> 小米净水器H800G Pro
                                    </p>
                                    <p class="describe"> 长效过滤,鲜活好水随心出</p>
                                    <p class="price">1599元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">1999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>小米即热净水器Q800</p>
                                        </div>
                                        <div class="price"> 2499元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/mjddhbc3.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">净水器 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/cd10.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 智能家居开始开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>智能家居</h2>
                        </div>
                        <div class="www_innyun_cn-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">小爱音箱</font>
                                    </a></li>
                                <li><a href="">门锁门铃</a></li>
                                <li><a href="">路由器</a></li>
                                <li><a href="">智能设备</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 9小图+2小小图 -->
                    <div class="www_innyun_cn-p2_areaimg">
                        <ul>
                            <!-- 第一个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj2.png" alt="">
                                    <p class="phonename"> Xiaomi智能家庭屏 10</p>
                                    <p class="describe"> MIUI Home|10.1" 高清大屏|115°超广角摄像头|儿童模式|家庭
                                    </p>
                                    <p class="price">899元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj3.png" alt="">
                                    <p class="phonename"> 小米小爱音箱Play 增强版</p>
                                    <p class="describe"> LED时钟显示,语音控制传统家电
                                    </p>
                                    <p class="price">119元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">149元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj4.png" alt="">
                                    <p class="phonename"> 小米小爱音箱 Play</p>
                                    <p class="describe"> 听音乐、语音遥控家电
                                    </p>
                                    <p class="price">99元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">109元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj5.png" alt="">
                                    <p class="phonename"> 小米小爱音箱 Pro
                                    </p>
                                    <p class="describe"> 澎湃低音,语音遥控传统家电</p>
                                    <p class="price">279元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">299元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第六个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj6.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj7.png" alt="">
                                    <p class="phonename"> 小米AI音箱(第二代)
                                    </p>
                                    <p class="describe"> 低频饱满有深度,人声清晰有细节</p>
                                    <p class="price">179元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">199元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj8.png" alt="">
                                    <p class="phonename"> 小米小爱触屏音箱
                                    </p>
                                    <p class="describe"> 可视化智能家居,海量视听资源</p>
                                    <p class="price">219元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">269元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/jj9.png" alt="">
                                    <p class="phonename"> 小米小爱音箱
                                    </p>
                                    <p class="describe"> Hi-Fi级音频芯片,支持AUX IN接口,你桌面的有源音箱</p>
                                    <p class="price">219元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">249元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>Redmi小爱触屏音箱 8英寸</p>
                                        </div>
                                        <div class="price"> 399元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/jj10.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">小爱音箱</p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </ul>
                    </div>
                    <!-- 运动出行开始 -->
                    <div id="mi-show">
                        <div class="mi-h2">
                            <h2>运动出行</h2>
                        </div>
                        <div class="www_innyun_cn-h2-right">
                            <ul>
                                <li><a href="">
                                        <font color="#ff6700">平衡车/滑板车</font>
                                    </a></li>
                                <li><a href="">运动健身</a></li>
                                <li><a href="">箱包配饰</a></li>
                                <li><a href="">出行工具</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 9小图+2小小图 -->
                    <div class="www_innyun_cn-p2_areaimg">
                        <ul>
                            <!-- 第一个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd1.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd2.png" alt="">
                                    <p class="phonename"> 九号平衡车</p>
                                    <p class="describe"> 年轻人的酷玩具
                                    </p>
                                    <p class="price">1999元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2199元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd3.png" alt="">
                                    <p class="phonename"> 九号平衡车燃动版</p>
                                    <p class="describe"> 燃动升级,随走随停
                                    </p>
                                    <p class="price">2199元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2599元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd4.png" alt="">
                                    <p class="phonename"> 九号平衡车 Plus</p>
                                    <p class="describe"> 一个形影不离的新伙伴
                                    </p>
                                    <p class="price">2999元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">3499元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd5.png" alt="">
                                    <p class="phonename"> 米家电动滑板车1S
                                    </p>
                                    <p class="describe"> 型出格,行出色</p>
                                    <p class="price">1799元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2199元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第六个li属性不同 -->
                            <a href="">
                                <li class="bigimg">

                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd6.png" alt="">
                                    

                                </li>
                            </a>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd7.png" alt="">
                                    <p class="phonename"> 小米米家电动滑板车Pro
                                    </p>
                                    <p class="describe"> 性能提升,动力更强劲</p>
                                    <p class="price">2699元&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">3099元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd8.png" alt="">
                                    <p class="phonename"> 九号卡丁车Pro兰博基尼汽车定制版
                                    </p>
                                    <p class="describe"> 九号卡丁车Pro兰博基尼汽车定制版</p>
                                    <p class="price">9999元起</p>
                                    
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/yd9.png" alt="">
                                    <p class="phonename"> 九号平衡车 改装套件(不含平衡车)
                                    </p>
                                    <p class="describe"> 小朋友的大玩具,老顽童的小赛车</p>
                                    <p class="price">2699元起&nbsp;&nbsp;<font color="darkgray"
                                            style="text-decoration: line-through;">2999元</font>
                                    </p>
                                    
                                </a>
                            </li>
                            <!-- 第十小区域-->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="smallname">
                                            <p>米家电动滑板车 3 青春版</p>
                                        </div>
                                        <div class="price"> 1499元 </div>
                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/yd10.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- 第十一小区域 -->
                            <div class="tenaddone"><a href="">
                                    <!-- 左侧文字区域 -->
                                    <div class="left_textarea">
                                        <div class="moreposition">
                                            <p class="text1more">浏览更多</p>
                                            <p class="text2more">净水器 </p>
                                        </div>

                                    </div>
                                    <!-- 右侧图片区域 -->
                                    <div class="right_imgarea">
                                        <div class="smallimgarea"> <img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/hsjt.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- <li>
                                 <a href="">
                                    <img src="http://css.134920.xyz/homework/2023_11_11/img/smareaphonep8.png" alt="">
                                    <p class="phonename"> Redmi 12 5G
                                    </p>
                                    <p class="describe"> 5G 骁龙芯,大屏大电量</p>
                                    <p class="price">949元起</p>
                                    
                                </a>
                            </li> -->
                        </ul>
                    </div>
                    <!-- 横图 -->
                    <div class="footer-hentu">
                        <a href="">
                            <img src="http://css.134920.xyz/homework/2023_11_11/img/xmzxb.png" alt=""></a>
                    </div>
                    <!-- 第二区域结束 -->
                </div>
                <!-- 第三部分开始 -->
                <!-- 白底页面 -->
                <div id="p3color">
                    <!-- 第二部分页面限宽 -->
                    <div id="p3css_134920_xyz-fanwo_top">
                        <!-- 服务区域开始 -->
                        <div id="service">
                            <ul>
                                <a href="">
                                    <li>
                                        <div class="service-img"><img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/bs.png" alt="" />
                                        </div> 预约维修服务
                                    </li>
                                </a>
                                <a href="">
                                    <li>
                                        <div class="service-img"><img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/7.png" alt="" />
                                        </div>七天无理由退货
                                    </li>
                                </a>
                                <a href="">
                                    <li>
                                        <div class="service-img"><img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/15.png" alt="" />
                                        </div> 15天免费换货
                                    </li>
                                </a>
                                <a href="">
                                    <li>
                                        <div class="service-img"><img
                                                src="http://css.134920.xyz/homework/2023_11_11/img/lw.png" alt="" />
                                        </div> 满69元包邮
                                    </li>
                                </a>

                            </ul>
                            <a href="" class="wd">
                                <li>
                                    <div class="service-img"><img
                                            src="http://css.134920.xyz/homework/2023_11_11/img/dw.png" alt="" /></div>
                                    1100余家售后网点
                                </li>
                            </a>
                        </div>
                        <!-- 底部超链接开始 -->
                        <div id="footer-link">
                            <!-- 选购指南区域 -->
                            <div class="help">
                                <div class="top-title">
                                    <p>选购指南</p>
                                </div>
                                <div class="link-area">
                                    <ul> <a href="">
                                            <li>手机</li>
                                        </a> <a href="">
                                            <li>电视</li>
                                        </a> <a href="">
                                            <li>笔记本</li>
                                        </a> <a href="">
                                            <li>平板</li>
                                        </a> <a href="">
                                            <li>穿戴</li>
                                        </a> <a href="">
                                            <li>耳机</li>
                                        </a> <a href="">
                                            <li>家电</li>
                                        </a> <a href="">
                                            <li>路由器</li>
                                        </a> <a href="">
                                            <li>音箱</li>
                                        </a> <a href="">
                                            <li>配件</li>
                                        </a>
                                    </ul>
                                </div>
                            </div>
                            <!-- 服务中心区域 -->
                            <div class="sevice">
                                <div class="top-title">
                                    <p>服务中心</p>
                                </div>
                                <div class="link-area">
                                    <ul> <a href="">
                                            <li>申请售后</li>
                                        </a> <a href="">
                                            <li>服务政策</li>
                                        </a> <a href="">
                                            <li>维修服务价格</li>
                                        </a> <a href="">
                                            <li>订单查询</li>
                                        </a> <a href="">
                                            <li>以旧换新</li>
                                        </a> <a href="">
                                            <li>保障服务</li>
                                        </a> <a href="">
                                            <li>防伪查询</li>
                                        </a> <a href="">
                                            <li>F码通道</li>
                                        </a>

                                    </ul>
                                </div>
                            </div>
                            <!-- 线下门店区域 -->
                            <div class="doorshop">
                                <div class="top-title">
                                    <p>线下门店</p>
                                </div>
                                <div class="link-area">
                                    <ul> <a href="">
                                            <li>小米之家</li>
                                        </a> <a href="">
                                            <li>服务网点</li>
                                        </a> <a href="">
                                            <li>授权体验店/专区</li>
                                        </a>

                                    </ul>
                                </div>
                            </div>
                            <!-- 关于小米区域 -->
                            <div class="about">

                                <div class="top-title">
                                    <p>关于小米</p>
                                </div>
                                <div class="link-area">
                                    <ul> <a href="">
                                            <li>了解小米</li>
                                        </a> <a href="">
                                            <li>加入小米</li>
                                        </a> <a href="">
                                            <li>投资者关系</li>
                                        </a> <a href="">
                                            <li>可持续发展</li>
                                        </a> <a href="">
                                            <li>廉洁举报</li>
                                        </a>
                                    </ul>
                                </div>
                            </div>
                            <!-- 关注我们区域 -->
                            <div class="lookus">
                                <div class="top-title">
                                    <p>关注我们</p>
                                </div>
                                <div class="link-area">
                                    <ul> <a href="">
                                            <li>新浪微博</li>
                                        </a> <a href="">
                                            <li>官方微信</li>
                                        </a> <a href="">
                                            <li>联系我们</li>
                                        </a> <a href="">
                                            <li>公益基金会</li>
                                        </a>
                                    </ul>
                                </div>
                            </div>
                            <!-- 服务热线区域 -->
                            <div class="phonenum">
                                <div class="phonearea">
                                    <p>400-100-5678</p>
                                </div>
                                <div class="worktime">8:00-18:00(仅收市话费)</div>
                                <div class="kfbuttom">
                                    <a href=""> <img src="http://css.134920.xyz/homework/2023_11_11/img/xx.png"
                                            alt="" />人工客服
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第三部分结束 -->
            </div>
            <!-- 第四部分开始 -->
            <!-- 白灰底页面 -->
            <div id="p2color">
                <!-- 区域限宽 -->
                <div id="p4css_134920_xyz-fanwo_top">
                    <!-- 底部文本图片区域 -->
                    <div id="footer-area">
                        <div class="img_mi-footer">
                            <img src="http://css.134920.xyz/homework/2023_11_11/img/mi.png" alt="" />
                        </div>
                        <!-- 超链接 -->
                        <div id="link-one">
                            <p><a href="">小米商城</a>
                             <span class=" smallbar">|</span>
                                    <a href="">MIUI</a>
                                    <span class="smallbar">|</span>
                                    <a href="">米家</a>
                                    <span class="smallbar">|</span>
                                    <a href="">米聊</a>
                                    <span class="smallbar">|</span>
                                    <a href="">多看</a>
                                    <span class="smallbar">|</span>
                                    <a href="">游戏</a>
                                    <span class="smallbar">|</span>
                                    <a href="">音乐</a>
                                    <span class="smallbar">|</span>
                                    <a href="">政企服务</a>
                                    <span class="smallbar">|</span>
                                    <a href="">小米天猫店</a>
                                    <span class="smallbar">|</span>
                                    <a href="">小米集团隐私政策</a>
                                    <span class="smallbar">|</span>
                                    <a href="">小米公司儿童信息保护规则</a>
                                    <span class="smallbar">|</span>
                                    <a href="">小米商城隐私政策</a>
                                    <span class="smallbar">|</span>
                                    <a href="">小米商城用户协议</a>
                                    <span class="smallbar">|</span>
                                    <a href="">问题反馈</a>
                                    <span class="smallbar">|</span>
                                    <a href="">Select Location</a>
                            </p>
                            <p>
                                <a href="">北京互联网法院法律服务工作站</a>
                                <span class="smallbar">|</span>
                                <a href="">中国消费者协会</a>
                                <span class="smallbar">|</span>
                                <a href="">北京市消费者协会</a>
                            </p>
                            <div class="text-center">
                                <p>
                                    <a href="">© mi.com</a><a href="">京ICP证110507号</a>
                                    <a href="">京ICP备10046444号</a><a href="">京公网安备11010802020134号</a>
                                    <a href="">京网文[2023]0169-004号</a>

                                <p>
                                    <a href="">(京)网械平台备字(2018)第00005号</a>
                                    <a href="">互联网药品信息服务资格证</a>
                                    <a href=""> (京)-非经营性-2014-0090 营业执照</a>
                                    <a href="">医疗器械质量公告</a>
                                </p>
                                <p>
                                    <a href="">增值电信业务经营许可证编号:京B2-20180851 </a>
                                    网络食品经营备案
                                    京食药网食备202010048
                                    <a href="">食品经营许可证</a>
                                    新出发京批字第直220280号
                                </p>
                                <p>违法和不良信息举报电话:171-5104-4404 知识产权侵权投诉
                                    本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
                                </p>
                            </div>

                        </div>

                    </div>
                    <!-- 五张小图片 -->
                    <div class="imgfive">
                        <a href="">
                            <img src="http://css.134920.xyz/homework/2023_11_11/img/1.png" alt="" /></a><a href=""><img
                                src="http://css.134920.xyz/homework/2023_11_11/img/2.png" alt="" /></a><a href=""><img
                                src="http://css.134920.xyz/homework/2023_11_11/img/3.png" alt="" /></a><a href=""><img
                                src="http://css.134920.xyz/homework/2023_11_11/img/4.png" alt="" /></a><a href=""><img
                                src="http://css.134920.xyz/homework/2023_11_11/img/5.png" alt="" /></a>
                    </div><br />
                    <!-- 底部文本图片区域结束 -->

                    <div id="theworld">
                        <img src="http://css.134920.xyz/homework/2023_11_11/img/footertext.png" alt="" />
                    </div>

                    <!-- p4css_134920_xyz结束 -->
                </div>

            </div>
            <!-- 大区域结束 -->
        </div>
        <!-- 页面右侧侧边按键 -->
        <div id="css_134920_xyz_homework_2023_11_11_style_cssbuttom">
            <div>
                <ul>
                    <a href="">
                        <li style="border-top: 1px #F0F0F0 solid;">
                            <p><img src="http://css.134920.xyz/homework/2023_11_11/img/app.png" alt=""></p>
                            <p>手机APP</p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p><img src="http://css.134920.xyz/homework/2023_11_11/img/user.png" alt=""></p>
                            <p>个人中心</p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p><img src="http://css.134920.xyz/homework/2023_11_11/img/tool.png" alt=""></p>
                            <p>售后服务</p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p><img src="http://css.134920.xyz/homework/2023_11_11/img/kf.png" alt=""></p>
                            <p>人工客服</p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p><img src="http://css.134920.xyz/homework/2023_11_11/img/shopping.png" alt=""></p>
                            <p>购物车</p>
                        </li>
                    </a>
                </ul>
            </div>
        </div>

    </body>
</html>

CSS:

/*
 -------------------------------
外部css:css.134920.xyz
 -------------------------------
//Time:2023/11/11
 -------------------------------
//Author:快乐的钟好烦
 -------------------------------
//突破自己,急速前进
 -------------------------------
HtmlFrom:https://blog.fanl.cn
 -------------------------------
 */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

#top {
    /* 顶部样式 */
    width: 100%;
    height: 40px;
    /* 调色板红蓝绿70 */
    background-color: rgb(0, 0, 0);
}

body {
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    color: #333;
    min-width: 1226px;
}

#top a {
    /* 顶部超链接样式     */
    color: darkgrey;
    text-decoration: none;
    font-size: 13px;
    font-family: "宋体";
    line-height: 40px;
}

#top a:hover {
    color: white;
}

#www_fanwo_top_css_134920_xyz {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}

#top_left {
    /* 顶部左侧 */
    float: left;
line-height: 40px;
}

#top_right {
    float: right;
line-height: 40px;
}

#top_right .shop{
    float: right;
    list-style: none;
    width: 150px;
    text-align: right;
}
#top_right .shop a{
    /*左边距*/
margin-right: 15px;
}

.smallbar {
    /* 小竖线 */
    color: dimgray;
    font-size: 10px;
    margin: 0 2px 0 2px;
}

#p1color {
    margin: 0 auto;
    width: 1226px;
    background-color: #fff;
}

#p2color {
    background-color: rgb(247, 247, 247);
}
#p3color {
    background-color: #fff;
}
#header_top {
    width: 1226px;
    margin: 0 auto;
    height: 75px;
}

.img_mi {
    width: 56px;
    margin: 22px 0 22px 0;
    margin-left: 5px;
}

.img_mi img {
    float: left;
    height: 56px;
    width: 56px;
}

/* 外部css:css.134920.xyz */

.header_nav {
    float: left;
    width: 850px;
    height: 88px;
}

/* 234-56=width */
.header_nav .bai {
    float: left;
    width: 178px;
    height: 88px;
}

.header_nav .nav_link {
    float: left;
    width: auto;
}

.header_nav .nav_link ul li {
    float: left;
    list-style: none;
    height: 88px;
}

.header_nav .nav_link li a {
    position: relative;
    top: 14px;
    text-decoration: none;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 12px 0 0 20px;
    color: rgb(92, 92, 92);
}

.header_nav .nav_link li a:hover {
    color: #ff6700;
}

/* 搜索框样式来自菜鸟教程*/
#header_top .search {
    float: right;
    position: relative;
    right: 0;
    width: 310px;
}

.search input {
    float: right;
    padding: 15px;
    font-size: 18px;
    border: 1px solid darkgray;
    width: 220px;
    background: white;
}

.search button {
    float: right;
    width: 48px;
    padding: 15px;
    background: white;
    color: darkgray;
    font-size: 18px;
    border: 1px solid darkgray;
    border-left: none;
    /* 防止双边框 */
    cursor: pointer;
}

.search button:hover {
    /* 背景橙色,文本白色 */
    background-color: #ff6700;
    color: #fff;
}
#www_fanwo_top_archives_486_html_one {
    display: flex;
    margin: 0 auto;
    width: 1226px;
    height: 460px;
    /* 外部css:css.134920.xyz */

}

#www_fanwo_top_archives_486_html_one .left {
    width: 234px;
    height: 460px;
    font-size: 14px;
    color: #fff;

}

#www_fanwo_top_archives_486_html_one .left ul {
    height: 420px;
    border: 0;
    background: rgba(105, 101, 101, .6);
    margin: 0;
    padding: 20px 0;
    list-style-type: none;
}

#www_fanwo_top_archives_486_html_one .left ul li {
    position: relative;
    display: block;
    padding-left: 1px;
    height: 42px;
    line-height: 42px;
}

#www_fanwo_top_archives_486_html_one .left ul li a {
    position: relative;
    display: block;
    padding-left: 28px;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    color: white;
    text-decoration: none;
}
#www_fanwo_top_archives_486_html_one .left ul li a:hover {
    background-color: #ff6700;
}

#www_fanwo_top_archives_486_html_one .left ul li a img {
    float: right;
    margin: 10px;
    width: 20px;
    height: 20px;
}

.right_img {
    flex: 1;
    float: left;
    width: 992px;
    height: 460px;
    background-image: url("../img/top1img.png");
    background-size: cover;
}

#www_fanwo_top_archives_486_html_two {
    margin: 18px auto;
    width: 1240px;
    height: 170px;

}

#www_fanwo_top_archives_486_html_two .left {
    float: left;
    margin-left: 0 7px 0 0;
    width: 234px;
    height: 170px;
    background-color: #5f5750;
}

#www_fanwo_top_archives_486_html_two .left ul li {
    float: left;
    padding: 4px;
    margin: 15px 0 0 0;
    text-align: center;
    list-style: none;
    width: 70px;
    height: 63.6px;
    font-size: 13px;

}

#www_fanwo_top_archives_486_html_two .left ul li a {
    text-decoration: none;
    color: darkgray;

}

#www_fanwo_top_archives_486_html_two .left ul li a:hover {
    color: #ffffff;

}

#www_fanwo_top_archives_486_html_two .left ul li a img {
    width: 24px;
    height: 24px;
}

#www_fanwo_top_archives_486_html_two .css_134920_xyz1 {
    margin: 0 5px 0px 15px;
    float: left;
    width: 316px;
    height: 170px;

}

#www_fanwo_top_archives_486_html_two .css_134920_xyz2 {
    margin: 0 5px 0px 9px;
    float: left;
    width: 316px;
    height: 170px;
}

#www_fanwo_top_archives_486_html_two .css_134920_xyz3 {
    margin: 0 0px 0px 9px;
    float: left;
    width: 316px;
    height: 170px;

}

#www_fanwo_top_archives_486_html_two .css_134920_xyz_img-set img {

    width: 316px;
    height: 170px;

}

#p2css_134920_xyz-fanwo_top {
    margin: 0 auto;
    width: 1226px;
    height: 5888px;


}

#p3css_134920_xyz-fanwo_top {
    margin: 30px auto;
    width: 1226px;
    height: 468px;


}

#p4css_134920_xyz-fanwo_top {
    margin: 0 auto;
    width: 1226px;
    height: 263.2px;
}

#p2css_134920_xyz-fanwo_top .hentu img {
    width: 1226px;
    height: 120px;
    margin: 26.2px 0 26.2px 0;
}

#isolatefontarea {
    height: 39.6px;
    margin: 0 0 10px 0;
}

.phone_text {
    float: left;
    font-family: "宋体";
    color: #333;
    width: 77px;
    font-size: 15px;
}

.right_lookmore {
    float: left;
    margin: 10px 0 0 1057px;
    color: #333;
}

.right_lookmore a {
    font-size: 16px;
    text-decoration: none;


}
.img_more {
    float: left;
    width: 25px;
    height: 25px;
}

#isolatefontarea .img_more img {
    margin: 10px 0 0 10px;
    width: 20px;
    height: 20px;
}

.leftlongimg {
    float: left;
    width: 234px;
    height: 614px;
}

#p2css_134920_xyz-fanwo_top .leftlongimg a img {
    width: 234px;
    height: 614px;
}

.p2_areaimg {
    float: left;
    width: 992px;
    height: 614px;
    text-align: center;
}

.p2_areaimg ul li {
    float: left;
    width: 234px;
    height: 300px;
    list-style: none;
    background-color: #fff;
    margin: 0 5px 12px 9px;
}

.p2_areaimg ul li a {
    padding: 10px;
    text-decoration: none;
}

.p2_areaimg ul li a p .title {
    color: #333;
    font-size: 14px;
}

.p2_areaimg ul li a img {
    width: 160px;
    height: 160px;
}



.phonename {
    padding: 18px;
    width: 205px;
    height: 1px;
    text-align: center;
    overflow: hidden;
    color: black;
}

.describe {
    margin: 6px 0 10px 8px;
    width: 200px;
    height: 10px;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    color: darkgray;
    font-size: 10px;
}

.price {
    text-align: center;
    color: #ff6700;
    font-size: 14px;
}

#mi-show {
    float: left;
    margin: 25px 0 10px 0;
    width: 1226px;
    height: 50px;
}


.mi-h2 {
    margin-top: 10px;
    float: left;
    width: 150px;
    font-size: 15px;
    font-family: "宋体";
}

.mi-h2-right {
    margin-top: 20px;
    float: right;

}

.mi-h2-right li {
    float: left;
    width: 45px;
    list-style: none;
}

.mi-h2-right li a {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 16px;
}

.hot-h2-right {
    margin-top: 20px;
    float: right;
    width: 45px;
}

.hot-h2-right li {
    float: left;
    width: 55px;
    list-style: none;
}

.hot-h2-right li a {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 16px;
}

/* 外部css:css.134920.xyz */
/* 家电以下样式整合: */
.www_innyun_cn-h2-right {
    margin-top: 20px;
    float: right;
    width: auto;
}

.www_innyun_cn-h2-right li {
    float: left;
    list-style: none;
    margin: 0 15px 0 14px;
}

.www_innyun_cn-h2-right li a {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 16px;
}

.www_innyun_cn-p2_areaimg {
    float: left;
    width: 1226px;
    height: 614px;
    text-align: center;
}

.www_innyun_cn-p2_areaimg ul li {
    float: left;
    width: 234px;
    height: 300px;
    list-style: none;
    background-color: #fff;
    margin: 0 11.2px 12px 0;
}

.www_innyun_cn-p2_areaimg ul li a {
    padding: 10px;
    text-decoration: none;
}

.www_innyun_cn-p2_areaimg ul li a p .title {
    color: #333;
    font-size: 14px;
}

.www_innyun_cn-p2_areaimg ul li a img {
    width: 160px;
    height: 160px;
}

/* 智能穿戴区域小区块 */
.hottenaddone {
    float: left;
    width: 234px;
    height: 143px;
    list-style: none;
    background-color: #fff;
    margin: 0.5px 0px 12px 9px;
}

.hottenaddone a {
    color: black;
}

.tenaddone {
    float: left;
    width: 234px;
    height: 143px;
    list-style: none;
    background-color: #fff;
    margin: 1px 11.2px 12px 0;
}

.tenaddone a {
    color: black;
}

.left_textarea {
    float: left;
    width: 124px;
    height: 143px;
}

.right_imgarea {
    float: left;
    width: 110px;
    height: 143px;
}

.smallimgarea {
    margin: 30px auto;
    width: 90px;
    height: 90px;
}

.smallimgarea img {
    width: 80px;
    height: 80px;
}

.smallname {
    margin: 35px 0px 5px 33px;
    text-align: left;
}

.moreposition {
    margin: 48px 0 5px 33px;
    text-align: left;
}

.text1more {
    font-size: 18px;
}

.text2more {
    font-size: 12px;
    color: darkgray;
}

/* 外部css:css.134920.xyz */
.www_innyun_cn-p2_areaimg .bigimg {
    float: left;
    width: 234px;
    height: 300px;
    list-style: none;
    background-color: #fff;
    margin: 0 11.2px 12px 0;
}

.www_innyun_cn-p2_areaimg .bigimg img {
    width: 234px;
    height: 300px;
}

.footer-hentu {
    float: left;
    margin: 30px 0 0 0;
}

.footer-hentu img {
    width: 1216px;
    height: 120px;
}

#service {
    height: 80px;
    border-bottom: 1px solid darkgrey;
}


#service ul {
    text-align: left;
    list-style: none;
}

#service ul li {
    float: left;
    width: 234.74px;
    height: 30px;
    margin: 27.5px 0 0 0;
    border-right: 1px darkgray solid;
    text-decoration: none;
    color: #333;
}

#service ul li img {
    width: 24px;
    height: 24px;

}

#service ul li .service-img {
    float: left;
    margin: 0 10px 0 55px;

}

.service-img {
    float: left;
    margin: 0 5px 0 50px;

}

.wd img {
    width: 24px;
    height: 24px;
}

.wd {
    border: none;
    float: left;
    width: 234.74px;
    height: 25px;
    margin: 27.5px 0 0 0;
    text-align: left;
    list-style: none;
    color: #333;
    font-size: 16px;
    text-decoration: none;
}

#service a:hover li {
    color: #f25807;
}

#footer-link {
    padding: 40px;
    height: 387.8px;
    margin-left: 102px;
}

#footer-link ul {
    list-style: none;
}

#footer-link ul li {
    margin: 8px 0 0 0;
}

#footer-link .top-title {
    margin: 0 0 25px 0;
    font-size: 15px;
    color: black;
    font-family: "黑体";

}

#footer-link .link-area a {
    text-decoration: none;
    color: #757575;
    font-size: 13px;
}

#footer-link .link-area a:hover {
    color: #f25807;
}

/* 外部css:css.134920.xyz */
#footer-link .help {
    float: left;
    width: 160px;
    height: 307.8px;
}

#footer-link .sevice {
    float: left;
    width: 160px;
    height: 307.8px;
}

#footer-link .doorshop {
    float: left;
    width: 160px;
    height: 307.8px;
}

#footer-link .about {
    float: left;
    width: 160px;
    height: 307.8px;
}

#footer-link .lookus {
    float: left;
    width: 160px;
    height: 307.8px;
}

#footer-link .phonenum {
    float: left;
    width: 150px;
    height: 79.2px;
    border-left: 1px solid darkgray;
    padding-left: 60px;
}

#footer-link .phonenum .phonearea {
    width: 251px;
    height: 21.6px;
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
    margin-bottom: 5px;
}

#footer-link .phonenum .worktime {
    width: 251px;
    height: 17.6px;
    margin: 0 0 5px 0;
    font-size: 12px;
}

#footer-link .phonenum .kfbuttom {
    width: 120px;
    height: 30px;
    border: 1px #f25807 solid;
    text-align: center;
}

#footer-link .phonenum .kfbuttom a {
    text-decoration: none;
    color: #f25807;
    font-size: 12px;
}

#footer-link .phonenum .kfbuttom:hover {
    background-color: #f25807;
}

#footer-link .phonenum .kfbuttom a:hover {
    color: white;
}

#footer-link .phonenum .kfbuttom a img {
    width: 18px;
    height: 18px;
    margin: 3px 2px 0 0;
}

#footer-area {
    height: 107.2px;
    padding: 10px;
}

#footer-area .img_mi-footer {
    float: left;
    margin: 0 0 22px 0;
    margin-left: 5px;
    padding: 10px;
    height: 107.2px;
}

.img_mi-footer img {
    height: 56px;
    width: 56px;
}

/* 外部css:css.134920.xyz */

#link-one {
    padding-left: 20px;
    height: 18.4px;
    font-size: 12px;
}

#link-one p {
    height: 18.4px;
    font-size: 12px;
    margin-top: 4px;
}

#link-one p a:hover {
    color: #ff6700;
}

#link-one .text-center p {
    height: 18.4px;
    font-size: 12px;
    margin-top: 0px;
    color: darkgray;
}

#link-one p a {
    text-decoration: none;
    color: black;
}

#link-one .text-center p a {
    text-decoration: none;
    color: darkgray;
}

#link-one .text-center p a:hover {
    color: #ff6700;
}

.imgfive {

    height: 28px;
    margin-top: 8px;
}

.imgfive img {
    width: 83.01px;
    height: 28px;
}

#theworld {
    margin: 5px auto;
    text-align: center;
}

#theworld img {
    width: 400px;
    height: 40px;
}

/*窗口绝对定位*/
#css_134920_xyz_homework_2023_11_11_style_cssbuttom {
    position: fixed;
    top: 220px;
    right: 0;
    width: 84px;
    height: 460px;
    background-color: #fff;
    text-align: center;
}

#css_134920_xyz_homework_2023_11_11_style_cssbuttom ul {
    list-style: none;
}

#css_134920_xyz_homework_2023_11_11_style_cssbuttom ul li {
    width: 84px;
    height: 92px;
    border: 1px #F0F0F0 solid;
    border-top: none;
}

#css_134920_xyz_homework_2023_11_11_style_cssbuttom ul li img {
    width: 40px;
    height: 40px;
    margin: 5px;
}

#css_134920_xyz_homework_2023_11_11_style_cssbuttom ul a {
    color: black;
    text-decoration: none;
}

#css_134920_xyz_homework_2023_11_11_style_cssbuttom ul a:hover {
    color: #ff6700;
}

/*
 -------------------------------
外部css:css.134920.xyz
 -------------------------------
//Time:2023/11/11
 -------------------------------
//Author:快乐的钟好烦
 -------------------------------
//突破自己,急速前进
 -------------------------------
HtmlFrom:https://blog.fanl.cn
 -------------------------------
 */

写的眼都花了,,,,...

打赏
评论区
头像
友链申请 - 网站地图 - 本站主题 - 给我留言