HTML5+CSS3实现华为官网(完整版)

前言

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

一、效果展示

HTML5+CSS3实现华为官网(完整版)_第1张图片


HTML5+CSS3实现华为官网(完整版)_第2张图片
HTML5+CSS3实现华为官网(完整版)_第3张图片
HTML5+CSS3实现华为官网(完整版)_第4张图片

二、代码分析

1.头部导航栏

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

 
     
 
  • 个人及家庭产品
  • 商用产品及方案
  • 服务支持
  • 合作伙伴与开发者
  • 关于华为

2.中间部分

中间部分就是一个大的div然后div里面再放置一些小div,再对元素进行添加
HTML5+CSS3实现华为官网(完整版)_第5张图片

   

信息与活动

展会活动

SNEC光伏大会暨(上海)展览会

中国,上海   2023年5月23日 - 26日

本次大会主题为“融智于光,共创未来”,华为智能光伏以产业引领、融合创新、生态共赢为目标,重磅发布大型地面、工商业、户用三大场景解决方案。

展会活动

华为全球智慧金融峰会2023

中国,上海   2023年6月7日 - 8日

本次大会针对未来金融行业发展趋势,深入探讨如何加速技术应用,敏捷创新提升生产力,加速推进金融行业数字化转型。

更多活动
更多精彩

3.网页尾部

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

  

三、总结

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

四、源代码+图片素材

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

你可能感兴趣的:(html5,css3,华为)