12.06课堂笔记以及作业
来源：互联网 发布：万方数据库怎么检索 编辑：程序博客网 时间：2024/05/23 01:24
1、Bootstrap
1、1辅助类和响应式工具
辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。
情景背景色
- text-muted 柔和灰
- text-primary 主要蓝
- text-success 成功绿
- text-info 信息蓝
- text-warning 警告黄
- text-danger 危险红
各种色调的背景
<p class="text-muted">BOOTSTRAP</p><p class="text-primary">BOOTSTRAP</p><p class="text-warning">BOOTSTRAP</p><p class="text-danger">BOOTSTRAP</p><p class="text-success">BOOTSTRAP</p><p class="text-info">BOOTSTRAP</p>关闭按钮
×
三角符号
<span class="caret"></span>快速浮动
<div class="pull-left a">aaaa</div>//使用了!important加强了优先级块级居中
<div class="center-block">居中</div>清理浮动
<div style="border: 1px solid red;"> <div class="pull-left a">aaaa</div> <div class="clearfix"></div></div>显示和隐藏
<div class="show">show</div><div class="hidden">hidden</div>响应式工具
在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。
超小屏幕激活显示
<div class="visible-xs-block a">aaa</div>超小屏幕激活隐藏
<div class="hidden-xs a">bbb</div>注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。
1.2 图标菜单按钮组件
小图标组件
可以使用或标签来配合使用，具体如下：
使用小图标
<span class="glyphicon glyphicon-lock"></span><i class="glyphicon glyphicon-lock"></i>也可以结合按钮
<button class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-lock"></span></button>下拉菜单组件
下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
基本格式
<div class="dropdown open"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu "> <li class="dropdown-header">下拉标题</li> <li><a href="#">首页</a></li> <li class="divider"> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul></div>按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。
设置向上触发
<div class=”dropup”>菜单项居右对齐，默认值是
dropdown-menu-left<ul class="dropdown-menu dropdown-menu-right">设置菜单的标题，不要加超链接
<li class="dropdown-header">下拉标题</li>设置菜单的分割线
<li class="divider"></li>设置菜单的禁用项
<li class="disabled"><a href="#">关于</a></li>让菜单默认显示
<div class="dropdown open">按钮组组件
按钮组就是多个按钮集成在一个容器里形成独有的效果。
基本格式
<div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button></div>将多个按钮组整合起来便于管理
<div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div></div>嵌套一个分组，比如下拉菜单
<div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">下拉标题</li> <li><a href="#">首页</a></li> <li class="divider"> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#"> 关于</a></li> </ul> </div></div>设置按钮组垂直排列
<div class="btn-group-vertical"></div>如果需要使用标签，则需要对每个按钮进行群组
<div class="btn-group-justified"> <div class="btn-group"> <button class="btn btn-default">左</button> </div> <div class="btn-group"> <button class="btn btn-default">左</button> </div> <div class="btn-group"> <button class="btn btn-default">左</button> </div></div>1.3输入框和导航组件
输入框组件
文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展。
在左侧添加文字
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"></div>在右侧添加文字
div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">@163.com</span></div>在两侧添加文字
<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span></div>设置尺寸，另外三种分别是默认、xs、sm
<div class="input-group input-group-lg">左侧使用复选框和单选框
<div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"></div><div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"></div>左侧使用按钮
<div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default">按钮</button> </span> <input type="text" class="form-control"> </div>左侧使用下拉菜单或分列式
<div class="input-group"><span class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">网站导航</li> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li class="divider"><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul></span><input type="text" class="form-control"> </div>导航组件
Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。
基本导航标签页
<ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li></ul>胶囊式导航
<ul class="nav nav-pills">垂直胶囊式导航
<ul class="nav nav-pills nav-stacked">导航两端对齐
<ul class="nav nav-pills nav-justified">带下拉菜单的导航
<ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 </a> <ul class="dropdown-menu"> <li class="dropdown-header">下拉标题</li> <li><a href="#">首页</a></li> <li class="divider"> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> </li> </ul>导航条组件
导航条是在应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
导航条是网站中作为导航页头的响应式基础组件。
基本格式
<nav class="navbar navbar-default">...</nav>反色调导航
<nav class="navbar navbar-inverse">...</nav>基本导航条，包含标题和列表
<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"> <a href="#">关于</a></li> </ul></div></nav>导航条中使用表单
<form action="" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> 提交 </button> </span> </div></form>导航中使用按钮
<button class="btn btn-default navbar-btn navbar-right">按钮</button>导航中使用对齐方式，left和right
<button class="btn btn-default navbar-btn navbar-right">按钮</button>导航中使用一段文本
<p class="navbar-text">我是一段文本</p>非导航链接，一般需要置入文本区域内
<a href="#" class="navbar-link">非导航链接</a>将导航固定在顶部，下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">将导航补丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">静态导航，和页面等宽的导航条，去掉了圆角
<nav class="navbar navbar-default navbar-static-top">12.06作业
临摹米家有品首页
（1）html
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>有品</title> <link href="css/base.css" type="text/css" rel="stylesheet" /> <link href="css/top-footer-standard.css" type="text/css" rel="stylesheet" /> <link href="css/standard.css" type="text/css" rel="stylesheet" /> <link href="css/standard-1.css" type="text/css" rel="stylesheet" /> <link href="css/animate.css" type="text/css" rel="stylesheet" /> <link href="css/duplicate.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="root"> <div class="home-wrap"> <div class="m-site-top"> <div class="container"> <div class="fr"> <div class="fl-m-user-con site-item"> <div class="m-no-login"> <a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">登录</a> <a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">注册</a> </div> <span class="fl-m-line"></span> <div class="clearfix"></div> </div> <div class="fr-m-download site-item"> <a href="#" class="m-safe-anchor"> <span class="icon fr-m-download-small-icon"></span> 下载APP </a> <div class="site-item-nav"> <div class="site-nav-inner"> <img class="qr-code" src="img/c1.png" /> <p> 下载有品APP<br /> 得新人1000元礼包 </p> </div> </div> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> <div class="m-header"> <div class="container"> <div class="m-header-top"> <div class="m-logo"> <img src="img/c2.png" /> </div> <div class="m-card-wrap"> <div class="icon m-card-wrap-small-icon"></div> </div> <div class="m-search"> <div class="search-form "> <div class="search-card-wrap"> <div class="icon search-card-wrap-small-icon"></div> </div> <div class="search-input-con"> <input type="text" placeholder="冬日里不能错过的美食" /> </div> <div class="clearfix"></div> </div> </div> </div> <div class="m-nav"> <ul class="nav-list"> <li data-index="0"><span class="item">有品推荐</span></li> <li data-index="1"><span class="item">家电</span></li> <li data-index="2"><span class="item">影音</span></li> <li data-index="3"><span class="item">餐厨</span></li> <li data-index="4"><span class="item">服饰</span></li> <li data-index="5"><span class="item">智能</span></li> <li data-index="6"><span class="item">健康</span></li> <li data-index="7"><span class="item">洗护</span></li> <li data-index="8"><span class="item">日杂</span></li> <li data-index="9"><span class="item">饮食</span></li> <li data-index="10"><span class="item">居家</span></li> <li data-index="11"><span class="item">手机</span></li> <li data-index="12"><span class="item">箱包</span></li> <li data-index="13"><span class="item">配件</span></li> <li data-index="14"><span class="item">婴童</span></li> <li data-index="15"><span class="item">出行</span></li> <li data-index="16"><span class="item">品牌</span></li> <div class="clearfix"></div> </ul> <div class="nav-menu" style="display: none;"> <ul class="nav-menu-list" data-index="0" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-0-1.jpg" alt="" /> </div> <p class="nav-menu-info">1212特惠</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-0-2.jpg" alt="" /> </div> <p class="nav-menu-info">新品</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-0-3.jpg" alt="" /> </div> <p class="nav-menu-info">应季</p> </li> <li> <div class="nav-menu-img"> <img src=" img/header-0-4.jpg" alt="" /> </div> <p class="nav-menu-info">男士</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-0-5.jpg" alt="" /> </div> <p class="nav-menu-info">女士</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="1" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-1-1.jpg" alt="" /> </div> <p class="nav-menu-info">空气净化器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-2.jpg" alt="" /> </div> <p class="nav-menu-info">净水器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-3.jpg" alt="" /> </div> <p class="nav-menu-info">洗衣机</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-4.jpg" alt="" /> </div> <p class="nav-menu-info">冰箱</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-5.jpg" alt="" /> </div> <p class="nav-menu-info">生活电器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-6.jpg" alt="" /> </div> <p class="nav-menu-info">空调/电扇</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-1-7.jpg" alt="" /> </div> <p class="nav-menu-info">厨房家电</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="2" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-2-1.jpg" alt="" /> </div> <p class="nav-menu-info">电视</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-2-2.jpg" alt="" /> </div> <p class="nav-menu-info">盒子</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-2-3.jpg" alt="" /> </div> <p class="nav-menu-info">投影</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-2-4.jpg" alt="" /> </div> <p class="nav-menu-info">音箱</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="3" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-3-1.jpg" alt="" /> </div> <p class="nav-menu-info">厨房电器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-2.jpg" alt="" /> </div> <p class="nav-menu-info">锅具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-3.jpg" alt="" /> </div> <p class="nav-menu-info">餐具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-4.jpg" alt="" /> </div> <p class="nav-menu-info">杯壶</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-5.jpg" alt="" /> </div> <p class="nav-menu-info">功能厨具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-6.jpg" alt="" /> </div> <p class="nav-menu-info">刀剪砧板</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-3-7.jpg" alt="" /> </div> <p class="nav-menu-info">保鲜收纳</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="4" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-4-1.jpg" alt="" /> </div> <p class="nav-menu-info">服装</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-4-2.jpg" alt="" /> </div> <p class="nav-menu-info">鞋袜</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-4-3.jpg" alt="" /> </div> <p class="nav-menu-info">眼镜</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-4-4.jpg" alt="" /> </div> <p class="nav-menu-info">配饰</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-4-5.jpg" alt="" /> </div> <p class="nav-menu-info">内衣</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="5" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-5-1.jpg" alt="" /> </div> <p class="nav-menu-info">小米笔记本Pro</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-2.jpg" alt="" /> </div> <p class="nav-menu-info">小米笔记本Air</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-3.jpg" alt="" /> </div> <p class="nav-menu-info">智能家庭套装</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-4.jpg" alt="" /> </div> <p class="nav-menu-info">安防</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-5.jpg" alt="" /> </div> <p class="nav-menu-info">网关/传感器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-6.jpg" alt="" /> </div> <p class="nav-menu-info">路由器</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-7.jpg" alt="" /> </div> <p class="nav-menu-info">开关/插座</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-8.jpg" alt="" /> </div> <p class="nav-menu-info">相机</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-5-9.jpg" alt="" /> </div> <p class="nav-menu-info">穿戴</p> </li> <li> <p class="nav-menu-info nav-menu-info-more">更多></p> </li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="6" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-6-1.jpg" alt="" /> </div> <p class="nav-menu-info">康体监护</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-6-2.jpg" alt="" /> </div> <p class="nav-menu-info">运动健身</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-6-3.jpg" alt="" /> </div> <p class="nav-menu-info">护理护具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-6-4.jpg" alt="" /> </div> <p class="nav-menu-info">保健器械</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="7" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-7-1.jpg" alt="" /> </div> <p class="nav-menu-info">空腔清洁</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-7-2.jpg" alt="" /> </div> <p class="nav-menu-info">面部护理</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-7-3.jpg" alt="" /> </div> <p class="nav-menu-info">毛巾浴巾</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-7-4.jpg" alt="" /> </div> <p class="nav-menu-info">美发护发</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-7-5.jpg" alt="" /> </div> <p class="nav-menu-info">身体呵护</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-7-6.jpg" alt="" /> </div> <p class="nav-menu-info">洗涤清理</p> </li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="8" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-8-1.jpg" alt="" /> </div> <p class="nav-menu-info">日用</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-8-2.jpg" alt="" /> </div> <p class="nav-menu-info">工具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-8-3.jpg" alt="" /> </div> <p class="nav-menu-info">清洁</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-8-4.jpg" alt="" /> </div> <p class="nav-menu-info">文具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-8-5.jpg" alt="" /> </div> <p class="nav-menu-info">收纳</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="9" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-9-1.jpg" alt="" /> </div> <p class="nav-menu-info">酒水</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-9-2.jpg" alt="" /> </div> <p class="nav-menu-info">休闲小食</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-9-3.jpg" alt="" /> </div> <p class="nav-menu-info">冲饮/茗茶</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-9-4.jpg" alt="" /> </div> <p class="nav-menu-info">杂粮/食材</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-9-5.jpg" alt="" /> </div> <p class="nav-menu-info">生鲜</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="10" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-10-1.jpg" alt="" /> </div> <p class="nav-menu-info">床垫</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-2.jpg" alt="" /> </div> <p class="nav-menu-info">被枕</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-3.jpg" alt="" /> </div> <p class="nav-menu-info">床品件套</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-4.jpg" alt="" /> </div> <p class="nav-menu-info">灯具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-5.jpg" alt="" /> </div> <p class="nav-menu-info">家具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-6.jpg" alt="" /> </div> <p class="nav-menu-info">花卉盆栽</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-7.jpg" alt="" /> </div> <p class="nav-menu-info">家饰</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-10-8.jpg" alt="" /> </div> <p class="nav-menu-info">布艺软装</p> </li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="11" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-11-1.jpg" alt="" /> </div> <p class="nav-menu-info">小米系列</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-11-2.jpg" alt="" /> </div> <p class="nav-menu-info">红米系列</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="12" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-12-1.jpg" alt="" /> </div> <p class="nav-menu-info">背包</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-12-2.jpg" alt="" /> </div> <p class="nav-menu-info">旅行箱</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-12-3.jpg" alt="" /> </div> <p class="nav-menu-info">钱包/卡包</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-12-4.jpg" alt="" /> </div> <p class="nav-menu-info">功能箱包</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="13" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-13-1.jpg" alt="" /> </div> <p class="nav-menu-info">电竞</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-2.png" alt="" /> </div> <p class="nav-menu-info">电源/电池</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-3.jpg" alt="" /> </div> <p class="nav-menu-info">手机周边</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-4.jpg" alt="" /> </div> <p class="nav-menu-info">办公周边</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-5.jpg" alt="" /> </div> <p class="nav-menu-info">耳机</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-6.png" alt="" /> </div> <p class="nav-menu-info">插线板</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-13-7.png" alt="" /> </div> <p class="nav-menu-info">适配器/线材</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="14" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-14-1.jpg" alt="" /> </div> <p class="nav-menu-info">玩具</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-14-2.jpg" alt="" /> </div> <p class="nav-menu-info">儿童穿戴</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-14-3.jpg" alt="" /> </div> <p class="nav-menu-info">洗护</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-14-4.jpg" alt="" /> </div> <p class="nav-menu-info">寝居</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-14-5.jpg" alt="" /> </div> <p class="nav-menu-info">服饰箱包</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-14-6.jpg" alt="" /> </div> <p class="nav-menu-info">出行</p> </li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="15" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-15-1.jpg" alt="" /> </div> <p class="nav-menu-info">骑行</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-15-2.jpg" alt="" /> </div> <p class="nav-menu-info">汽车用品</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-15-3.jpg" alt="" /> </div> <p class="nav-menu-info">户外</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="16" style="display: none;"> <li> <div class="nav-menu-img"> <img src="img/header-16-1.jpg" alt="" /> </div> <p class="nav-menu-info">8H</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-2.jpg" alt="" /> </div> <p class="nav-menu-info">90分</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-3.jpg" alt="" /> </div> <p class="nav-menu-info">Yeelight</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-4.jpg" alt="" /> </div> <p class="nav-menu-info">一悟一什</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-5.jpg" alt="" /> </div> <p class="nav-menu-info">云米</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-6.jpg" alt="" /> </div> <p class="nav-menu-info">小吉</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-7.jpg" alt="" /> </div> <p class="nav-menu-info">素士</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-8.jpg" alt="" /> </div> <p class="nav-menu-info">最生活</p> </li> <li> <div class="nav-menu-img"> <img src="img/header-16-9.jpg" alt="" /> </div> <p class="nav-menu-info">cottonsmith</p> </li> <li> <p class="nav-menu-info nav-menu-info-more">更多></p> </li> <div class="clearfix"></div> </ul> </div> <div class="clearfix"></div> </div> </div> </div> <div class="m-banner"> <div class="m-ban-con"> <div class="swiper-container"> <div class="swiper-wrapper swiper-wrapper-banner"> <a href="#" style="display: none;" data-swiper-slide-index="0"><img src="img/move1.jpg"></a> <a href="#" style="display: none;" data-swiper-slide-index="1"><img src="img/move2.jpg"></a> <a href="#" style="display: none;" data-swiper-slide-index="2"><img src="img/move3.jpg"></a> <a href="#" style="display: none;" data-swiper-slide-index="3"><img src="img/move4.jpg"></a> <a href="#" style="display: none;" data-swiper-slide-index="4"><img src="img/move5.jpg"></a> </div> <div class="swiper-pagination"> <!--<span class="swiper-pagination-bullet" data-swiper-pagination-index="0"> <input type="radio" /> </span> <span class="swiper-pagination-bullet" data-swiper-pagination-index="1"> <input type="radio" /> </span> <span class="swiper-pagination-bullet" data-swiper-pagination-index="2"> <input type="radio" /> </span> <span class="swiper-pagination-bullet" data-swiper-pagination-index="3"> <input type="radio" /> </span> <span class="swiper-pagination-bullet" data-swiper-pagination-index="4"> <input type="radio" /> </span>--> <input type="radio" name="aaa" style="margin: 0 6px;" data-swiper-pagination-index="0"/> <input type="radio" name="aaa" style="margin: 0 6px;" data-swiper-pagination-index="1"/> <input type="radio" name="aaa" style="margin: 0 6px;" data-swiper-pagination-index="2"/> <input type="radio" name="aaa" style="margin: 0 6px;" data-swiper-pagination-index="3"/> <input type="radio" name="aaa" style="margin: 0 6px;" data-swiper-pagination-index="4"/> </div> <div class="icon swiper-button-prev swiper-pagination-button-prev"></div> <div class="icon swiper-button-next swiper-pagination-button-next"></div> </div> </div> </div> <div class="p-hero-wrap"> <div class="container"> <ul class="p-hreo-nav"> <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=r9509d039c0bc6bc4"> <img src="img/p1.jpg" alt="" /> </li> <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=s8939d03918810635"> <img src="img/p2.jpg" alt="" /> </li> <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"> <img src="img/p3.jpg" alt="" /> </li> <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=qcec75039f10ed7b3"> <img src="img/p4.jpg" alt="" /> </li> <li class="m-tag-a no-mr" data-src="https://home.mi.com/app/shop/content?id=rada7d03957b90e05"> <img src="img/p5.jpg" alt="" /> </li> </ul> </div> </div> <div class="h-section h-sec1"> <div class="container"> <div class="h-sec-top"> <h2 class="h-subTit"> 有品推荐 <span>有品为您甄选 悦心购买</span> </h2> <a href="">更多></a> <div class="clearfix"></div> </div> <div class="m-sec-main"> <div class="item-pos0" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"> <div class="h-layer-con"> <div data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"> <img src="img/h-sec1-1.jpg" alt="" /> <img src="img/h-sec1-2.png" alt="" /> <div class="clearfix"></div> </div> </div> </div> <div class="item-pos1" data-src="https://home.mi.com/app/shop/content?id=sd87cd03985daac35"> <div class="item-inner "> <img src="img/h-sec1-3.jpg" alt="" /> </div> </div> <div class="item-pos2" data-src="https://home.mi.com/app/shop/content?id=ma5e65039f6882631"> <div class="item-inner "> <img src="img/h-sec1-4.jpg" alt="" /> </div> </div> </div> </div> </div> <div class="h-section h-sec2"> <div class="container"> <div class="h-sec-top"> <h2 class="h-subTit"> 小米众筹 <span>寻觅世间好物</span> </h2> <a href="">更多></a> <div class="clearfix"></div> </div> <div class="m-sec-main"> <div class="item-pos0"> <div class="item-inner"> <img src="img/h-sec2-1.jpg" /> <div class="pro-text"> <p class="pro-info">造梦者恒氧除霾新风机</p> <p class="pro-price"> ￥<span>4999</span> </p> </div> </div> <div class="m-progress-wrap"> <div class="m-bar-con"> <img src="img/h-sec2-t.jpg" /> </div> <div class="m-progress-info"> <div class="fl-m-suppory"> <span class="sup-num"> 646 <span>/200</span> </span> 人参与 <span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">火</span> </div> <div class="fr-m-persent"> <span class="m-num">326</span> <span class="m-num-flag">%</span> </div> <div class="clearfix"></div> </div> </div> </div> <div class="item-pos1"> <div class="item-inner"> <img src="img/h-sec2-2.jpg" /> <div class="pro-text"> <p class="pro-info">2018年复古中国风日历</p> <p class="pro-price"> ￥<span>59</span> </p> </div> </div> <div class="m-progress-wrap"> <div class="m-bar-con"> <img src="img/h-sec2-t.jpg" /> </div> <div class="m-progress-info"> <div class="fl-m-suppory"> <span class="sup-num"> 17241 <span>/2000</span> </span> 人参与 <span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span> </div> <div class="fr-m-persent"> <span class="m-num">862</span> <span class="m-num-flag">%</span> </div> <div class="clearfix"></div> </div> </div> </div> <div class="item-pos2"> <div class="item-inner item-inner-two"> <img class="pic" src="img/h-sec2-3.jpg" /> <img class="pic" src="img/h-sec2-4.png" /> <div class="pro-text"> <p class="pro-info">玺佳全镂空机械表</p> <p class="pro-price"> ￥<span>799</span> </p> </div> <div class="clearfix"></div> </div> <div class="m-progress-wrap"> <div class="m-bar-con"> <img src="img/h-sec2-t.jpg" /> </div> <div class="m-progress-info"> <div class="fl-m-suppory"> <span class="sup-num"> 5867 <span>/1000</span> </span> 人参与 <span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span> </div> <div class="fr-m-persent"> <span class="m-num">586</span> <span class="m-num-flag">%</span> </div> <div class="clearfix"></div> </div> </div> </div> <div class="item-pos3"> <div class="item-inner"> <img src="img/h-sec2-5.jpg" /> <div class="pro-text"> <p class="pro-info">iHealth智能血糖仪</p> <p class="pro-price"> ￥<span>99起</span> </p> </div> </div> <div class="m-progress-wrap"> <div class="m-bar-con"> <img src="img/h-sec2-t.jpg" /> </div> <div class="m-progress-info"> <div class="fl-m-suppory"> <span class="sup-num"> 16305 <span>/1000</span> </span> 人参与 <span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span> </div> <div class="fr-m-persent"> <span class="m-num">1630</span> <span class="m-num-flag">%</span> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> <div class="h-section h-new-sec h-sec3"> <div class="container"> <div class="h-sec-top"> <h2 class="h-subTit"> 热门 <span>大家都爱的贴心好物</span> </h2> <a href="">更多></a> <div class="clearfix"></div> </div> <div class="m-sec-main"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide move-item"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec3-1.webp" /> </div> <div class="pro-item-text"> <p class="pro-info">8H乳胶弹簧静音床垫M3</p> <p class="pro-desc" title="20厘米厚度，独立袋装弹簧支撑，全面透气">20cm厚度，独立袋装弹簧支撑...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1439</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> </div> <div class="swiper-slide move-item"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec3-2.webp" /> </div> <div class="pro-item-text"> <p class="pro-info">小米电视4A 65英寸</p> <p class="pro-desc" title="4K全高清屏 人工智能语音 海量片源 第六代画质引擎">4K全高清，人工智能语音...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">4699</span> <!--<span class="pro-flag">起</span> <span class="m-sale-tag">直降</span>--> </p> </div> </div> </div> <div class="swiper-slide move-item"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec3-3.webp" /> </div> <div class="pro-item-text"> <p class="pro-info">云米智能互联烟灶套装（天然气）</p> <p class="pro-desc" title="烟灶相互联动，自动排风，火越大吸力越大，下厨新体验">烟灶相互联动，自动排风，火越...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2999</span> <!--<span class="pro-flag">起</span> <span class="m-sale-tag">直降</span>--> </p> </div> </div> </div> <div id="product-sec3-4" class="swiper-slide move-item"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec3-4.webp" /> </div> <div class="pro-item-text"> <p class="pro-info">番茄鸡蛋冻干面 12杯/箱</p> <p class="pro-desc" title="非油炸冻干技术，新鲜口感，汤汁浓郁">非油炸冻干技术，新鲜口感，汤...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">59.9</span> <!--<span class="pro-flag">起</span> <span class="m-sale-tag">直降</span>--> <span class="m-fee-tag">有品配送</span> </p> </div> </div> </div> <div class="swiper-slide move-item" style="display: none;"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec3-5.webp" /> </div> <div class="pro-item-text"> <p class="pro-info">石墨烯发热腰带</p> <p class="pro-desc" title="石墨烯发热，超轻薄，秒热技术，防烫伤">石墨烯发热，超轻薄，秒热技术...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">129</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> <span class="m-fee-tag">有品配送</span> </p> </div> </div> </div> </div> <div class="icon swiper-button-prev h-sec3-button-prev"></div> <div class="icon swiper-button-next h-sec3-button-next"></div> </div> </div> </div> </div> <div class="h-section h-sec4"> <div class="container"> <div class="h-sec-top"> <div class="h-sec-top"> <h2 class="h-subTit"> 新品 <span>每一件产品 给您不一样的感动</span> </h2> <a href="">更多></a> <div class="clearfix"></div> </div> </div> <div class="m-sec-main m-sec-main-a"> <div class="item-pos0" style="margin-right: 5px;"> <div class="item-inner item-inner-a"> <img src="img/h-sec4-3.jpg" /> <div class="pro-text"> <p class="pro-info">乐范按摩助眠颈枕</p> <p class="pro-desc" title="按摩解压，放松入眠，专利锁扣，收纳自如">按摩解压，放松入眠，专利锁...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">99</span> </p> </div> </div> </div> <div class="item-pos1" style="margin-right: 5px;"> <div class="item-inner" style="background-color: rgb(246, 243, 235);"> <img style="height: 210px;" src="img/h-sec4-5.png" /> <div class="pro-text"> <p class="pro-info">小米米家空气净化器2S</p> <!--<p class="pro-desc" title=""></p>--> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">899</span> </p> </div> </div> </div> <div class="item-pos2"> <div class="item-inner item-inner-b"> <div class="h-layer-con-a"> <img src="img/h-sec4-1.png" alt="" /> <img src="img/h-sec4-2.png" alt="" /> <div class="clearfix"></div> </div> <div class="pro-text"> <p class="pro-info">芯迈软木羊毛足垫</p> <p class="pro-desc" title="【购买两双立减15元，部分尺码为预售，12月6日陆续发货。】恒温保暖，柔软回弹，双重吸湿">【购买两双立减15元，部分...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">49</span> </p> </div> </div> </div> <div class="item-pos3" style="margin-right: 5px;margin-top: 5px;"> <div class="item-inner" style="background-color: rgb(237, 243, 230);"> <img style="height: 210px;" src="img/h-sec4-6.png" /> <div class="pro-text"> <p class="pro-info">飞行员夹克羽绒服 男款</p> <!--<p class="pro-desc"></p>--> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">499</span> </p> </div> </div> </div> <div class="item-pos4" style="margin-top:5px ;margin-right: 5px;"> <div class="item-inner item-inner-c"> <div class="h-layer-con-c"> <img src="img/h-sec4-7.jpg" /> <img src="img/h-sec4-8.png" /> </div> <div class="pro-text"> <p class="pro-info" title="【12.6限量发售 10:00开抢！】石头扫地机器人">【12.6限量发售 10:00开抢！】...</p> <!--<p class="pro-desc"></p>--> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2499</span> </p> </div> </div> </div> <div class="item-pos5-more" style="margin-top: 5px;"> <div class="item-inner"> <span>更多新品></span> </div> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> <div class="h-section h-sec5"> <div class="container"> <div class="h-sec-top"> <h2 class="h-subTit"> 品牌 <span>精心制作，价美质优</span> </h2> <a href="">更多></a> <div class="clearfix"></div> </div> <div class="m-sec-main"> <div class="swiper-container swiper-container-a"> <div class="swiper-wrapper"> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-1.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-2.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-3.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-4.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-5.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-6.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-7.webp" /> </div> <div class="swiper-slide brand-swiper-slide" style="display: none;"> <img src="img/h-sec5-8.webp" /> </div> </div> <div class="icon swiper-button-prev h-sec5-button-prev"></div> <div class="icon swiper-button-next h-sec5-button-next"></div> </div> </div> </div> </div> <div class="h-section h-section-6 h-sec6"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(174, 214, 223)"> <h2 class="top-tit">手机</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec6-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-1.webp" /> </div> <p class="pro-desc" title="">【6G+64GB版周二早1...</p> <div class="h-text-inner"> <p class="pro-info">小米6</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2299</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-2.webp" /> </div> <p class="pro-desc" title="">【12月5日晚8点全色系开...</p> <div class="h-text-inner"> <p class="pro-info">小米MIX2 Unibody...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">4699</span> <!--<span class="pro-flag"></span>--> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-3.webp" /> </div> <p class="pro-desc" title="">【买赠学院双肩包+圈铁耳机...</p> <div class="h-text-inner"> <p class="pro-info">小米MIX2</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">3299</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec6-4.webp" /> </div> <p class="pro-desc" title="">【32G/128G版买赠学...</p> <div class="h-text-inner"> <p class="pro-info">小米MAX2</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1399</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-5.webp" /> </div> <p class="pro-desc" title="">【光学变焦双摄，拍人更美/...</p> <div class="h-text-inner"> <p class="pro-info">小米5X</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1399</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-6.webp" /> </div> <p class="pro-desc" title="">【12月19日早10点开售...</p> <div class="h-text-inner"> <p class="pro-info">MIX2 STARCK 全陶...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">4999</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec6-7.webp" /> </div> <p class="pro-desc" title="">【最高直降300元，128...</p> <div class="h-text-inner"> <p class="pro-info">小米NOTE3</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1999</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec6-8.webp" /> </div> <p class="pro-desc" title="">【5.5"高清大屏/高...</p> <div class="h-text-inner"> <p class="pro-info">小米NOTE3</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1999</span> <span class="pro-flag">起</span> </p> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec7"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(246, 207, 197);"> <h2 class="top-tit">居家</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec7-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-1.webp" alt="" /> </div> <p class="pro-desc">20厘米厚度，独立袋装弹簧...</p> <div class="h-text-inner"> <p class="pro-info">8H乳胶弹簧静音床垫M3</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1439</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-2.webp" alt="" /> </div> <p class="pro-desc">天然乳胶，0胶水环保材质，...</p> <div class="h-text-inner"> <p class="pro-info">8H乳胶弹簧静音床垫M1</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">569</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-3.webp" alt="" /> </div> <p class="pro-desc">航天相变材料，动态调温，控...</p> <div class="h-text-inner"> <p class="pro-info">宇宙沙盘双向调节控温被</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">699</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec7-4.webp" alt="" /> </div> <p class="pro-desc">0螺丝组装，万元级配置，优...</p> <div class="h-text-inner"> <p class="pro-info">8H独立袋装弹簧布艺沙发</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1199</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-5.webp" alt="" /> </div> <p class="pro-desc">超大发光角度，明暗可调，5...</p> <div class="h-text-inner"> <p class="pro-info">Yeelight智能皎月吸顶...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">499</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-6.webp" alt="" /> </div> <p class="pro-desc">1:4:1黄金比填充，更轻...</p> <div class="h-text-inner"> <p class="pro-info">8H 3D七孔保暖被</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">229</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec7-7.webp" alt="" /> </div> <p class="pro-desc">双面睡感，双面温感，大圈径...</p> <div class="h-text-inner"> <p class="pro-info">8H双面双温感乳胶弹簧床垫</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1999</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> <div class="clearfix"></div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec7-8.webp" alt="" /> </div> <p class="pro-desc">95%大朵白鹅绒，59°错...</p> <div class="h-text-inner"> <p class="pro-info">8H 95%白鹅绒静音鹅绒被</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1629</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec8"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(207, 192, 223);"> <h2 class="top-tit">服饰</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec8-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-1.webp" alt="" /> </div> <p class="pro-desc">保温蓄热，防风防寒，无缝工...</p> <div class="h-text-inner"> <p class="pro-info">运动休闲羽绒服</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">539</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-2.webp" alt="" /> </div> <p class="pro-desc">90%白鸭绒，轻盈保暖，科...</p> <div class="h-text-inner"> <p class="pro-info">轻便可收纳羽绒马甲</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">179</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-3.webp" alt="" /> </div> <p class="pro-desc">进口美棉，快速排汗，干爽不...</p> <div class="h-text-inner"> <p class="pro-info">微型窗干爽男士内裤 3条装</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">109</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec8-4.webp" alt="" /> </div> <p class="pro-desc">精工手作，时尚百搭</p> <div class="h-text-inner"> <p class="pro-info">七面头层牛皮简约休闲皮带</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">93</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-5.webp" alt="" /> </div> <p class="pro-desc">经典百搭保暖舒适，精良抗起...</p> <div class="h-text-inner"> <p class="pro-info">男士V领羊毛开衫</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">209</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-6.webp" alt="" /> </div> <p class="pro-desc">澳洲纯羊毛，舒适保暖，四平...</p> <div class="h-text-inner"> <p class="pro-info">90分男女精纺纯羊毛双面围巾</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">159</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec8-7.webp" alt="" /> </div> <p class="pro-desc">【部分尺码为预售，12月8...</p> <div class="h-text-inner"> <p class="pro-info">芯迈软木羊毛足垫</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">49</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec8-8.webp" alt="" /> </div> <p class="pro-desc">经典美式风潮，牛仔休闲更有...</p> <div class="h-text-inner"> <p class="pro-info">七面植鞣皮黄铜扣手工皮带</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">129</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec9"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(172, 214, 206);"> <h2 class="top-tit">智能</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec9-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-1.webp" alt="" /> </div> <p class="pro-desc">像杂志一样随身携带</p> <div class="h-text-inner"> <p class="pro-info">小米笔记本Air 12.5...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">3299</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-2.webp" alt="" /> </div> <p class="pro-desc">米家多功能网关，米家智能插...</p> <div class="h-text-inner"> <p class="pro-info">米家智能家庭礼品装</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">299</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-3.webp" alt="" /> </div> <p class="pro-desc">全新四天线设计，更快更强</p> <div class="h-text-inner"> <p class="pro-info">小米路由器3</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">129</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec9-4.webp" alt="" /> </div> <p class="pro-desc">双核双千兆，光纤级旗舰路由...</p> <div class="h-text-inner"> <p class="pro-info">小米路由器3G</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">239</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-5.webp" alt="" /> </div> <p class="pro-desc">三网通用，7800mAh大...</p> <div class="h-text-inner"> <p class="pro-info">ZMI随身路由器</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">319</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-6.webp" alt="" /> </div> <p class="pro-desc">单火版/零火版 选择，快速...</p> <div class="h-text-inner"> <p class="pro-info">Aqara智能墙壁开关</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">119</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec9-7.webp" alt="" /> </div> <p class="pro-desc">搭配网关，自定义控制家庭智...</p> <div class="h-text-inner"> <p class="pro-info">Aqara智能无线开关</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">79</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec9-8.webp" alt="" /> </div> <p class="pro-desc">定时开关，电量统计，独立安...</p> <div class="h-text-inner"> <p class="pro-info">Aqara智能墙壁插座</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">129</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec10"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(237, 204, 217);"> <h2 class="top-tit">餐厨</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec10-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-1.webp" alt="" /> </div> <p class="pro-desc">双曲线杯身，OLED显示屏...</p> <div class="h-text-inner"> <p class="pro-info">轻智能随行保温杯</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">169</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-2.webp" alt="" /> </div> <p class="pro-desc">茶水分离，杯壶合一，高效泡...</p> <div class="h-text-inner"> <p class="pro-info">大肚茶水分离杯壶</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">58</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-3.webp" alt="" /> </div> <p class="pro-desc">三层复合锅体，高效匀热</p> <div class="h-text-inner"> <p class="pro-info">无涂层健康不锈钢炒锅</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">289</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec10-4.webp" alt="" /> </div> <p class="pro-desc">8秒快速出汁，三重联锁设计</p> <div class="h-text-inner"> <p class="pro-info">圈厨便携式果蔬料理机</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">189</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-5.webp" alt="" /> </div> <p class="pro-desc">快速沸腾，水温智能控制，三...</p> <div class="h-text-inner"> <p class="pro-info">米家恒温电水壶</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-6.webp" alt="" /> </div> <p class="pro-desc">配套咖啡胶囊已上线，请搜索...</p> <div class="h-text-inner"> <p class="pro-info">心想胶囊咖啡机</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">479</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec10-7.webp" alt="" /> </div> <p class="pro-desc">烟灶相互联动，自动排风，火...</p> <div class="h-text-inner"> <p class="pro-info">云米智能互联烟灶套装（天然气...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2999</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec10-8.webp" alt="" /> </div> <p class="pro-desc">至诚锋锐，比硬更硬</p> <div class="h-text-inner"> <p class="pro-info">火候钢刀六件套</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">329</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec11"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(160, 188, 241);"> <h2 class="top-tit">影音</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec11-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-1.webp" alt="" /> </div> <p class="pro-desc">人工智能系统 64位四核处...</p> <div class="h-text-inner"> <p class="pro-info">小米电视4A 32英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">899</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-2.webp" alt="" /> </div> <p class="pro-desc"> 人工智能 4K HDR ...</p> <div class="h-text-inner"> <p class="pro-info">小米电视4C 55英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2699</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-3.webp" alt="" /> </div> <p class="pro-desc">超短焦，免布线，150英寸...</p> <div class="h-text-inner"> <p class="pro-info">米家激光投影电视</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">9999</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec11-4.webp" alt="" /> </div> <p class="pro-desc">4K全高清屏 人工智能语音...</p> <div class="h-text-inner"> <p class="pro-info">小米电视4A 65英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">4699</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-5.webp" alt="" /> </div> <p class="pro-desc">小米电视4 49英寸</p> <div class="h-text-inner"> <p class="pro-info">小米电视4 49英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">3499</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-6.webp" alt="" /> </div> <p class="pro-desc">原装三星屏 极超薄机身 无...</p> <div class="h-text-inner"> <p class="pro-info">小米电视4 55英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">4299</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec11-7.webp" alt="" /> </div> <p class="pro-desc">[直降200 限量送价值1...</p> <div class="h-text-inner"> <p class="pro-info">小米电视4C 43英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1799</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec11-8.webp" alt="" /> </div> <p class="pro-desc">极超薄机身,无边框式设计</p> <div class="h-text-inner"> <p class="pro-info">小米电视4 65英寸</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">9699</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec12"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(195, 218, 241);"> <h2 class="top-tit">家电</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec12-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-1.webp" alt="" /> </div> <p class="pro-desc">全新空气增压系统，净化性能...</p> <div class="h-text-inner"> <p class="pro-info">小米空气净化器</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">699</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-2.webp" alt="" /> </div> <p class="pro-desc">OLED显示屏幕，激光颗粒...</p> <div class="h-text-inner"> <p class="pro-info">米家空气净化器Pro</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1499</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-3.webp" alt="" /> </div> <p class="pro-desc">送安装服务，400加仑大流...</p> <div class="h-text-inner"> <p class="pro-info">小米净水器(厨下式)</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1999</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec12-4.webp" alt="" /> </div> <p class="pro-desc">路径规划，远程控制，大吸力...</p> <div class="h-text-inner"> <p class="pro-info">米家扫地机器人</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1699</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-5.webp" alt="" /> </div> <p class="pro-desc">静音运行，高温煮洗，洗涤...</p> <div class="h-text-inner"> <p class="pro-info">小吉智能迷你滚筒洗衣机【预售...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1949</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-6.webp" alt="" /> </div> <p class="pro-desc">风冷无霜 均匀保鲜 草本杀...</p> <div class="h-text-inner"> <p class="pro-info">云米互联网智能冰箱iLive</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2999</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <!--<div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec12-7.webp" alt="" /> </div> <p class="pro-desc"></p> <div class="h-text-inner"> <p class="pro-info"></p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num"></span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec12-8.webp" alt="" /> </div> <p class="pro-desc"></p> <div class="h-text-inner"> <p class="pro-info"></p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num"></span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div>--> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec13"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(221, 223, 192);"> <h2 class="top-tit">饮食</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec13-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec13-1.webp" alt="" /> </div> <p class="pro-desc">匠心沃土育好麦，源头有机营...</p> <div class="h-text-inner"> <p class="pro-info">有机黑小麦烘培预拌粉</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">39</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec13-2.webp" alt="" /> </div> <p class="pro-desc">浓郁芬芳的香气，法国原装进...</p> <div class="h-text-inner"> <p class="pro-info">法国阿尔萨斯琼瑶浆白葡萄酒</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">139</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec13-3.webp" alt="" /> </div> <p class="pro-desc">生态养殖，出口品质，送礼佳...</p> <div class="h-text-inner"> <p class="pro-info">诺亚阳湖牌阳澄湖大闸蟹</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">138</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec13-4.webp" alt="" /> </div> <p class="pro-desc">香浓好喝，德国学院正宗配方</p> <div class="h-text-inner"> <p class="pro-info">斑马精酿德式小麦啤酒</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">59</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <!--<div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec13-5.webp" alt="" /> </div> <p class="pro-desc"></p> <div class="h-text-inner"> <p class="pro-info"></p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num"></span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div>--> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec14"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(229, 205, 205);"> <h2 class="top-tit">健康</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec14-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-1.webp" alt="" /> </div> <p class="pro-desc">简约纯白外观，隐藏式LED...</p> <div class="h-text-inner"> <p class="pro-info">小米体质称</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-2.webp" alt="" /> </div> <p class="pro-desc">石墨烯发热，超轻薄，秒热技...</p> <div class="h-text-inner"> <p class="pro-info">石墨烯发热腰带</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">129</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-3.webp" alt="" /> </div> <p class="pro-desc">配套贴片、延长线已上线，请...</p> <div class="h-text-inner"> <p class="pro-info">乐范随身魔力按摩贴</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">94</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec14-4.webp" alt="" /> </div> <p class="pro-desc">呼吸分离，转为儿童设计，便...</p> <div class="h-text-inner"> <p class="pro-info">Woobi Play儿童清呼...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-5.webp" alt="" /> </div> <p class="pro-desc">双重立体防御结构，360°...</p> <div class="h-text-inner"> <p class="pro-info">AirPOP防雾霾口罩 米...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">69</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-6.webp" alt="" /> </div> <p class="pro-desc">十项数据 精准交流测脂 高...</p> <div class="h-text-inner"> <p class="pro-info">云麦好轻mini智能体脂称</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">89</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec14-7.webp" alt="" /> </div> <p class="pro-desc">精准测量，持续监测，高温报...</p> <div class="h-text-inner"> <p class="pro-info">秒秒测智能体温计</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec14-8.webp" alt="" /> </div> <p class="pro-desc">Purely布梨空气锁口罩 3只装</p> <div class="h-text-inner"> <p class="pro-info">整体高效防护，眼镜不易起雾...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">74</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec15"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(226, 219, 213);"> <h2 class="top-tit">洗护</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec15-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-1.webp" alt="" /> </div> <p class="pro-desc">【领用30元优惠券】吸水速...</p> <div class="h-text-inner"> <p class="pro-info">硅藻土浴室地垫</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">119</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-2.webp" alt="" /> </div> <p class="pro-desc">高效动力，刷得干净，多种刷...</p> <div class="h-text-inner"> <p class="pro-info">米家声波电动牙刷 白色</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-3.webp" alt="" /> </div> <p class="pro-desc">贝医生0+牙膏 3支装</p> <div class="h-text-inner"> <p class="pro-info">安全配方，自然亮白，强效清洁...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">44.9</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec15-4.webp" alt="" /> </div> <p class="pro-desc">丹麦酵素技术，4倍洁净力...</p> <div class="h-text-inner"> <p class="pro-info">小吉浓缩洗衣液</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">44.9</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-5.webp" alt="" /> </div> <p class="pro-desc">德国索林根制造，6层刀片...</p> <div class="h-text-inner"> <p class="pro-info">焕醒剃须刀</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">99</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-6.webp" alt="" /> </div> <p class="pro-desc">6倍洁净，柔顺护色，简单易...</p> <div class="h-text-inner"> <p class="pro-info">小闲洗衣凝珠</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">79</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec15-7.webp" alt="" /> </div> <p class="pro-desc">纳米级抗菌防污，私人订制口...</p> <div class="h-text-inner"> <p class="pro-info">Oclean One智能护...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">369</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec15-8.webp" alt="" /> </div> <p class="pro-desc">最生活长绒棉吸水毛巾</p> <div class="h-text-inner"> <p class="pro-info">阿瓦提长绒棉，瑞典抗菌科技，...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">59</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec16"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(209, 191, 166);"> <h2 class="top-tit">日杂</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec16-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-1.webp" alt="" /> </div> <p class="pro-desc">精密注塑，德国核心书写部件...</p> <div class="h-text-inner"> <p class="pro-info">SKY百锋墨水笔套装</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">69</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-2.webp" alt="" /> </div> <p class="pro-desc">小巧轻便，原生木浆，干湿两...</p> <div class="h-text-inner"> <p class="pro-info">柚家迷你手帕纸 72包/箱</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">39</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-3.webp" alt="" /> </div> <p class="pro-desc">天然竹浆，保湿抑菌，超柔亲...</p> <div class="h-text-inner"> <p class="pro-info">柚家超柔竹纤维纸面巾 12包...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">69</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec16-4.webp" alt="" /> </div> <p class="pro-desc">洒哇地咔无线手持电动擦地机</p> <div class="h-text-inner"> <p class="pro-info">往复式擦地，强效拖布，轻松操...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">579</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-5.webp" alt="" /> </div> <p class="pro-desc">天然竹制，分类收纳，多场景...</p> <div class="h-text-inner"> <p class="pro-info">竹纤维桌面收纳盒</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">64</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-6.webp" alt="" /> </div> <p class="pro-desc">不漂白，无有害添加，食品级...</p> <div class="h-text-inner"> <p class="pro-info">天然竹纤维抑菌纸巾尊享包 2...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">79</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec16-7.webp" alt="" /> </div> <p class="pro-desc">精准控墨，书写流畅，德国进...</p> <div class="h-text-inner"> <p class="pro-info">SKY百锋钢笔(送墨囊)</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">45</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec16-8.webp" alt="" /> </div> <p class="pro-desc">柚家超韧天然纸面巾 18包/箱</p> <div class="h-text-inner"> <p class="pro-info">原生木浆，安全洁净，韧滑柔软...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">59</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec17"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(245, 212, 157);"> <h2 class="top-tit">箱包</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec17-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec17-1.webp" alt="" /> </div> <p class="pro-desc">前开盖快取设计，德国拜耳P...</p> <div class="h-text-inner"> <p class="pro-info">90分轻商务登机箱米家订制</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">399</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec17-2.webp" alt="" /> </div> <p class="pro-desc">静音万向轮，轻盈坚韧</p> <div class="h-text-inner"> <p class="pro-info">90分旅行箱马卡龙版</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">299</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec17-3.webp" alt="" /> </div> <p class="pro-desc">多场景适用，防泼水，背负舒...</p> <div class="h-text-inner"> <p class="pro-info">90分都市简约双肩背包</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">149</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec17-4.webp" alt="" /> </div> <p class="pro-desc">颜值担当，拒水性3-4级，...</p> <div class="h-text-inner"> <p class="pro-info">90分全天候机能城市背包</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">189</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec18"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(193, 209, 177);"> <h2 class="top-tit">配件</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec18-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-1.webp" alt="" /> </div> <p class="pro-desc">3个USB充电口，支持2A...</p> <div class="h-text-inner"> <p class="pro-info">小米插线板</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">49</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-2.webp" alt="" /> </div> <p class="pro-desc">超多设备支持 苹果官方MF...</p> <div class="h-text-inner"> <p class="pro-info">早风三合一数据线</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">59</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-3.webp" alt="" /> </div> <p class="pro-desc">稳固防滑，磁力吸附，360...</p> <div class="h-text-inner"> <p class="pro-info">车载磁吸手机支架</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">44</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec18-4.webp" alt="" /> </div> <p class="pro-desc">舒适佩戴，微型机身，轻巧重...</p> <div class="h-text-inner"> <p class="pro-info">QCY迷你蓝牙耳机</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">39</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-5.webp" alt="" /> </div> <p class="pro-desc">人体工学设计，合理视角</p> <div class="h-text-inner"> <p class="pro-info">笔记本电脑支架</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">119</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-6.webp" alt="" /> </div> <p class="pro-desc">87键，铝合金机身，TTC...</p> <div class="h-text-inner"> <p class="pro-info">悦米机械键盘</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">289</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec18-7.webp" alt="" /> </div> <p class="pro-desc">炫彩型动，乐享自由，高清而...</p> <div class="h-text-inner"> <p class="pro-info">1MORE iBfree蓝牙...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec18-8.webp" alt="" /> </div> <p class="pro-desc">一键拍照/支架270°...</p> <div class="h-text-inner"> <p class="pro-info">小米蓝牙自拍杆</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">79</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec19"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(174, 214, 223);"> <h2 class="top-tit">婴童</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec19-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-1.webp" alt="" /> </div> <p class="pro-desc">充电1次，续航5天</p> <div class="h-text-inner"> <p class="pro-info">小寻儿童电话手表 S1</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">298</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-2.webp" alt="" /> </div> <p class="pro-desc">海量好故事，微信远程互动</p> <div class="h-text-inner"> <p class="pro-info">故事机儿童套装</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">249</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-3.webp" alt="" /> </div> <p class="pro-desc">履带底盘，高精度零件，智能...</p> <div class="h-text-inner"> <p class="pro-info">米兔积木机器人履带机甲</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">499</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec19-4.webp" alt="" /> </div> <p class="pro-desc">高速对战，竞技排行，数据同...</p> <div class="h-text-inner"> <p class="pro-info">跑酷智能极速赛车</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">419</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-5.webp" alt="" /> </div> <p class="pro-desc">一瓶两用，天然提取，无泪配...</p> <div class="h-text-inner"> <p class="pro-info">婴幼儿燕麦洗发沐浴泡泡 32...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">46</span> <span class="pro-flag">起</span> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-6.webp" alt="" /> </div> <p class="pro-desc">磁力拼搭，无尽想象，进口A...</p> <div class="h-text-inner"> <p class="pro-info">米兔儿童磁力积木</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">199</span> <!--<span class="pro-flag">起</span> <span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec19-7.webp" alt="" /> </div> <p class="pro-desc">时刻定位，十天超长待机，守...</p> <div class="h-text-inner"> <p class="pro-info">米兔定位电话</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">169</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec19-8.webp" alt="" /> </div> <p class="pro-desc">韩国进口材料，吸震慢回防弹</p> <div class="h-text-inner"> <p class="pro-info">贝瓦PVC双面防滑地垫</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">549</span> <span class="pro-flag">起</span> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-section-6 h-sec20"> <div class="container"> <div class="m-randomBg-top"> <div class="m-spacial-guide-fl" style="background: rgb(246, 207, 197);"> <h2 class="top-tit">出行</h2> <span class="m-more">更多></span> </div> <div class="m-randomBg-img-fr"> <div class="m-tag-a"> <img src="img/h-sec20-0.jpg" alt="" /> </div> </div> <div class="clearfix"></div> </div> <div class="m-product-list"> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec20-1.webp" alt="" /> </div> <p class="pro-desc">智能定位防丢设计，极简使用...</p> <div class="h-text-inner"> <p class="pro-info">骑记智能山地自行车</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">2159</span> <!--<span class="pro-flag">起</span>--> <span class="m-sale-tag">直降</span> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec20-2.webp" alt="" /> </div> <p class="pro-desc">极简设计，8天超长待机，位...</p> <div class="h-text-inner"> <p class="pro-info">小米米家对讲机</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">249</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec20-3.webp" alt="" /> </div> <p class="pro-desc">SONY IMX323图像</p> <div class="h-text-inner"> <p class="pro-info">米家行车记录仪</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">349</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item pro-item-a"> <div class="pro-item-img"> <img src="img/h-sec20-4.webp" alt="" /> </div> <p class="pro-desc">双风机循环气流，过滤PM2...</p> <div class="h-text-inner"> <p class="pro-info">米家车载空气净化器 USB版...</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">449</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec20-5.webp" alt="" /> </div> <p class="pro-desc">听懂你说话，更聪明的智能后...</p> <div class="h-text-inner"> <p class="pro-info">70迈智能后视镜</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1299</span> <!--<span class="pro-flag">起</span>--> <!--<span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="pro-item"> <div class="pro-item-img"> <img src="img/h-sec20-6.webp" alt="" /> </div> <p class="pro-desc">22公里超长续航</p> <div class="h-text-inner"> <p class="pro-info">九号平衡车</p> <p class="pro-price"> <span class="pro-unit">￥</span> <span class="m-num">1999</span> <!--<span class="pro-flag">起</span> <span class="m-sale-tag">直降</span>--> </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="h-section h-sec-over"></div> <hr class="main-footer-line" /> <div class="footer"> <div class="container"> <div class="swiper-footer-container"> <div class="footer-logo-fl"> <img class="footer-logo-fl-img" src="img/c2.png" /> </div> <div class="footer-fl-text"> <span>版权归米家商城所有</span> </div> <div class="footer-fr-text"> <p>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p> <p class="millder-empty"></p> <p>公司名称：小米通讯技术有限公司 联系电话：010-60606666</p> </div> <div class="footer-logo-fr"> <a href="https://home.mi.com/app/shop/content?id=na056d0394b93a391"> <img class="footer-logo-fr-img" src="img/footer-logo.png" /> </a> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="silder-bar"> <div class="silder-download"> <div class="aaa"> <div class="icon download-small-icon"></div> <p class="icon-text">下载</p> <p>APP</p> </div> <div class="hide-pop hide-pop-1" style="display: none;"> <div class="pop-inner"> <img class="download-pop-img" src="img/c1.png" /> <p>下载有品APP</p> <p>得新人礼包</p> </div> </div> </div> <hr /> <div class="new-person-gift"> <div class="bbb"> <div class="icon new-person-small-icon"></div> <p class="icon-text">新人有礼</p> </div> <div class="hide-pop hide-pop-2" style="display: none;"> <div class="pop-inner"> <img class="new-person-pop-img-top" src="img/gift-gd.png" /> <div class="new-person-pop-img-bottom-area"> <img class="download-pop-img" src="img/c1.png" /> </div> <p class="hide-pop-text">立即扫码下载·有品 APP</p> </div> </div> </div> <hr /> <div class="back-top"> <div class="ccc"> <div class="icon go-back-small-icon"></div> <p class="icon-text">回到顶部</p> </div> <div class="hide-new-person"></div> </div> </div> </div> <!--<script src="js/jquery.js" type="text/javascript"></script>--> <script src="js/jquery-2.1.0.js" type="text/javascript"></script> <script src="js/base.js" type="text/javascript"></script> <script src="js/icon-animate.js" type="text/javascript"></script> </body></html>（2）css
* { margin: 0; padding: 0;}img { border: none; cursor: pointer;}.clearfix { clear: both;}.h-section { margin-top: 90px;}.h-section-6 { margin-top: 50px;}/*首尾样式*/.home-wrap { min-width: 1080px; margin: 0 auto;}.container { width: 1080px; margin: 0 auto;}/*m-site-top样式*/.m-site-top { background: #333;}.fr { float: right;}.fr a { text-decoration: none; color: #ddd; font-size: 15px;}.fr .fl-m-user-con { float: left; height: 48px;}.fr .fl-m-user-con .m-no-login { float: left; width: 90px; height: 48px; margin-right: 8px;}.fr .fl-m-user-con .fl-m-line { float: right; display: inline-block; height: 21px; border-left: 1px solid #fff; margin-top: 15px; margin-left: 6px; margin-right: 3px;}.fr .fl-m-user-con .m-no-login a { line-height: 48px; font-size: 15px; margin-left: 8px;}.fr .fr-m-download { float: right; margin-left: 5px; position: relative;}.fr .fr-m-download a:hover { color: #fff;}.fr .fr-m-download a { display: block; height: 48px; width: 80px; line-height: 48px; padding-left: 30px; overflow: hidden; position: relative;}/*下载APP隐藏样式*/.site-item-nav { position: absolute; top: 48px; left: -20px; display: none; background: #fff; box-shadow: 0 3px 28px rgba(0, 0, 0, 0.1);}.site-item-nav .site-nav-inner { width: 120px; height: 140px; font-size: 14px; color: #333; text-align: center;}.qr-code { width: 100px; height: 100px;}/*m-header样式*/.m-header { padding-top: 20px; margin-bottom: 5px;}.m-header .m-header-top { height: 51px;}.m-header .m-header-top>div { display: inline-block;}.m-header .m-header-top .m-logo img { width: 123px; height: 45px; cursor: pointer;}.m-card-wrap,.m-search { float: right;}.m-card-wrap { margin-top: 18px; margin-left: 5px;}.search-form { padding-top: 18px; border-bottom: 1px solid #ccc;}.search-card-wrap { float: left; margin-right: 10px;}.search-input-con { float: right;}.search-input-con input { display: inline-block; border: none; width: 250px; height: 30px; background: white; outline: none;}/*m-nav标准样式*/.m-nav { margin-top: 30px; position: relative;}.nav-list { list-style-type: none; font-size: 14px; cursor: pointer;}.nav-list li { margin: 0; padding: 0; width: 63.5px; height: 46px; text-align: center; color: #333; float: left;}/*m-nav隐藏区域样式*/.nav-menu { position: absolute; top: 45px; border: 1px solid #ccc; background: #fff; width: 1080px; z-index: 1; height: 149px;}.nav-menu-list { position: absolute; top: -1px; left: -1px; width: 1082px; height: 151px; /*解决外边框与内容有间隔的问题*/}.nav-menu-list li { float: left; list-style-type: none; width: 108.2px; text-align: center; cursor: pointer; height: 151px;}.nav-menu-img { margin-top: 25px;}.nav-menu-img img { width: 80px; height: 80px; display: block; margin: 0 auto;}.nav-menu-info { font-size: 14px; color: #333; padding: 5px 0 20px;}.nav-menu-info-more { line-height: 149px;}/*侧边展示栏样式*/.silder-bar { position: fixed; width: 80px; right: 10px; top: 50%; transform: translate(0, -50%); box-shadow: 0 0 1px #ccc; text-align: center; font-size: 13px; color: #333; cursor: pointer;}.silder-bar hr { width: 85%; margin: 0 auto; border-top: none;}.silder-bar>div { position: relative; background: #fff;}.silder-download:hover,.new-person-gift:hover,.back-top:hover { color: #845f3f;}.icon-text { margin-top: 5px;}.hide-pop { position: absolute; right: 80px; min-width: 95px; min-height: 140px; border: 1px solid #ccc; background: #fff;}.hide-pop-1 { top: 0;}.download-pop-img { width: 80px; height: 80px; margin: 5px auto;}.hide-pop-2 { top: -90px;}.new-person-pop-img-top { width: 170px; height: 140px; margin: 10px 10px 20px;}.new-person-pop-img-bottom-area { border: 1px solid #ccc; width: 90px; height: 90px; margin: 0 auto;}.hide-pop-text { margin: 15px auto;}/*页面底部样式*/.main-footer-line { border: none; border-top: 1px solid #ccc;}.swiper-footer-container { margin: 45px 0; height: 49px;}.swiper-footer-container>div { display: inline-block;}.footer-logo-fl,.footer-fl-text,.footer-fr-text { float: left;}.footer-logo-fl-img { width: 123px; height: 45px; cursor: default;}.footer-fl-text { margin-left: 30px; font-size: 15px; color: #aaa; margin-top: 14.5px;}.footer-fr-text { margin-left: 35px; font-size: 12px; color: #aaa; margin-top: 6px;}.millder-empty { height: 5px;}.footer-logo-fr { margin-left: 30px; float: right;}.footer-logo-fr-img { width: 110px; height: 45px;}/*背景小图标*/.icon { background: url(../img/icon.png) no-repeat; cursor: pointer;}.download-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -1456px;}.aaa { height: 64px; padding: 13px 0;}.new-person-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -777px;}.bbb { height: 47px; padding: 15px 0;}.go-back-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -1218px;}.ccc { height: 47px; padding: 15px 0;}.m-card-wrap-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -879px;}.m-card-wrap-small-icon:hover { background-position: 0 -1049px;}.search-card-wrap-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -1388px;}.search-card-wrap-small-icon:hover { background-position: 0 -1354px;}.fr-m-download-small-icon { width: 30px; height: 30px; margin: 0 auto; background-position: 0 -946px; display: inline-block; position: absolute; left: 0; top: 9px;}.swiper-button-prev,.swiper-button-next { width: 40px; height: 40px; position: absolute; top: 50%; transform: translate(0, -50%);}.swiper-button-prev { left: 10px; background-position: 0 -1614px;}.swiper-button-prev:hover { background-position-y: -1572px;}.swiper-button-next { right: 10px; background-position: 0 -1531px;}.swiper-button-next:hover { background-position-y: -1489px;}/*h-section h-sec3和h-sec5标准样式*/.swiper-container { position: relative;}/*h-section h-sec3 h-new-sec内边界补充样式*/.h-new-sec { padding: 50px 0 25px; background: #f5f5f5;}.swiper-container { margin-bottom: 30px;}.swiper-slide { background: #fff; display: inline-block; padding-bottom: 8px; cursor: pointer; position: relative;}/*h-section h-sec3和h-sec6到h-sec20标准样式*/.pro-item { text-align: center; padding-bottom: 10px; margin-bottom: 5px; position: relative;}.pro-item-img { width: 266px;}.pro-item-img img { width: 195px; height: 195px;}.pro-item-text { color: #333;}.pro-info { margin-top: 10px; height: 26px; line-height: 26px;}.pro-desc { height: 24px; line-height: 24px; font-size: 14px; color: #aaa;}.pro-price { height: 26px; line-height: 26px; color: red; padding: 0 auto;}.pro-price>.pro-unit,.m-num,.pro-flag { font-size: 14px;}.pro-price .m-sale-tag { margin-left: 8px; background: #c00000; color: #fff; font-size: 15px; padding: 0 5px;}.pro-price .m-fee-tag { margin-left: 0 5px; background: #d1bfa6; color: #fff; font-size: 15px; padding: 0 5px;}.swiper-slide>img { width: 266px; height: 252px;}/*h-section h-sec5补充样式*/.swiper-container-a { margin-bottom: 0;}（3）效果图
阅读全文
0 0
- 12.06课堂笔记以及作业
- 11.14课堂笔记以及作业
- 11.09课堂笔记、作业以及学习心得
- 11.13课堂笔记、作业以及学习心得
- 11.16课堂笔记、作业以及学习心得
- 11.20课堂笔记、作业以及学习心得
- #11.21课堂笔记、作业以及学习心得
- 11.27课堂笔记以及周末大作业
- 11.15课堂笔记、作业
- 11.30课堂笔记、作业
- 12.25课堂笔记、作业
- 11.3课堂笔记和作业
- 12.4课堂笔记及作业
- 12.13课堂笔记、课后作业、学习心得
- 12.14课堂笔记、课后作业、学习心得
- 课堂作业
- 课堂作业
- 课堂作业
- MyBatis 动态SQL
- nginx的日志分析
- mysql（3）：基础，常用命令句使用（2）--中集
- linux部署php运行环境,apache+mysql+php
- 用AJAX的时候出现XMLHttpRequest cannot load
- 12.06课堂笔记以及作业
- 中北大学NUC2017新生赛1001/NOJ-1981
- 面积最大的矩形
- 1076. Wifi密码 (15)
- 进程、线程知识点总结和同步（消费者生产者，读者写者三类问题）、互斥、异步、并发、并行、死锁、活锁的总结
- Android跳转到网页的页面
- Java NIO 阻塞式与非阻塞式
- 第十五周训练总结（二）
- MyEclipse使用Ant打包项目
