HTML5+CSS3实现华为官网（完整版）

灰太狼 2024-03-16 11:26 37阅读 0赞

## 前言 ##

本篇文章是分析用HTML5+CSS3实现的一个静态华为官网页面。 文章主页还有以前写过的华为商城、小米官网、小米商城等需要了可以移步到主页。文章结尾附源码+图片素材。

## 一、效果展示 ##

![在这里插入图片描述][488feb95cf9d42daa1801ee0fb553770.png]  
![在这里插入图片描述][c23e7f702811407c95496dc26536322d.png]  
![在这里插入图片描述][dabd676a0247487fbe498789dd7da31d.png]  
![在这里插入图片描述][df606e11ebbe46c38b4fa1cd4c608e3e.png]  
![在这里插入图片描述][bde14e6c71814f12bb5a3ae0549100b3.png]  
![在这里插入图片描述][fb9b7291f84c45c1a2a555bc3f828c10.png]

## 二、代码分析 ##

#### 1.头部导航栏 ####

头部导航栏是先写好一个div设置好宽度和高度，然后放一个ul列表对元素进行排列展示

<div class="head1">
            <div class="head1_1">
                <a href="">登录</a>
                <a href="">选择区域/语言</a>
                <a href="">集团网站</a>
            </div>
        </div>
         <div class="con11">
                <div class="con1">
                    <img src="./imgs/logo.png" alt="" class="con1_img">
                    <span style="display: inline-block;width: 250px;float: left;"> </span>
                    <ul class="con1_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>

#### 2.中间部分 ####

中间部分就是一个大的div然后div里面再放置一些小div，再对元素进行添加  
![在这里插入图片描述][20735c1f8b614bcf85fa0cf7d3190e4e.png]

<div class="con5">
                <div class="con3_demo1">
                    <h2 style="width: 175px;margin-left: 531px;">信息与活动</h2>
                </div>
    
                <div class="con5_div1">
                    <div class="con5_div1_demo">展会活动</div>
                    <img src="./imgs/b2.jpg" alt="">
                    <div class="con5_div1_div">
                        <p style="font-weight: bold;font-size: 18px;color: #333333;">SNEC光伏大会暨(上海)展览会</p>
                        <p style="margin-top: 12px;margin-bottom: 22px;">
                            <span>中国，上海</span>
                            <span style="display: inline-block;width: 55px;"> </span>
                            <span>2023年5月23日 - 26日</span>
                        </p>
                        <p style="width: 348px;color: #666;font-size: 14px;">
                            本次大会主题为“融智于光，共创未来”，华为智能光伏以产业引领、融合创新、生态共赢为目标，重磅发布大型地面、工商业、户用三大场景解决方案。</p>
                    </div>
                </div>
                <div class="con5_div1">
                    <div class="con5_div1_demo">展会活动</div>
                    <img src="./imgs/b1.jpg" alt="">
                    <div class="con5_div1_div">
                        <p style="font-weight: bold;font-size: 18px;color: #333333;">华为全球智慧金融峰会2023</p>
                        <p style="margin-top: 12px;margin-bottom: 22px;">
                            <span>中国，上海</span>
                            <span style="display: inline-block;width: 55px;"> </span>
                            <span>2023年6月7日 - 8日</span>
                        </p>
                        <p style="width: 348px;color: #666;font-size: 14px;">
                            本次大会针对未来金融行业发展趋势，深入探讨如何加速技术应用，敏捷创新提升生产力，加速推进金融行业数字化转型。</p>
                    </div>
                </div>
                <div class="con5_div1" style="margin-right: 0;">
                    <div class="con5_div1_demo">新闻</div>
                    <div class="con5_demo1">
                        <a href="" class="con5_demo1_a">
                            <h4 style="margin-bottom: 15px; color: #333333;">“新应用，新数据，新韧性”，华为提出面向YB数据时代的存储产业演进方向</h4>
                            <p style="color: #666666;">2023年05月24日</p>
                        </a>
                        <a href="" class="con5_demo1_a">
                            <h4 style="margin-bottom: 15px; color: #333333;">华为自动驾驶网络解决方案蝉联GlobalData p网络资源编排能力业界领导者</h4>
                            <p style="color: #666666;">2023年05月23日</p>
                        </a>
                        <a href="" class="con5_demo1_a">
                            <h4 style="margin-bottom: 15px; color: #333333;">华为与合作伙伴公布墨西哥尤卡坦州野生动物保护成果</h4>
                            <p style="color: #666666;">2023年05月18日</p>
                        </a>
                        <a href="" class="con5_demo1_a">
                            <h4 style="margin-bottom: 15px; color: #333333;">华为:跃升数字生产力，共促高质量发展</h4>
                            <p style="color: #666666;">2023年05月17日</p>
                        </a>
                    </div>
                </div>
    
                <div class="con6">
                    <div class="con6_1">更多活动</div>
                    <div class="con6_1">更多精彩</div>
                </div>
            </div>

#### 3.网页尾部 ####

页面尾部用 ul 列表或者table表格实现就行，或者也可以使用布局来更方便的实现

<div class="end">
            <div class="last">
                <div class="box1">
                    <span class="a1"><a href="#">首页</a></span>
                    <span class="a2">
                        <input type="search" placeholder="搜索huawei.com" style="font-size: 16px;">
                    </span>
                </div>
                <div class="box2">
                    <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="#">招纳贤士</a>
                            </li>
                            <li>
                                <a href="#">供应商</a>
                            </li>
                            <li>
                                <a href="#">查看更多 ></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>
                        </ul>
                    </div>
                    <div class="y3">
                        <h4>
                            发现华为
                        </h4>
                        <ul>
                            <li>
                                <a href="#">华为技术专栏</a>
                            </li>
                            <li>
                                <a href="#">跃升数字生产力</a>
                            </li>
                            <li>
                                <a href="#">智能世界2030报告</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>
                            <li>
                                <a href="#">产品安全通告</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box3">
                    <div class="y6">
                        <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="y7">
                        <a href="#"><img src="imgs/新浪.png" alt=""></a>
                        <a href="#"><img src="imgs/in.png" alt=""></a>
                        <a href="#"><img src="imgs/微信.png" alt=""></a>
                        <a href="#"><img src="imgs/头条样式.png" alt=""></a>
                        <a href="#"><img src="imgs/知识.png" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="lastest">
                <div class="y10">
                    <ul>
                        <li>@2023华为技术有限公司</li>
                        <li><a href="#">粤A2-20044005号</a></li>
                        <li><a href="#">粤公网安备4403072002388号</a></li>
                        <li><em>|</em></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>

## 三、总结 ##

该网页只用到了html和css知识，大家有任何问题了都可以在评论区指出或者私信我。

## 四、源代码+图片素材 ##

链接：https://pan.baidu.com/s/1fp0oAGvpli7a8O69bC5TCA?pwd=ojbk  
提取码：ojbk

[488feb95cf9d42daa1801ee0fb553770.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6b335342f76d4d809ecb6369d6a9c093.png
[c23e7f702811407c95496dc26536322d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/dd18b4233b8e48fb838e0ec5739c569a.png
[dabd676a0247487fbe498789dd7da31d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3bd77306f1434f2685f97ce0b22d9558.png
[df606e11ebbe46c38b4fa1cd4c608e3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/05d71c1274aa4d2c8de821bebf62f247.png
[bde14e6c71814f12bb5a3ae0549100b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/321f14f92ff143bd8ebafd119fac071f.png
[fb9b7291f84c45c1a2a555bc3f828c10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/81a474432ce84aa0ba7c967acbf9c941.png
[20735c1f8b614bcf85fa0cf7d3190e4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b8f3a2cb329f4521a0ed51dc2662b0fe.png