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

妖狐艹你老母 2024-02-17 10:54 57阅读 0赞

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

*  前言
 *  一、效果展示
 *   *   *  华为商城
         *  华为购物车
 *  二、代码分析
 *   *   *  华为商城
         *  华为购物车
 *  三、项目完整源代码
 *  大家有任何问题都可以私信我，24h在线答疑

## 前言 ##

这是我用HTML5+CSS3实现的华为商城和华为购物车页面  
其中华为商城有二级页面！  
页面结构相对简单不太复杂，适合给大家当个课程设计作业！  
还有一些其他关于华为的页面，比如登录、购物车、官网之类的，都放在文章末尾网盘里面了！

还有一些其他类型的页面大家可以参考一下，每个网页都很有特色  
[HTML5+CSS3+JS实现小米商城和购物车][HTML5_CSS3_JS]  
[HTML5+CSS3实现小米商城][HTML5_CSS3]  
[HTML5+CSS3实现小米官网][HTML5_CSS3 1]  
[HTML5+CSS3实现哔哩哔哩主页][HTML5_CSS3 2]  
[HTML5+CSS3实现QQ注册页面][HTML5_CSS3_QQ]  
[HTML5+CSS3实现华为官网][HTML5_CSS3 3]  
[HTML5+CSS3实现华为鸿蒙官网][HTML5_CSS3 4]

话不多说下面展示一下两个页面效果！

## 一、效果展示 ##

#### 华为商城 ####

**这个右边这个边框是截图没有截好，实际不存在哈**  
![在这里插入图片描述][38c9002aafc94e2b889086042203ff13.png]

#### 华为购物车 ####

![在这里插入图片描述][c3e53c2fd2354663b30a5bd308e020f2.png]

## 二、代码分析 ##

#### 华为商城 ####

**轮播图部分**  
这里是用 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>

#### 华为购物车 ####

**页面尾部设计**

## 三、项目完整源代码 ##

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

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

[HTML5_CSS3_JS]: https://blog.csdn.net/m0_63512120/article/details/134585113?spm=1001.2014.3001.5501
[HTML5_CSS3]: https://blog.csdn.net/m0_63512120/article/details/125885820?spm=1001.2014.3001.5501
[HTML5_CSS3 1]: https://blog.csdn.net/m0_63512120/article/details/129443760?spm=1001.2014.3001.5501
[HTML5_CSS3 2]: https://blog.csdn.net/m0_63512120/article/details/129710606?spm=1001.2014.3001.5501
[HTML5_CSS3_QQ]: https://blog.csdn.net/m0_63512120/article/details/125894002?spm=1001.2014.3001.5501
[HTML5_CSS3 3]: https://blog.csdn.net/m0_63512120/article/details/130961765?spm=1001.2014.3001.5501
[HTML5_CSS3 4]: https://blog.csdn.net/m0_63512120/article/details/134250114?spm=1001.2014.3001.5501
[38c9002aafc94e2b889086042203ff13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3e4b6b1aa0ec40ee9bd02366788141ec.png
[c3e53c2fd2354663b30a5bd308e020f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/71280d199474402ebb5687e7c94be96f.png