前言
这个是用HTML5+CSS3实现的一个华为商城页面，感觉整体布局和小米商城差不多，如果有需要华为官网、小米商城、小米官网的可以移步到我的主页。
一、效果展示
二、代码分析
1.轮播图部分
这里是用 html+css 过渡和动画效果实现的一个简约版轮播图，通过设置一个长盒子放置所有的图片，然后通过改变每个图片的坐标来实现轮播效果
<div class="head3_lunbo">
<!-- 引入轮播图图片 -->
<a href="#" target="_blank"><img src="./imgs/lun1.webp" /></a>
<a href="#" target="_blank"><img src="./imgs/lun2.webp" /></a>
<a href="#" target="_blank"><img src="./imgs/lun3.webp" /></a>
<a href="#" target="_blank"><img src="./imgs/lun4.webp" /></a>
</div>
.head3 {
width: 1518px;
height: 550px;
overflow: hidden;
float: left;
}
.head3_lunbo {
width: 6072px;
height: 550px;
animation: text 10s infinite backwards;
/*消除图片间隔*/
}
.head3_lunbo img {
width: 1518px;
height: 550px;
float: left;
}
@keyframes text {
/*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
0%,
20% {
margin-left: 0px;
}
25%,
45% {
margin-left: -1518px;
}
50%,
70% {
margin-left: -3036px;
}
75%,
100% {
margin-left: -4554px;
}
}
2.侧边导航栏效果
这里是通过ul列表先将标题展示出来，然后将每个标题对象的盒子给隐藏起来，通过鼠标触碰将盒子展示出来
<div class="head3_div1_1">
<span class="head3_div1_s">
<span class="head3_div1_s1">手机</span>
<span class="head3_div1_s2"></span>
</span>
<div class="head3_div1_1_2">
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Redmi 10A</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>iphone 13</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Redmi K50</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
</div>
</div>
<div class="head3_div1_2">
<span class="head3_div2_s">
<span class="head3_div1_s1">电视</span>
<span class="head3_div1_s2"></span>
</span>
<div class="head3_div2_1_2">
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Redmi 10A</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>iphone 13</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Redmi K50</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
</div>
</div>
<div class="head3_div1_3">
<span class="head3_div3_s">
<span class="head3_div1_s1">笔记本 平板</span>
<span class="head3_div1_s2"></span>
</span>
<div class="head3_div3_1_2">
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s">
<img src="./imgs/a1.webp">
<span>Redmi 10A</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>iphone 13</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Redmi K50</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
<span class="head3_div1_1_2s"><img src="./imgs/a1.webp">
<span>Xiaomi 12S</span>
</span>
</div>
</div>
3.中间广告块部分
一个广告块设置一个大盒子，然后盒子里面将每个产品都设置一个小盒子，然后将盒子顺序排列展示出来即可
<div class="con2s">
<span style="font-size: 25px;">甄选推荐</span>
<span></span>
<span style="float: right; color: #878889;font-size: 14px;line-height: 34px;">更多</span>
</div>
<div class="con3">
<div class="con3s">
<img src="./imgs/zhenxuan1.webp" alt="">
<div class="con3s_div1">新品</div>
<p>HUAWEI P60</p>
<p style="color: #898989;font-size: 14px;">洛可可白每—支都独—无二|XMAGE影像</p>
<div class="con3s_div2">预订省100元|准点限量赠音箱</div>
<p>￥4488</p>
</div>
<div class="con3s">
<img src="./imgs/zhenxuan2.webp" alt="">
<div class="con3s_div1" style="left: 38px;">新品</div>
<p>HUAWEI WATCH 4 Pro</p>
<p style="color: #898989;font-size: 14px;">高血糖风险评估研究|—键微体检</p>
<div class="con3s_div2">新品预订省50元|3期0分期利息</div>
<p>￥4488</p>
</div>
<div class="con3s">
<img src="./imgs/zhenxuan3.webp" alt="">
<div class="con3s_div1">新品</div>
<p>HUAWEI P60</p>
<p style="color: #898989;font-size: 14px;">轻靓设计|144Hz高刷全面屏</p>
<div class="con3s_div2">新品全款预售省100</div>
<p>￥4488</p>
</div>
<div class="con3s" style="margin-right: 0;">
<img src="./imgs/zhenxuan4.webp" alt="">
<div class="con3s_div1">新品</div>
<p>HUAWEI P60</p>
<p style="color: #898989;font-size: 14px;">二合一笔记本|120Hz OLED全面屏</p>
<div class="con3s_div2">新品全款预售省100</div>
<p>￥4488</p>
</div>
</div>
4.页面尾部
页面尾部实现起来就比较简单了，可以通过ul列表或者table表格实现就行，或者也可以使用布局来更方便实现
<div class="laster" style="background-color: #ffffff;width:100% ;">
<div class="laster1" style="margin: 0 auto;">
<div class="last all">
<div class="box1">
<ul>
<li><a href="#">百强企业 质量保证</a></li>
<li><a href="#">7天退货 15天换货</a></li>
<li><a href="#">48元起免运费</a></li>
<li><a href="#">2000家服务店 全国联保</a></li>
</ul>
</div>
<div class="box2">
<div class="x1">
<div class="y1">
<h4>购物指南</h4>
<ul>
<li>
<a href="#">免费分期</a>
</li>
<li>
<a href="#">以旧换新</a>
</li>
<li>
<a href="#">纵测活动</a>
</li>
<li>
<a href="#">企业购</a>
</li>
<li>
<a href="#">O2O采购</a>
</li>
</ul>
</div>
<div class="y2">
<h4>售后服务</h4>
<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>
</ul>
</div>
<div class="y3">
<h4>维修与技术支持</h4>
<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>
</ul>
</div>
<div class="y4">
<h4>特色服务</h4>
<ul>
<li>
<a href="#">防伪查询</a>
</li>
<li>
<a href="#">补购保障</a>
</li>
<li>
<a href="#">以旧换新</a>
</li>
<li>
<a href="#">礼品包装</a>
</li>
</ul>
</div>
<div class="y5">
<h4>关于我们</h4>
<ul>
<li>
<a href="#">公司介绍</a>
</li>
<li>
<a href="#">华为零售店</a>
</li>
<li>
<a href="#">商家中心</a>
</li>
<li>
<a href="#">意见反馈</a>
</li>
</ul>
</div>
<div class="y6">
<h4>友情链接</h4>
<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>
</ul>
</div>
</div>
<div class="x2">
<div class="x3">
<div class="y7">950805</div>
<div class="y8">7×24小时客服热线（仅收市话费）</div>
<div class="y9">在线客服</div>
<div class="y10">
关注VMALL: <span></span>
</div>
</div>
</div>
</div>
<div class="box4">
<div class="y11">
<a href="#"><img src="imgs/华为商城图标.png" alt=""
style="height: 20px;width: 80px; margin-top: 30px;"></a>
</div>
<div class="y12">
<div class="z1">
<ul>
<li>
<a href="#">华为集团</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">华为CBG官网</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">华为应用市场</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">HarmonyOS</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">华为终端云空间</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">开发者联盟</a>
</li>
<li style="border-left:1px solid #EBEBEB;">
<a href="#">华为商城手机版</a>
</li>
</ul>
</div>
<div class="z2">
<ul>
<li><a href="#">隐私声明</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">服务协议</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">COOKIES</a></li>
<li style="font-size: 12px; color: #999999;">Copyright@2021-2023华为终端有限公司 版权所有</li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">经营资质</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">粤ICP备19015064号</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">粤公网安备44190002003939号</a></li>
</ul>
</div>
<div class="z3">
<ul>
<li><a href="#">增值电信业务经营许可证：粤B2—20190762</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">备案主体编号：44201919072182</a>
</li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">粤新出网备（2021）2号</a></li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">（粤）网械平台备字[2022]第00005号</a>
</li>
</ul>
</div>
<div class="z4">
<ul>
<li><a href="#">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a></li>
<li style="border-left:1px solid #EBEBEB;"><a
href="#">广东省网络食品交易第三方平台备案：GDWS10168</a></li>
</ul>
</div>
</div>
<div class="y13">
<a href="#"><img src="imgs/电子商标.png" alt=""
style="height: 30px;width: 90px; margin-top: 30px;margin-left: 20px ;"></a>
</div>
</div>
</div>
</div>
</div>
三、项目总结
这是用html+css实现的一个华为商城，如果有任何问题了可以私信我或者在评论区指出，我们共同学习进步！
四、源代码+图片素材
链接：https://pan.baidu.com/s/1kLHDZW4Cjd-6D0vkHVo8yA?pwd=ojbk
提取码：ojbk