HTML5+CSS3实现华为商城和购物车（课程设计大作业）

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量3k 收藏 42
点赞数 30
文章标签： html5 css3 华为 js 前端 课程设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63512120/article/details/134633299
版权

HTML5+CSS3实现华为商城和华为购物车

前言

这是我用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">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>

华为购物车

页面尾部设计

 <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">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>

三、项目完整源代码

链接：https://pan.baidu.com/s/1538stsXWaPShaW6OGJM4Wg?pwd=0720
提取码：0720

大家有任何问题都可以私信我，24h在线答疑

壹个人的火锅
关注
  • 30
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
华为官网、专区、商城、登陆网页代码.zip
12-27
本项目基本还原了官方页面。华为官网静态网页代码原生HTML+原生css+原生js。五个页面分别是官网首页，华为专区，华为商城，产品页面，登录页面。
基于HTML5的静态购物车页面.zip
02-18
大家可以作为参考学习，页面中有图片轮播。商品添加，商品删除，批量删除，总价，小计等常规购物车功能，
制作京东购物车，包含html+js+css完整代码
m0_74937643的博客
05-18 1233
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
用JavaScript+html+css制作当当购物车
热门推荐
weixin_46409887的博客
03-13 2万+
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{width: 810px; margin: 0 auto; font-family: "微软雅黑";} .logo{margin: 10px 0;} .logo span{ display: inline-block...
HTML淘宝购物车页面的实现
qq_46007633的博客
03-22 1万+
仿照淘宝购物车。主要包括以下知识，超级简单，没使用CSS，很多功能没有实现，只是一个仿造的购物车页面。 使用div标签，将整个页面划分为上中下相应的几个模块。 使用高级标签，包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾，对表格进行横向分组，将淘宝购物车分成相应的几部分。 列出几个小标题，比如单价、数量、金额、操作等。 根据确定的列，使用相应的图像标签、超链接、表单域等
购物车删除按钮
dada_master的博客
11-05 1818
HTML 购物车  全选 商品 单价 数量 小计 操作 Casi
仿华为商城部分前端界面html+css+js
06-28
总的来说，这个"仿华为商城部分前端界面html+css+js"项目涵盖了Web前端开发的核心技术，通过学习和实践这个项目，开发者可以深入理解如何将静态的设计稿转化为交互性强的网页，并提升在实际项目中的应用能力。...
web期末大作业-基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.rar
05-19
本学期Web期末大作业，我们为您呈现一个精心制作的静态网页源码项目——基于HTML+CSS+JS实现的仿华为商城。经过严格的运行测试，我们确保该项目在各大主流浏览器中均能完美呈现，无兼容性问题。 这个项目不仅是一个...
web期末大作业静态网页设计期末作业二十四节气HTML+css+js静态网页源码.zip
最新发布
05-20
web期末大作业静态网页设计期末作业二十四节气HTML+css+js静态网页源码.zip个人98分大作业设计项目，代码完整下载可用，纯手打高分大作业设计，可作为期末大作业和课程设计，小白也可实战。 本学期Web期末大作业，...
网页设计大作业-仿hua为商城HTML、css
10-26
总之，"仿华为商城HTML、css"大作业涵盖了网页设计的核心知识，通过这个项目，学生可以全面提高HTML结构化思维、CSS美化和布局能力，同时增强对网页交互设计的理解，为未来进入Web开发领域打下坚实基础。
html和css写的华为商城首页静态网页，.zip
10-01
在华为商城的静态首页中，HTML和CSS的结合将实现页面的视觉设计、交互效果和布局结构。开发者可能会利用Bootstrap、Foundation等前端框架，或者自定义CSS，以快速创建响应式布局和一致的界面。此外，为了优化加载...
HTML5+CSS3移动商城-购物车
记录和分享属于我的“IT”时光
04-29 3663
HTML5+CSS3移动商城-购物车
通过HTML实现购物车页面
m0_58496493的博客
06-17 2223
购物车
HTML+JS（购物车案例）
2301_77638787的博客
08-21 2673
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
加入购物车列表 HTML + CSS + js
W256999的博客
07-03 1204
【代码】加入购物车列表 HTML + CSS + js。
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
HTML5+CSS3实现小米商城和购物车（课程设计大作业）
m0_63512120的博客
11-24 3231
用的是HTML和CSS和JS做的小米商城首页和一个小米的购物车案例！项目末尾有项目完整源代码，其中 小米商城用 js 实现了和以及购物车页面实现了以及还有华为和小米和哔哩哔哩的一些其他相关页面就不在这里展示了，如果需要了可以后台私信我！那话不多说，先展示一下我的这两个页面实现效果吧！
用HTML+css实现华为商城注册页面
04-17
华为商城注册页面的HTML和CSS实现，可以通过以下步骤进行： 1. 首先创建一个HTML文件，可以命名为register.html。在文件中添加页面的基本结构，包括头部（head）、页面主体（body）等。 2. 在页面主体中，添加注册...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值