HTML5+CSS3实现华为商城（完整版）

桃扇骨 2024-03-16 11:28 101阅读 0赞

## 前言 ##

这个是用HTML5+CSS3实现的一个华为商城页面，感觉整体布局和小米商城差不多，如果有需要华为官网、小米商城、小米官网的可以移步到我的主页。

## 一、效果展示 ##

![在这里插入图片描述][4ce5a698c70c49e6b1e1f089785be148.png]  
![在这里插入图片描述][4225fdd3ce4a4433817c8d0ee39f4218.png]  
![在这里插入图片描述][068869778c9e471585b9974ea03c8d15.png]  
![在这里插入图片描述][10d46eea577b49b397f676aa146ed365.png]  
![在这里插入图片描述][14ac808193954970abeaeabf9a3de59a.png]

## 二、代码分析 ##

#### 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列表先将标题展示出来，然后将每个标题对象的盒子给隐藏起来，通过鼠标触碰将盒子展示出来  
![在这里插入图片描述][55f14f4745084f3a822acb8cae444b89.png]

<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.中间广告块部分 ####

一个广告块设置一个大盒子，然后盒子里面将每个产品都设置一个小盒子，然后将盒子顺序排列展示出来即可  
![在这里插入图片描述][d060bfd450b14b55ac6cf1d6c42f31ee.png]

<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

[4ce5a698c70c49e6b1e1f089785be148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bf13b313c3474d6ead8f52df78584413.png
[4225fdd3ce4a4433817c8d0ee39f4218.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8141efb3d92449ddbffd98e14029a685.png
[068869778c9e471585b9974ea03c8d15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/564424ad45fa49fdb6b71a010db6eefc.png
[10d46eea577b49b397f676aa146ed365.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9175d80516684a60820c00d4a4ce114b.png
[14ac808193954970abeaeabf9a3de59a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/013a27a86f2c4e5f8fa1f91393807ae1.png
[55f14f4745084f3a822acb8cae444b89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/adda706b000c4f57a807376fe4291a2b.png
[d060bfd450b14b55ac6cf1d6c42f31ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/749d26ec65764124a49965927ada41d5.png