HTML5+CSS3实现华为官网

已于 2023-12-13 11:33:37 修改
阅读量2.6k 收藏 36
点赞数 5
文章标签： html5 css3 css
于 2023-05-29 23:06:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62185873/article/details/130938304
版权

一、前言

      对于华为官网是自学时做的一个作品，想要学习的小伙伴，可以借鉴的，一下我会展示效果图和部分代码。

（注：此次做了华为的一系列网页，可以前往我的主页进行查看）

二、效果成品图

 三、代码展示（为部分代码，不能直接运行，源码在下方）

1、头部导航栏

<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 class="con3">
            <div class="con3_demo1">
                <h2>推荐信息</h2>
            </div>
            <div class="con3_div1">
                <img src="../imgs/a2.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">产品</p>
                    <p style="color: #fff;margin-bottom: 4px;font-size: 21px;font-weight: 600;">HUAWEI WATCH 4</p>
                    <p style="color: #fff;">智慧旗舰 健康领航</p>
                </div>
            </div>
            <div class="con3_div2">
                <img src="../imgs/a3.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">成功故事</p>
                    <p style="color: #fff;margin-bottom: 4px;font-size: 21px;font-weight: 600;">"泰"省点，省时、又省心!</p>
                    <p style="color: #fff;">华为助力泰国PlanetComm打造绿色数据中心</p>
                </div>
            </div>
            <div class="con3_div3">
                <img src="../imgs/a4.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">趋势洞察</p>
                    <p style="color: #fff;margin-bottom: 1px;font-size: 21px;font-weight: 600;">孟晚舟：初心如磐，奋楫笃行，共</p>
                    <p style="color: #fff;margin-bottom: 0px;font-size: 21px;font-weight: 600;">赢数字化未来</p>
                </div>
            </div>
            <div class="con3_div4">
                <img src="../imgs/a5.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">创新技术</p>
                    <p style="color: #fff;margin-bottom: 4px;font-size: 21px;font-weight: 600;">一切皆服务，共建智能世界云底座</p>
                    <p style="color: #fff;">到2025年全球新数字项目中采用云原生平台比例大于95%</p>
                </div>
            </div>
            <div class="con3_div5">
                <img src="../imgs/a6.jpg" alt="">
                <div class="con3_div1demo" style="top: -124px;">
                    <p style="color: #fff;margin-bottom: 4px;">热点话题</p>
                    <p style="color: #fff;width: 340px;;margin-bottom: 4px;font-size: 21px;font-weight: 600;">
                        跃升数字生产力，加速迈向智能世界</p>
                    <p style="color: #fff;width: 340px;;">以数字技术为代表的先进技术,正在驱动生产力从“量变到质变”，实现跨越式发展</p>
                </div>
            </div>
            <div class="con3_div6">
                <img src="../imgs/a7.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">解决方案</p>
                    <p style="color: #fff;margin-bottom: 4px;font-size: 21px;font-weight: 600;">容器存储解决方案</p>
                    <p style="color: #fff;">高性能 易运维</p>
                </div>
            </div>
            <div class="con3_div7">
                <img src="../imgs/a8.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">前沿探索</p>
                    <p style="color: #fff;margin-bottom: 1px;font-size: 21px;font-weight: 600;">华为周红：建设智能世界的假设与</p>
                    <p style="color: #fff;margin-bottom: 0px;font-size: 21px;font-weight: 600;">愿景</p>
                </div>
            </div>
        </div>

3、尾部信息

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

四、总结

  这个网页还是相对简单的，花费一定的时间是可以完成，完成这种作品的过程中切勿急躁，正在学习的小伙伴们在此送你们一句话：“思无邪僻是一药，行宽心和是一药，心平气和是一药，心静意定是一药”。

五、源码+图片素材

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

有你真好...
关注
  • 5
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
HTML5+CSS3
Sweat_candy的博客
04-04 673
HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”> </div> <
华为商城主页面/html/web前端
05-29
简单的div和css写的华为商城主页面 部分页面切换写的一般 有些细节处理的不是太好
HTML+CSS+JS模仿华为商城首页
06-12
轮播图： （1）页面搭建 （2）轮播控制（用透明度样式显示图片） （3）自动轮播（定时器） （4）点点点，指示器展示 （5）改变轮播方式，用位移translateX()滚动 （6）改变轮播方式，用位移translateX()无限滚动 商品列表： （1）页面搭建 （2）在JS从json获取数据用for循环展示商品列表（原生创建元素写法） （3）在JS从json获取数据用for循环展示商品列表（InnerHTML写法） （4）用户点击商品优惠关键词，商品过滤筛选展示 （5）用户点击商品排序关键词，商品按照关键词排序展示
HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)
最新发布
weixin_42283461的博客
05-13 2078
HTML静态网页成品作业(HTML+CSS)——华为商城网页(1个页面)
html和css写的华为商城首页静态网页，.zip
10-01
html和css写的华为商城首页静态网页，.zip
仿华为官网纯原生JS+Css编写，无jquery
07-30
仿华为官网,使用纯原生JS和Css编写网站，不使用JQuery等开源包
仿华为商城部分前端界面html+css+js
06-28
web前端商城网页项目
制作一个企业网站——html华为官网购物商城项目的设计与实现
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML5+CSS3实现华为官网（完整版）
m0_63512120的博客
05-31 5018
该网页只用到了html和css知识，文章末尾有项目完整源代码和图片素材供大家参考学习。 大家有任何问题都可以在评论区指出，我们互相学习哟！
网页开发之仿华为商城案例（内附压缩包下载链接）
weixin_47062907的博客
02-24 4259
大家好，我是崇志广勤。今天使用了HTML和CSS，模仿华为商城制作了一个静态的仿华为商城首页。希望大家不吝赐教，互相学习，共同进步！ 最终效果图： HTML部分的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
HTML5与CSS实现神途官网
LukaJQ的博客
06-26 701
使用HTML5与CSS实现神途官网
仿华为官方商城
02-27
基于mybatis框架，使用jsp作为页面，里面有我们自己的数据库
华为网站前端代码
09-29
华为网站前端代码，内部学习资料，欢迎下载学习爱
html+css1仿华为太空人表盘
02-11
【HTML+CSS1仿华为太空人表盘】项目是一个典型的前端网页开发实例，主要利用HTML结构和CSS样式来实现对华为太空人表盘的模拟。在这个项目中，开发者需要掌握和应用一系列HTML和CSS的核心技术。 首先，HTML...
HTML5+CSS3实现华为鸿蒙官网（课程设计完整版）
m0_63512120的博客
11-06 614
这是一个用HTML5+CSS3实现的一个华为鸿蒙官网。 文章结构相对简单，容易理解。适合学生当课程大作业使用！ 同时如果因要满足作业要求而需要修改内容的也可以联系我！ 下面是一些其他页面的作品，同样希望能给大家带来帮助！ 最重要的是！！！文章末尾附项目完整源代码！！！ HTML5+CSS3实现华为商城 HTML5+CSS3实现华为官网 HTML5+CSS3实现小米商城 HTML5+CSS3实现小米官网 HTML5+CSS3实现哔哩哔哩首页 HTML5+CSS3实现QQ注册页面话不多说直接进行项目展示，看是否
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
使用 HTML css JavaScript 设计华为官网的内容
06-09
使用HTML、CSS和JavaScript设计华为官网的内容需要考虑以下几个方面： 1. 网站结构设计 HTML是用于创建网页结构的语言，需要根据华为官网的功能和内容，设计出合适的网页结构来。例如，可以使用HTML5的语义化标签，如<header>、<nav>、<section>、<article>等，来划分网页结构，使其更加清晰、易于理解和维护。 2. 网页样式设计 CSS是用于设计网页样式的语言，可以通过CSS来设置网页的颜色、字体、布局等样式。在设计华为官网的样式时，需要考虑到网站的响应式设计，即在不同设备上都能够呈现出良好的用户体验。可以使用CSS框架如Bootstrap、Foundation等，来提高开发效率和样式的一致性。 3. 网页交互设计 JavaScript是用于实现网页交互的语言，可以通过JavaScript来实现网页的动态效果、响应用户操作等功能。在设计华为官网的交互时，需要考虑到用户体验和易用性，设计出简洁、直观、易于操作的交互设计。例如，可以使用JavaScript库如jQuery、React等，来实现网页的交互效果。 具体来说，可以实现以下内容： 1. 导航栏设计：使用HTML和CSS创建导航栏，使用JavaScript实现导航栏的下拉菜单动态效果。 2. 轮播图设计：使用HTML和CSS创建轮播图，使用JavaScript实现轮播图的自动播放和手动切换效果。 3. 产品展示设计：使用HTML和CSS创建产品展示页面，使用JavaScript实现产品展示的筛选和排序功能。 4. 用户登录和注册设计：使用HTML和CSS创建用户登录和注册页面，使用JavaScript实现用户信息的验证和提交功能。 5. 在线客服设计：使用HTML和CSS创建在线客服页面，使用JavaScript实现在线客服的即时聊天功能。 以上仅是华为官网内容设计的一部分，具体实现还需要根据具体需求进行调整和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有你真好...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值