HTML5+CSS3实现华为商城和购物车（课程设计大作业）
HTML5+CSS3实现华为商城和华为购物车
- 前言
- 一、效果展示
-
-
- 华为商城
- 华为购物车
-
- 二、代码分析
-
-
- 华为商城
- 华为购物车
-
- 三、项目完整源代码
- 大家有任何问题都可以私信我，24h在线答疑
前言
这是我用HTML5+CSS3实现的华为商城和华为购物车页面
其中华为商城有二级页面！
页面结构相对简单不太复杂，适合给大家当个课程设计作业！
还有一些其他关于华为的页面，比如登录、购物车、官网之类的，都放在文章末尾网盘里面了！
还有一些其他类型的页面大家可以参考一下，每个网页都很有特色
HTML5+CSS3+JS实现小米商城和购物车
HTML5+CSS3实现小米商城
HTML5+CSS3实现小米官网
HTML5+CSS3实现哔哩哔哩主页
HTML5+CSS3实现QQ注册页面
HTML5+CSS3实现华为官网
HTML5+CSS3实现华为鸿蒙官网
话不多说下面展示一下两个页面效果！
一、效果展示
华为商城
这个右边这个边框是截图没有截好，实际不存在哈
华为购物车
二、代码分析
华为商城
轮播图部分
这里是用 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;
}
}
侧边导航栏效果
这里是通过ul列表先将标题展示出来，然后将每个标题对象的盒子给隐藏起来，通过鼠标触碰将盒子展示出来
<div>
<div class="laster2" style="margin: 0 auto;background-color: #f9f9f9;">
<div class="last all" style="background-color:#f9f9f9 ;">
<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">950805div>
<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="#">HarmonyOSa>
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="#">COOKIESa>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—20190762a>li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">备案主体编号：44201919072182a>
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-0102a>li>
<li style="border-left:1px solid #EBEBEB;"><a
href="#">广东省网络食品交易第三方平台备案：GDWS10168a>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>
华为购物车
页面尾部设计
<div>
<div class="laster2" style="margin: 0 auto;background-color: #f9f9f9;">
<div class="last all" style="background-color:#f9f9f9 ;">
<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">950805div>
<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="#">HarmonyOSa>
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="#">COOKIESa>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—20190762a>li>
<li style="border-left:1px solid #EBEBEB;"><a href="#">备案主体编号：44201919072182a>
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-0102a>li>
<li style="border-left:1px solid #EBEBEB;"><a
href="#">广东省网络食品交易第三方平台备案：GDWS10168a>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>
三、项目完整源代码
链接：https://pan.baidu.com/s/1538stsXWaPShaW6OGJM4Wg?pwd=0720
提取码：0720