HTML5+CSS3实现华为商城（课程设计完整版）

柔情只为你懂 2024-02-19 08:55 68阅读 0赞

## 前言 ##

这个是用HTML5+CSS3实现的一个华为商城的页面，并且实现了二级页面。  
结构相对简单不复杂，适合在校生当课程设计，当然 如果你的需要其他的网页作品可以移步我的其他作品，或者点击下面的“传送墙”！  
希望可以帮助到大家，有什么问题可以联系我或者在评论区指出！  
文章末尾附项目完整源代码。  
[HTML5+CSS3实现小米商城][HTML5_CSS3]  
[HTML5+CSS3实现华为官网][HTML5_CSS3 1]  
[HTML5+CSS3实现哔哩哔哩首页][HTML5_CSS3 2]  
[HTML5+CSS3实现小米官网][HTML5_CSS3 3]  
[HTML5+CSS3实现QQ注册页面][HTML5_CSS3_QQ]

话不多说，直接展示项目运行效果！

## 一、效果展示 ##

![在这里插入图片描述][15027fd28822472f8a0aae3238d8f28a.png]  
![在这里插入图片描述][dac232eadf31457daa3b6cc185b2e314.png]  
![在这里插入图片描述][e1a63f25c02149bc87cf2bfc665fb2d5.png]  
![在这里插入图片描述][c42d3cd4ae1043aeb89213f38105f85a.png]![在这里插入图片描述][30e2aae51d8349c48d95eefa8167f68c.png]

## 二、部分代码展示 ##

因为文章篇幅受限，所以这里仅展示部分代码！如果需要完整源代码，请移步文章末尾

#### 1.轮播图部分 ####

<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.侧边栏效果 ####

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

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

链接：https://pan.baidu.com/s/1k6llDi-DfxNsfmO5g\_L6NQ?pwd=1215  
提取码：1215

## 四、项目总结 ##

希望这个项目能够帮助到大家，同时如果大家在课程大作业上遇到困难，可以dd我，共同交流学习。

[HTML5_CSS3]: https://blog.csdn.net/m0_63512120/article/details/134233772?spm=1001.2014.3001.5501
[HTML5_CSS3 1]: https://blog.csdn.net/m0_63512120/article/details/130961765?spm=1001.2014.3001.5501
[HTML5_CSS3 2]: https://blog.csdn.net/m0_63512120/article/details/129710606?spm=1001.2014.3001.5501
[HTML5_CSS3 3]: https://blog.csdn.net/m0_63512120/article/details/129443760?spm=1001.2014.3001.5501
[HTML5_CSS3_QQ]: https://blog.csdn.net/m0_63512120/article/details/125894002?spm=1001.2014.3001.5501
[15027fd28822472f8a0aae3238d8f28a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/dba18df28d7f475bab783bc77bf6c89e.png
[dac232eadf31457daa3b6cc185b2e314.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3a196c3913444e39b30ea3d1473aa0ad.png
[e1a63f25c02149bc87cf2bfc665fb2d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/41089136075a4d68b367f8eaa98693b6.png
[c42d3cd4ae1043aeb89213f38105f85a.png]: https://img-blog.csdnimg.cn/c42d3cd4ae1043aeb89213f38105f85a.png
[30e2aae51d8349c48d95eefa8167f68c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/48fa3bb7b8cf44179387c3d9742131eb.png