前言
本篇文章是分析用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;"> </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;"> </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