<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>仿小米商城</title>
<!--网页描述-->
<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />
<!--网页检索关键字-->
<meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" />
<!--处理默认样式-->
<link rel="stylesheet" href="css/reset.css">
<!--公共的css-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2012993_yft1p4lqm1.css">
<!--引入网页标题图标-->
<link rel="shortcut icon" href="img/icons/index.ico" type="image/x-icon" />
<!--引入jq-->
<script src="js/jquery-3.5.1.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type = "text/javascript" src = "js/include.js"></script>
</head>
<body>
<!--引入头部-->
<div id = "header"></div>
<!--主体的头部-->
<div class="home-hero-container">
<div class="container">
<!--轮播图-->
<div class="Carousel">
<a class="home-Carousel" href="">
<img id="Carousel-img" class="Carousel-img"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7c2e5c62dfcaae720a3cd909c0eae52.jpg?w=2452&h=920"
alt="">
</a>
<!--轮播点-->
<div class="Carousel-point">
<ul id="CarouselPointUl" class="Carousel-point-ul">
<li οnclick="Carousel(0)"></li>
<li οnclick="Carousel(1)"></li>
<li οnclick="Carousel(2)"></li>
<li οnclick="Carousel(3)"></li>
</ul>
</div>
</div>
<!--头部的底部-->
<div class="home-hero-sub">
<div class="home-hero-sub-div1">
<ul class="home-hero-sub-ul">
<li><a href=""><em class="iconfont icon-miaosha"></em>
<p>小米秒杀</p></a></li>
<li><a href=""><em class="iconfont icon-qiye"></em>
<p>企业团购</p></a></li>
<li><a href=""><em class="iconfont icon-Fnum"></em>
<p>F码通道</p></a></li>
<li><a href=""><em class="iconfont icon-shoujiqia"></em>
<p>米粉卡</p></a></li>
<li><a href=""><em class="iconfont icon-yijiuhuanxinjiage"></em>
<p>以旧换新</p></a></li>
<li><a href=""><em class="iconfont icon-huafei"></em>
<p>话费充值</p></a></li>
</ul>
</div>
<div class="home-hero-sub-div2">
<ul>
<li><a href=""><img
src="./img/index_top_K30%20Pro.jpg"
alt=""></a></li>
<li><a href=""><img
src="./img/index_top_K30i%205G.jpg"
alt=""></a></li>
<li><a href=""><img
src="./img/index_top_shouhuan4.jpg"
alt=""></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--主体的身体-->
<div class="home-main">
<div class="container">
<!--小米秒杀-->
<div class="Flash-sale">
<div class="box-hd">
<h2 class="title ">小米闪购</h2>
<div class="swiper-controls">
<span class="swiper-flashsale-prev">
<i class="iconfont icon-icon-test2"></i>
</span>
<span class="swiper-flashsale-next">
<i class="iconfont icon-icon-test1"></i>
</span>
</div>
</div>
<div class="box-bd">
<div class="left">
<div class="round"><span>00:00</span> 场</div>
<img src="img/秒购.png" alt="">
<div class="desc">距离结束还有</div>
<div class="countdown">
<span id="Flash_H">08</span>
<i>:</i>
<span id="Flash_M">54</span>
<i>:</i>
<span id="Flash_S">16</span>
</div>
</div>
<div class="right ">
<ul id="right-Flash">
<li><a href="">
href="">
<img width="234px" height="143px" src="img/浏览更多电视影音.png" alt="">
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--图片分割栏-->
<div class="home-image-box">
<a href="">
<img src="./img/index_img-box.jpg">
</a>
<!--图片分割栏-->
<div class="home-image-box">
<a href="">
<img src="./img/index_img-box.jpg">
</a>
</div>
<!--配件-->
<div class="Home-appliances Home-array home-brick-box">
<div class="home-box-hd">
<h2 class="title">配件</h2>
<div class="more">
<ul>
<li class="tab-active">热门</li>
<li class="">充电器</li>
</ul>
</div>
</div>
<div class="box-bd">
</div>
<div class ="Played-right">
<div class="Played-speaker iconfont icon-laba"></div>
<div class="Played-volume">
<!--音量进度条-->
<div class="volume-strip">
<span></span>
<span></span>
</div>
</div>
<div class="full-screen iconfont icon-quanping"></div>
</div>
</div>
</div>
</div>
</div>
<!--引入js-->
<script src="js/style.js"></script>
<script src="js/PlayVideo.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(243, 243, 243);
}
.header{
width:1226px;
height:58px;
/* background-color: rgb(187, 187, 187); */
margin:0 auto;
}
span{
float:left;
line-height: 58px;
font-size: 24px;
font-weight:20;
}
a{
text-decoration: none;
float:right;
line-height:58px;
color: black;
}
.container{
width: 1226px;
height: 1000px;
margin: 0 auto;
}
.container-left{
width: 234px;
height: 612px;
background-color: coral;
float: left;
}
.container-right{
width: 992px;
height: 1000px;
float: right;
/* background-color: rgb(233, 233, 233); */
}
li{
list-style: none;
width: 236px;
height: 300px;
background-color: rgb(255, 255, 255);
float: left;
margin: 0px 0px 12px 12px;
}
.container-left>img{
width: 234px;
height:612px;
}
li>img{
margin: 12px 18px 0px 18px;
}
.p1{
margin: 0px 64px 0px 64px;
}
.p2{
margin: 0px 82px 0px 82px;
font-size: 14px;
color: darkgrey;
}
.span2{
/* display: inline-block; */
margin: -10px 96px 0px 96px;
font-size: 12px;
color: rgb(255, 0, 0);
}
li:hover{
box-shadow: 0px 0px 20px 0px rgb(158, 157, 157);
transition: 3s;
}
a>img{
width: 18px;
height: 18px;
border-radius: 10px;
vertical-align: -3px;
}
</style>
</head>
<body>
<div class="header">
<span>手机</span>
<p><a href="#">查看更多<img src="./img/icon-slides.png"></a></p>
</div>
<div class="container">
<div class="container-left">
<img src="img/left_mi.jpg" alt="" title="">
</div>
<div class="container-right">
<ul>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
<li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
