<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="./index.css">
<style>
/* *{
padding: 0px;
margin: 0px;
} */
.container {
/* background-color: #fff; */
width: 100%;
height: 650px;
margin-left: -80px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 650px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: #333;
opacity: 0;
transition: opacity 1s;
}
.slide.active {
opacity: 1;
}
.slide:nth-child(1) {
background-image: url("img/lb.jpg");
background-size: 100% 650px;
}
.slide:nth-child(2) {
background-image: url("img/lb1.jpg");
background-size: 100% 650px;
}
.slide:nth-child(3) {
background-image: url("img/lb2.jpg");
background-size: 100% 650px;
}
.slide:nth-child(4) {
background-image: url("img/lb3.jpg");
background-size: 100% 650px;
}
.slide:nth-child(5) {
background-image: url("img/lb4.jpg");
background-size: 100% 650px;
}
.slide:nth-child(6) {
background-image: url("img/lb5.jpg");
background-size: 100% 650px;
}
.slide:nth-child(7) {
background-image: url("img/lb6.jpg");
background-size: 100% 650px;
}
.slide:nth-child(8) {
background-image: url("img/lb7.jpg");
background-size: 100% 650px;
}
.dots {
width: 100%;
position: absolute;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.5s;
}
.dot.active {
opacity: 1;
}
</style>
</head>
<body>
<!--头部内容-->
<div class="topbar" id="topbar">
<div class="barconst" >
<div class="const-lt">
<a href="index.html">首页</a>
<a href="#">官网</a>
<a href="#">更多精彩</a>
</div>
<div class="const-ri">
<a href="../login/login.html">登录</a>
<a href="../mide/mide.html">个人中心</a>
<a href="../fuwu/index.html">服务中心</a>
<a href="../cart/cart.html">购物车</a>
</div>
</div>
</div>
<!-- 回到顶部 -->
<div class="top" onclick="returnTop()">
︿
</div>
<!--中间主体内容部分-->
<div class="zhuti">
<div class="container">
<div class="slide active"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="dots">
<div class="dot active" onclick="changeSlide(0)"></div>
<div class="dot" onclick="changeSlide(1)"></div>
<div class="dot" onclick="changeSlide(2)"></div>
<div class="dot" onclick="changeSlide(3)"></div>
<div class="dot" onclick="changeSlide(4)"></div>
<div class="dot" onclick="changeSlide(5)"></div>
<div class="dot" onclick="changeSlide(6)"></div>
<div class="dot" onclick="changeSlide(7)"></div>
</div>
</div>
<div class="gdleft">
<ul>
<li class="gdleft1">
<a href="#"><span>手机</span></a>
<span class="item">></span>
<div class="shouji">
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color:white;margin-top: 40px;margin-left: 30px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/dh1.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
</div>
</li>
<li class="gdleft1"><a href="#"><span>电脑</span></a>
<span class="item">></span>
<div class="shouji">
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/cen7.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/cen8.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: 40px;margin-left: 30px;">
<img src="./img/cen11.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列</p>
</div>
<div style="width: 140px;height: 60px;background-color: white;margin-top: -60px;margin-left: 230px;">
<img src="./img/cen10.jpg" alt="" width="60px" height="60px">
<p style="color: grey;font-size: 14px;padding-left: 60px;margin-top: -68px;">Mate系列
仿华为商城部分前端界面html+css+js
需积分: 0 129 浏览量
2023-06-28
16:48:05
上传
评论 3
收藏 13.49MB ZIP 举报
仿华为商城部分前端界面html+css+js （172个子文件） 
index.css 7KB index1.css 6KB index.css 5KB mide.css 4KB zx.css 2KB computer.css 2KB cart.css 2KB index-css3.css 1KB shouji.css 1019B order.css 995B
index.html 69KB computer.html 39KB zx.html 31KB index.html 14KB address.html 9KB index-one.html 9KB order.html 9KB refund.html 8KB shouji.html 8KB arrivals.html 7KB 67.html 7KB exchange.html 7KB cart.html 6KB mide.html 5KB register.html 4KB login.html 3KB
lb5.jpg 548KB lb3.jpg 479KB zx1.jpg 450KB lb1.jpg 430KB lb6.jpg 368KB lb.jpg 357KB zx3.jpg 339KB zx2.jpg 338KB dh1.jpg 316KB dh1.jpg 316KB zx4.jpg 261KB cen12.jpg 218KB cen13.jpg 218KB cen19.jpg 215KB cen17.jpg 215KB cen20.jpg 205KB lb7.jpg 180KB lb2.jpg 174KB 产品图.jpg 171KB cen11.jpg 158KB cen21.jpg 157KB cen14.jpg 153KB cen27.jpg 148KB xiaoxi2.jpg 139KB cen25.jpg 131KB cen26.jpg 117KB cen6.jpg 105KB cen23.jpg 104KB lb4.jpg 103KB cen5.jpg 92KB 欢迎使用华为商城暖心服务.jpg 87KB cen1.jpg 78KB cen30.jpg 75KB cen2.jpg 72KB cen7.jpg 71KB cen10.jpg 70KB cen4.jpg 68KB cen15.jpg 61KB cen31.jpg 53KB cen3.jpg 45KB cen9.jpg 41KB cen8.jpg 40KB cen18.jpg 39KB 2.jpg 37KB cen24.jpg 36KB 4.jpg 35KB 7.jpg 31KB 6.jpg 29KB 5.jpg 28KB cen28.jpg 26KB 9.jpg 25KB 1.jpg 25KB cen32.jpg 24KB cen22.jpg 23KB 10.jpg 22KB 8.jpg 20KB 3.jpg 19KB cen29.jpg 14KB jquery-1.7.2.js 247KB index.js 5KB mide.js 3KB cart.js 2KB index.js 1KB index.js 1KB
多仓发货.png 1.13MB bk.png 687KB vmall care会员.png 376KB zx5.png 333KB zx9.png 308KB zx10.png 246KB zx6.png 232KB zx7.png 222KB zx8.png 217KB xiaoxi1.png 170KB共 172 条
- 1
- 2
资源评论
