<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米有品</title>
<link rel="stylesheet" href="./css/style01.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<!-- <link rel="stylesheet" href="./css/base.css"> -->
</head>
<body>
<!--header begin-->
<div class="header_2">
<div class="right">
<a href="./html/Login.html">登录</a> | <a href="./html/register.html">注册</a> | <a href="#">帮助中心</a> | <a href=""> 资质证照/协议规则</a>
</div>
</div>
<!-- 搜索栏 -->
<div class="header1">
<div class="left">
<img src="./images/小米1.png" alt="">
</div>
<div class="shopping">
<a href="./html/shopping.html"> <img src="./images/购物车.png" alt="" style="width: 51px; height: 36px;"></a>
</div>
<div class="seach">
<div class="seacj_icon">
<div style="width: 20px; height: 20px; cursor:default; margin-top: 25px;">
<img src="./images/查找.png" alt="">
</div>
</div>
<div class="seach1">
<input type="text" placeholder="圣诞礼遇季" value>
</div>
</div>
<div class="left1"></div>
<div class="box">
<ul>
<li>有品秒杀</li>
<li>企业采购</li>
</ul>
</div>
</div>
<!-- nav -->
<div class="container1">
<div class="bleft">
<ul>
<li> <a href="#">有品推荐/手机数码</a></li>
<li> <a href="#">小米电视/影音娱乐</a></li>
<li> <a href="#">大家电/厨卫电器</a></li>
<li> <a href="#">生活家电/个护电器</a></li>
<li> <a href="#">智能家庭/美食酒饮</a></li>
<li> <a href="#">家具家装/电脑办公</a></li>
<li> <a href="#">出行车品/服装配饰</a></li>
<li> <a href="#">手表首饰/运动户外</a></li>
<li> <a href="#">医疗健康/日用百货</a></li>
<li> <a href="#">美妆个护/鞋靴箱包</a></li>
</ul>
</div>
<div class="bright"><div class="container">
<!-- header是用来存放轮播图模块的 -->
<div class="header">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="./images/小米3.png" alt="" width="860px" height="360px"></a></div>
<div class="swiper-slide"><img src="./images/小米4.png" alt="" width="860px" height="360px"></div>
<div class="swiper-slide"><img src="./images/小米5.png" alt="" width="860px" height="360px"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- <div class="a"><img src="./images/6.jpg" alt=""></div> -->
<script src="./js/swiper-bundle.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</div>
<div class="container_bottom">
<ul >
<li> <a href="https://m.xiaomiyoupin.com/w/new_product_v3?_rt=weex&pageid=4728&sign=846b35b9e94a50a84a0d07b9ab2cc36a&pdl=jianyu&spmref=YouPinPC.$Home$.icon.0.44809315"> <img src="./images/小米6.png" alt=""></a><p>上新精选</p></li>
<li><a href="https://m.xiaomiyoupin.com/w/crowdfundV2?_rt=weex&pageid=6425&sign=a31558dc483536c81f38a701b1cbefce&pdl=jianyu&spmref=YouPinPC.$Home$.icon.0.5316917"><img src="./images/小米7.png" alt=""></a><p>小米众筹</p></li>
<li><a href="https://m.xiaomiyoupin.com/r/secbuy?type=secbuy&spmref=YouPinPC.$Home$.icon.0.44802623"><img src="./images/小米8.png" alt=""></a><p>有品秒杀</p></li>
<li><a href="https://m.xiaomiyoupin.com/w/universal_1?_rt=weex&pageid=6836&sign=94147275592ceaaffcf4d996a82e0e09&pdl=jianyu&spmref=YouPinPC.$Home$.icon.0.138784"><img src="./images/小米9.png" alt=""></a><p>生活优选</p></li>
<li class="last"><a href="https://m.xiaomiyoupin.com/w/universal_1?_rt=weex&pageid=7123&sign=c99a44acccc55af79bf0e5dfd171790e&pdl=jianyu&scm=1008.0.0.0.6&scmv2_num=0&last_scmv2=1008.0.0.0.6&spmref=YouPinPC.$Home$.icon.0.24432910"><img src="./images/小米10.png" alt=""></a><p>小米自营</p></li>
</ul>
<br/>
</div>
<div class="banner">
<h2 class="box">
小米有品众筹
<span>永远年轻 永远好奇</span>
</h2>
<div class="box1">
<img src="./images/小米11.png" alt="" width="537px" height="245px">
</div>
<div class="box2">
<img src="./images/小米12.png" alt="" width="266px" height="245px">
</div>
<div class="box2">
<img src="./images/小米13.png" alt="" width="266px" height="245px">
</div>
</div>
<!-- containers -->
<div class="containers">
<h2 class="box3">精选好物</h2>
<div class="bigbox">
<div class="sbox">
<div class="last1">
<img src="./images/小米14.jpg" alt="" style="height:195px; width:195px; margin: left -0.5px; ">
<div class="last2">
<div class="slabel">
<img src="./images/小米标签2.png" alt="" style="width: 68px; height: 20px;">
</div>
<div class="biglabel">
<img src="./images/小米标签1.png" alt="" style="width: 68px; height: 20px;">
</div>
</div>
<div class="top">美可卓蓝胖子奶粉</div>
<div class="mid">
<div class="mid1"><span style="font-size: 20px;">¥</span>139</div>
</div>
</div>
<div class="last1">
<img src="./images/小米15.jpg" alt="" style="height:195px; width:195px; margin: left -0.5px;">
<div class="last2">
<div class="slabel">
<img src="./images/小米标签3.png" alt="" style="width: 68px; height: 20px;">
</div>
<div class="biglabel">
<img src="./images/小米标签5.png" alt="" style="width: 68px; height: 20px;">
</div>
</div>
<div class="top">智能猫眼</div>
<div class="mid">
<div class="mid1"><span style="font-size: 20px;">¥</span>539</div>
</div>
</div>
<div class="last1">
<img src="./images/小米16.png" alt="" style="height:195px; width:195px; margin: left -0.5px; margin:0 auto;">
<div class="last2">
<div class="label">
<img src="./images/小米标签4.png" alt="" style="width: 38px; height: 20px;">
</div>
<div class="biglabel">
<img src="./images/小米标签3.png" alt="" style="width: 68px; height: 20px;">
</div>
</div>
<div class="top">灵巧小白枪吸尘器</div>
<div class="mid">
<div class="mid1"><span style="font-size: 20px;">¥</span>99</div>
</div>
</div>
<div class="last1">
<img src="./images/小米17.png" alt="" style="height:195px; width:195px; margin: left -0.5px;">
<div class="last2">
<div class="slabel">
<img src="./images/小米标签3.png" alt="" style="width: 68px; height: 20px;">
</div>
<div class="biglabel">
<img src="./images/小米标签6.png" alt="" style="width: 68px; height: 20px;">
</div>
</div>
<div class="top">多功能折叠小桌板</div>
<div class="mid">
<div clas
- 1
- 2
- 3
- 4
- 5
前往页