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

前言

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

一、效果展示

二、代码分析

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;">&nbsp;</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，再对元素进行添加

   <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;">&nbsp;</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;">&nbsp;</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/1k6llDi-DfxNsfmO5g_L6NQ?pwd=1215
提取码：1215