HTML5+CSS3实现华为鸿蒙官网(课程设计完整版)

news2024/11/28 20:34:33

前言

这是一个用HTML5+CSS3实现的一个华为鸿蒙官网。
文章结构相对简单,容易理解。适合学生当课程大作业使用!
同时如果因要满足作业要求而需要修改内容的也可以联系我!
下面是一些其他页面的作品,同样希望能给大家带来帮助!
最重要的是!!!文章末尾附项目完整源代码!!!
HTML5+CSS3实现华为商城
HTML5+CSS3实现华为官网
HTML5+CSS3实现小米商城
HTML5+CSS3实现小米官网
HTML5+CSS3实现哔哩哔哩首页
HTML5+CSS3实现QQ注册页面

话不多说直接进行项目展示,看是否符合你的要求!!!

一、效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、部分代码展示

因为篇幅受限,所以这里仅展示部分代码,完整源代码在文章末尾提取!!!


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="work.css">
</head>

<body>
    <div class="head1">
        <div class="head1_1">
            <a href="">注册</a>
            <a href="">登录</a>
            <a href="">简体中文</a>
        </div>
    </div>

    <div class="container">
        <div class="con1">
            <div class="a1">
                <a href="#"><img src="imgs/harmonyOS_logo.png" alt=""
                        style="float: left; height: 20px;width: 93px; margin-top: 35px;"></a>
            </div>
            <div class="a2">
                <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="a3">
                <input type="search" placeholder="请输入关键词"
                    style="float: right; height: 40px; width: 200px; border-radius: 20px; margin-top: 22px;">
            </div>

        </div>

        <div class="con2">
            <div class="head3_lunbo">
                <!-- 引入轮播图图片 -->
                <a href="#" target="_blank"><img src="./imgs/a1.jpg" /></a>
                <a href="#" target="_blank"><img src="./imgs/a2.jpg" /></a>
                <a href="#" target="_blank"><img src="./imgs/a3.jpg" /></a>
            </div>
        </div>

        <div class="con3">
            <div class="a4" style="height: 560px;width: 800px;float: left;">
                <div class="b1" style="margin-left: 300px;margin-top: 100px;">
                    <span style="color: #000000; font-size: 48px;">鸿蒙开发套件</span>
                </div>
                <div class="b2" style="margin-left: 300px;margin-top: 50px;">
                    <span>面向鸿蒙生态的声明式开发套件,包含了鸿蒙生态应用从设</span><br>
                    <span>计、开发、测试、上架所需的关键技术和产品。(鸿蒙指华</span><br>
                    <span>为终端鸿蒙智能设备操作系统软件)</span>
                </div>
                <div class="b3" style="margin-left: 300px;margin-top: 50px;">
                    <button style="height: 48px;width: 120px;background-color: black;border-radius: 24px;">
                        <a href="#" style="color: #fff;text-align: center;text-decoration: none;">了解更多</a>
                    </button>
                </div>

            </div>
            <div class="a5" style="float: left;">
                <img src="imgs/a4.png" alt="" style="height: 560px;width: 560px;">
            </div>

        </div>

        <!-- <div class="con4">

        </div> -->

        <div class="con5">
            <div class="con5_1">
                <h2 style="width: 1280px;height: 64px;margin-bottom: 32px;">
                    <span
                        style="font-size: 48px;color: #000000;line-height: 64px; word-break: break-word;font-weight: 500;">HarmonyOS让你的应用自由跨端</span>
                </h2>
                <p style="font-size: 20px;color: rgba(0, 0, 0, 0.8);letter-spacing: 0;width: 1172px;">
                    HarmonyOS原子化服务是轻量化服务的新物种,它提供了全新的服务和交互方式,可分可合,可流转,支持免安装等特性,能够让应用化繁为简,让服务触手可及。</p>
            </div>
            <div class="con5_2">
                <img src="./imgs/a5.gif" alt="">
            </div>
        </div>

        <div class="con6">
            <div class="con5_1">
                <h2 style="width: 1280px;height: 64px;margin-bottom: 32px;">
                    <span
                        style="font-size: 48px;color: #000000;line-height: 64px; word-break: break-word;font-weight: 500;">HarmonyOS
                        用“简单”激活你的设备智能</span>
                </h2>
                <p style="font-size: 20px;color: rgba(0, 0, 0, 0.8);letter-spacing: 0;width: 1172px;">
                    HarmonyOS是新一代智能终端操作系统。为不同设备的智能化、互联与协同提供了统一的语言。设备可实现一碰入网,无屏变有屏,操作可视化,一键直达原厂服务等全新功能。通过简单而智能的服务,实现设备智能化产业升级。
                </p>
            </div>
            <div class="con5_2">
                <img src="./imgs/a6.gif" alt="">
            </div>
        </div>

        <div class="con7">
            <div class="con5_1" style="height: 95px;">
                <h2 style="width: 1280px;height: 64px;margin-bottom: 45px;">
                    <span
                        style="font-size: 48px;color: #000000;line-height: 64px; word-break: break-word;font-weight: 500;">加入生态</span>
                </h2>
                <div class="con7_1">
                    <img src="./imgs/c1.png" alt="">
                    <h3>应用开发</h3>
                    <p>支持轻松调用设备组合中的不同硬件能力、支持多设备无缝协同,为应用开发者带来丰富的体验想象空间。</p>
                </div>
                <div class="con7_1">
                    <img src="./imgs/c2.png" alt="">
                    <h3>设备开发</h3>
                    <p>提供灵活可定制的开源操作系统,满足不同设备开发需求;设备接入后,可与华为1+8设备形成天然的分布式能力互助,高效触达亿级用户。</p>
                </div>
                <div class="con7_1">
                    <img src="./imgs/c3.png" alt="">
                    <h3>设备合作伙伴</h3>
                    <p>加入合作计划,成为HarmonyOS Connect品牌合作伙伴、解决方案伙伴、芯片与模组伙伴等。</p>
                </div>

            </div>
        </div>
    </div>

    <div class="end">
        <div class="y1">
            <div class="y2" style="height: 339px;width: 1285px;">
                <div class="y5">
                    <h4>关于我们</h4>
                    <ul>
                        <li>
                            <a href="#">华为公司简介</a>
                        </li>
                        <li>
                            <a href="#">华为消费者业务介绍</a>
                        </li>

                    </ul>
                </div>
                <div class="y6">
                    <h4>应用开发</h4>
                    <ul>
                        <li>
                            <a href="#">应用开发首页</a>
                        </li>
                        <li>
                            <a href="#">HamonyOS SDK</a>
                        </li>
                        <li>
                            <a href="#">DevEco Studio</a>
                        </li>
                        <li>
                            <a href="#">DevEco Service</a>
                        </li>
                        <li>
                            <a href="#">ArkUl</a>
                        </li>

                    </ul>
                </div>
                <div class="y7">
                    <h4>设备开发</h4>
                    <ul>
                        <li>
                            <a href="#">设备开发首页</a>
                        </li>
                        <li>
                            <a href="#">HarmonyOS Connect 解决方案</a>
                        </li>
                        <li>
                            <a href="#">DevEco Device Tool</a>
                        </li>
                        <li>
                            <a href="#">DevEco Service</a>
                        </li>

                    </ul>
                </div>
                <div class="y8">
                    <h4>生态合作</h4>
                    <ul>
                        <li>
                            <a href="#">原子化服务生态</a>
                        </li>
                        <li>
                            <a href="#">HarmonyOS Connect 生态</a>
                        </li>
                        <li>
                            <a href="#">行业解决方案生态</a>
                        </li>

                    </ul>
                </div>
                <div class="y9">
                    <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="y10">
                    <h4>友情链接</h4>
                    <ul>
                        <li>
                            <a href="#">华为消费者业务官网</a>
                        </li>
                        <li>
                            <a href="#">华为消费者业务官网</a>
                        </li>

                    </ul>
                </div>

            </div>
            <div class="y3" style="height: 85px;width: 1285px;border-bottom: 1px solid #DCDCDC;">
                <div class="y11">
                    <div class="y13"
                        style="height: 40px;width: 150px; border:1px solid #C4C4C4 ;border-radius: 6px; margin-top: 25px;margin-left: 20px;">
                        <span style="text-align: center;line-height: 40px;margin-top: 30px; font-size: 14px;">
                            Global-简体中文</span>


                    </div>

                </div>
                <div class="y12" style="position: relative;">
                    <div style="margin-top: 38px; display: inline-block;">关注VMALL:</div>
                    <a href="#" class="z1"><img src="imgs/icon-weixin-normal.png" alt=""
                            style="position: absolute;top: 35px;left: 100px;"></a>
                    <a href="#" class="z2"><img src="imgs/icon-xinxi-normal.png" alt=""
                            style="position: absolute;top: 35px;left: 140px;"></a>
                </div>

            </div>
            <div class="y4" style="height: 80px;width: 1285px;">
                <div style="float: left; height: 80px;width: 385px;font-size: 14px;color: #B0B1B0;margin-top: 35px;">
                    HarmonyOS网站版权所有@2022-2023</div>
                <div style="float: left;height: 85px;width: 900px;">
                    <ul>
                        <li>
                            <a href="#">网站地图</a>
                        </li>
                        <li>
                            <a href="#">│粤ICP备19015064号</a>
                        </li>
                        <li>
                            <a href="#">│粤公网安备44190002005719号</a>
                        </li>
                        <li>
                            <a href="#">│使用条款</a>
                        </li>
                        <li>
                            <a href="#">│关于HarmonyOS网站与隐私的声明</a>
                        </li>
                        <li>
                            <a href="#">│ cookies</a>
                        </li>
                        <li>
                            <a href="#">│开源软件声明</a>
                        </li>
                    </ul>
                </div>


            </div>

        </div>

    </div>
</body>

</html>

/* 结尾 */
.laster {
    width: 1518px;
    height: 580px;
    background-color: #ffffff;
    /* background-color: purple; */
}

.laster1 {
    width: 1226px;
    height: 580px;
    background-color: #ffffff;
    margin-left: 146px;
    margin-right: 146px;
}



@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?nwr8m8');
    src: url('fonts/icomoon.eot?nwr8m8#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?nwr8m8') format('truetype'), url('fonts/icomoon.woff?nwr8m8') format('woff'), url('fonts/icomoon.svg?nwr8m8#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.box2 .x2 .x3 .y10 span {
    font-family: 'icomoon';
    font-size: 16px;
    color: pink
}

.all {
    width: 1200px;
    /* height: 200px; */
    margin: 0 auto;
}

li {
    list-style: none;
}

.last .box1 {
    height: 100px;
    background-color: #FFFFFF;
    /* background-color: pink; */
    border-bottom: 1px solid #F2F2F2;
}

.last .box1 ul li {
    display: inline-block;
    margin: 40px 81px;
}

.last .box1 ul li a {
    font-size: 16px;
    color: #000000;
    text-align: center;
    text-decoration: none;
}

.last .box2 {
    height: 312px;
    background-color: #FFFFFF;
    /* background-color: pink; */
    border-bottom: 1px solid #F2F2F2;
}

.last .box2 .x1 {
    float: left;
    height: 312px;
    width: 960px;
    /* background-color: skyblue; */
    background-color: #FFFFFF;
}

.last .box2 .x2 {
    float: right;
    height: 312px;
    width: 239px;
    /* background-color: blue; */
    background-color: #FFFFFF;
}

.last .box2 .x1 div {
    float: left;
    width: 160px;
    height: 312px;
    /* background-color: greenyellow; */
    background-color: #FFFFFF;
}

.last .box2 .x1 h4 {
    margin-top: 53px;
    margin-left: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.last .box2 .x1 ul {
    margin-top: 29px;
}

.last .box2 .x1 ul li {
    margin-top: 6px;
}

.last .box2 .x1 ul li a {
    /* margin-top: 20px; */
    margin-left: 10px;
    color: #7F7F7F;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.last .box2 .x1 ul li a:hover {
    color: #CF0A2C;
}

.last .box2 .x3 {
    height: 170px;
    border-left: 1px solid #F2F2F2;
}

.last .box2 .x3 .y7 {
    text-align: center;
    color: #000;
    font-size: 22px;
    margin-top: 55px;
}

.last .box2 .x3 .y8 {
    text-align: center;
    color: #000;
    font-size: 14px;
    margin-top: 3px;
}

.last .box2 .x3 .y9 {
    margin: 18px auto;
    height: 36px;
    width: 170px;
    background-color: #000;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    border-radius: 18px;
}

.last .box2 .x3 .y10 {
    /* text-align: center; */
    color: #000;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 20px;
}

.last .box4 {
    height: 150px;
    background-color: #FFFFFF;
}

.last .box4 .y11 {
    float: left;
    width: 110px;
    height: 150px;
    /* background-color: #000; */
}

.last .box4 .y12 {
    float: left;
    width: 980px;
    height: 150px;
    /* background-color: aqua; */
    background-color: #FFFFFF;
}

.last .box4 .y13 {
    float: right;
    width: 110px;
    height: 150px;
    /* background-color: bisque; */
}

.last .box4 .y12 .z1 ul li {
    /* height: 20px; */
    /* background-color: pink; */
    display: inline-block;
    margin-top: 22px;
    padding: 0 5px;
    /* border-left: 1px solid #F2F2F2; */
}

.last .box4 .y12 ul li a {
    text-decoration: none;
    color: #666666;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
}

.last .box4 .y12 ul li a:hover {
    color: #CF0A2C;
}

.last .box4 .y12 .z2 ul li {
    display: inline-block;
    margin-top: 2px;
    padding: 0 5px;
}

.last .box4 .y12 .z2 ul li a {
    font-size: 12px;
    color: #999999;
}

.last .box4 .y12 .z2 ul li a:hover {
    color: #CF0A2C;
}

.last .box4 .y12 .z3 ul li {
    display: inline-block;
    margin-top: 2px;
    padding: 0 5px;
}

.last .box4 .y12 .z3 ul li a {
    font-size: 12px;
    color: #999999;
}

.last .box4 .y12 .z3 ul li a:hover {
    color: #CF0A2C;
}

.last .box4 .y12 .z4 ul li {
    display: inline-block;
    margin-top: 2px;
    padding: 0 5px;
}

.last .box4 .y12 .z4 ul li a {
    font-size: 12px;
    color: #999999;
}

.last .box4 .y12 .z4 ul li a:hover {
    color: #CF0A2C;
}

三、项目文章源代码

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

四、总结

如果你在课程大作业上遇到任何问题均可联系我解决!
或者该文章有任何问题也可以联系我解决或者在文章末尾提出!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1176898.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android Studio(列表视图ListView)

前言 前面在适配器章节&#xff0c;已经介绍了ListView的作用(干什么的)&#xff0c;这节将主要介绍如何去设计ListView页面视图。 思考 列表视图需要些什么&#xff1f; 1. 列表项容器&#xff08;装载各列表项的容器&#xff09;&#xff1a;<ListView/> 2. 列表项布局…

淘宝平台API接口的接入参数及说明(附获取获得淘宝商品详情获得淘宝商品详情高级版获得淘宝商品评论获得淘宝商品快递费用获取获取买卖家的订单详情)

前言 在古代&#xff0c;我们的传输信息的方式有很多&#xff0c;比如写信、飞鸽传书&#xff0c;以及在战争中使用的烽烟&#xff0c;才有了著名的烽火戏诸侯&#xff0c;但这些方式传输信息的效率终究还是无法满足高速发展的社会需要。如今万物互联的时代&#xff0c;我通过…

UE5——源码阅读——7——引擎预初始化

创建一个性能计数器&#xff0c;用于统计引擎在初始化性能 加载核心模块 是否记录配置文件信息 是否记录Pak文件信息 记录配置文件和Pak文件 初始化渲染相关的变量 没有编辑器标记和命令行标记 拿到当前日志的指针 初始化Oodle(是4.27引入的压缩算法) 读取模块 加载…

如何释放React Hooks的力量

React是用于构建用户界面的一个流行JavaScript库&#xff0c;多年来已经发生了重大变化和改进。React中最具颠覆性的新特性之一就是引入了Hooks。React Hooks彻底改变了开发者在函数组件中管理状态和生命周期的方式。在这个全面的指南中&#xff0c;将深入研究React Hooks的世界…

小菜React

1、Unterminated regular expression literal, 对于函数就写.ts&#xff0c;有dom元素就写.tsx 2、 The requested module /src/components/setup.tsx?t1699255799463 does not provide an export named Father export default useStore默认导出的钩子&#xff0c;组件引入的…

2023年北京市安全员-C3证证模拟考试题库及北京市安全员-C3证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年北京市安全员-C3证证模拟考试题库及北京市安全员-C3证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;北京市安全员-C3证证模拟考试题库是根据北京市安全员-C3证最新版教材&#xff0c;北京市安全员-C…

入参mm²出现乱码情况

原因是因为编码时使用的是JS的unescape()函数 换成 JS的decodeURI&#xff08;&#xff09;函数即可

YoungGC 停顿超长时间调优

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

Python语言高级实战-内置函数super()的使用之类的单继承(附源码和实现效果)

实现功能 super()是一个内置函数&#xff0c;用于调用父类的方法。super() 是用来解决多重继承问题的&#xff0c;直接用类名调用父类方法在使用单继承的时候没问题&#xff0c;但是如果使用多继承&#xff0c;会涉及到查找顺序&#xff08;MRO&#xff09;、重复调用&#xf…

微服务架构——笔记(3)Eureka

微服务架构——笔记&#xff08;3&#xff09; 基于分布式的微服务架构 本次笔记为 此次项目的记录&#xff0c;便于整理思路&#xff0c;仅供参考&#xff0c;笔者也将会让程序更加完善 内容包括&#xff1a;1.支付模块、2.消费者订单模块、支付微服务入驻Eureka、Eureka集群…

解决SpringBoot项目端口被占用的问题

问题描述&#xff1a; 在Window环境下&#xff0c;运行SpringBoot 项目时&#xff0c;出现端口被占用的问题&#xff1a; 解决方案&#xff1a; 1. 查看对应端口的进程号 netstat -ano | findstr 80802. 查看对应进程号的信息 tasklist | findstr 477963. 根据进程号 kill 进程…

01-Spring中事务的实现之编程式事务和声明式事务,以及事务的属性之传播行为,隔离级别,事务的回滚

银行账户转账异常 需求: 实现act-001账户向act-002账户转账10000,要求两个账户的余额一个减成功一个加成功,即执行的两条update语句必须同时成功或失败 实现步骤 第一步: 引入项目所需要的依赖 <?xml version"1.0" encoding"UTF-8"?> <proj…

地址的层次性

地址的层次性 当地址总数并不是很多的情况下&#xff0c;有了唯一地址就可以定位相互通信的主体。然而当地址的总数越来越多时&#xff0c;如何高效地从中找出通信的目标地址将成为一个重要的问题。为此人们发现地址除了具有唯一性还需要具有层次性。其实&#xff0c;在使用电…

万宾科技智能井盖监测仪器助力建设数字化城市

市政公共设施建设在近几年来发展迅速&#xff0c;市政设备的更新换代&#xff0c;资产管理等也成为其中的重要一项。在市政设施建设过程中&#xff0c;井盖也是不可忽视的&#xff0c;一方面&#xff0c;根据传统的管理井盖模式来讲&#xff0c;缺乏有效的远程监控管理方法和手…

Spring基础(1):两个概念

最近看了点Spring的源码&#xff0c;于是来稍微扯一扯&#xff0c;希望能帮一部分培训班出身的朋友撕开一道口子&#xff0c;透透气。 广义上的Spring指的是Spring整个项目&#xff0c;包含SpringBoot、SpringCloud、SpringFramework、SpringData等等&#xff0c; 本系列文章…

linux三种软件安装方式

文章目录 前言一、安装jdk(使用rpm安装)二、Tomcat安装(解压缩方式)三、安装Docker(yum安装) 推荐四、其实我们也可以宝塔安装(傻瓜式一键安装) 前言 之前已经讲解了一些linux的基本使用&#xff0c;现在我们来配置java环境以及安装docker linux讲解链接 一、安装jdk(使用rpm安…

浏览器无图模式省流量经验

【备注】本文适合于那些用自购上网卡&#xff08;非单位报销&#xff09;、流量费花的心痛、平日里抠抠搜搜的diaosi人群&#xff01;流量自由人群请关闭退出&#xff01; 近日图年包流量费便宜&#xff0c;从某东平台上买了一个号称新款usb上网卡&#xff0c;只用了2天时间&a…

分享一下微信小程序里怎么添加社区团购功能

随着互联网的快速发展&#xff0c;线上购物已经成为我们日常生活的一部分。而在这个数字化时代&#xff0c;微信小程序作为一种便捷的电商渠道&#xff0c;正逐渐成为新的趋势。其中&#xff0c;社区团购功能更是受到广大用户的热烈欢迎。本文将探讨如何在微信小程序中添加社区…

【C/PTA】循环结构进阶练习(二)

本文结合PTA专项练习带领读者掌握循环结构&#xff0c;刷题为主注释为辅&#xff0c;在代码中理解思路&#xff0c;其它不做过多叙述。 7-1 二分法求多项式单根 二分法求函数根的原理为&#xff1a;如果连续函数f(x)在区间[a,b]的两个端点取值异号&#xff0c;即f(a)f(b)<0…

Python 多线程、多进程的详细使用教程

引言&#xff1a; 在现代计算机中&#xff0c;使用多线程和多进程可以充分利用多核处理器的优势&#xff0c;提高程序的性能和响应能力。Python作为一门简洁而强大的编程语言&#xff0c;提供了丰富的多线程和多进程管理工具。本教程将详细介绍Python中多线程和多进程的使用方…