网页设计作业 - 小米商城首页
小米商城首页（未实现交互，仅html+img）
花了差不多10个小时，写了个空壳 ::(黑线)
图片和文字保存+调整，调到吐血，，，
记录一下吧，虽然有点丑单起码自己做过。
//2023.11.15：优化内容：
- 优化右上角区域宽度
- 添加页面1左侧导航覆盖色
- 搜索图标覆盖按钮色
- 页面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元起 <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元起 <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元起 <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元起 <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">耳机 </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元起 <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元起 <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元起 <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元起 <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元起 <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元起 <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元起 <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元起 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元 <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元起 <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
-------------------------------
*/