个人设计web前端大作业——HTML+CSS华为官网首页

IT黑马程序员

于 2022-11-20 10:28:57 发布

阅读量6.2k

点赞数 4

本文链接：https://blog.csdn.net/qq_38513433/article/details/127946024

版权

学生网页设计作业专栏收录该内容

1773 篇文章 114 订阅

订阅专栏

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/1.css">
</head>

<body>
    <div class="nav-top hidden-sm hidden-xs">
        <div class="nav-height">
            <div class="container">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            集团网站
                            <i></i>
                        </a>
                    </li>
                    <li>
                        <span class="xu">
                            <a href="javascript:;">
                                <i></i>
                                选择区域/语言
                                <i></i>
                            </a>
                        </span>
                        <span>
                            <i></i>
                            登录
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container one">
            <ul class="row">
                <li class="col-md-3">
                    <h3>集团网站</h3>
                    <p>公司信息，社会责任，新闻，展会活动，行业洞察等等</p>
                </li>
                <li class="col-md-3">
                    <h3><a href="javascript:;">个人用户<i></i></a></h3>
                    <p><a href="javascript:;">手机，PC和平板，穿戴设备等个人及家用产品</a></p>
                </li>
                <li class="col-md-3">
                    <h3><a href="javascript:;">企业用户<i></i></a></h3>
                    <p><a href="javascript:;">企业商用产品、解决方案和云服务</a></p>
                </li>
                <li class="col-md-3">
                    <h3><a href="javascript:;">运营商用户<i></i></a></h3>
                    <p><a href="javascript:;">运营商网络解决方案、产品及服务</a></p>
                </li>
            </ul>
        </div>
        <div class="container two">
            <div class="world">
                <i></i>
                <span>Huawei Global - </span>
                <a href="javascript:;">English</a>
            </div>
            <ul class="clearfix">
                <li><span>Australia - </span><a href="javascript:;">English</a></li>
                <li><span>Belarus - </span><a href="javascript:;">Pусский</a></li>
                <li><span>Brazil - </span><a href="javascript:;">Portuguese</a></li>
                <li><span>Canada - </span><a href="javascript:;">English</a></li>
                <li><span>China - </span><a href="javascript:;">简体中文</a></li>
                <li><span>France - </span><a href="javascript:;">Français</a></li>
                <li><span>Germany - </span><a href="javascript:;">Deutsch</a></li>
                <li><span>Italy - </span><a href="javascript:;">Italiano</a></li>
                <li><span>Japan - </span><a href="javascript:;">日本語</a></li>
                <li><span>Kazakstan - </span><a href="javascript:;">русский</a></li>
                <li><span>Kenya - </span><a href="javascript:;">English</a></li>
                <li><span>Malaysia - </span><a href="javascript:;">English</a></li>
                <li><span>Mexico - </span><a href="javascript:;">Español</a></li>
                <li><span>Myanmar - </span><a href="javascript:;">ျမန္မာ</a></li>
                <li><span>New Zealand - </span><a href="javascript:;">English</a></li>
                <li><span>Russia - </span><a href="javascript:;">русский</a></li>
                <li><span>South Africa - </span><a href="javascript:;">English</a></li>
                <li><span>Spain - </span><a href="javascript:;">Español</a></li>
                <li><span>Switzerland - </span><a href="javascript:;">English</a></li>
                <li><span>Thailand - </span><a href="javascript:;">ภาษาไทย</a></li>
                <li><span>Turkey - </span><a href="javascript:;">Türkiye</a></li>
                <li><span>Ukraine - </span><a href="javascript:;">Українська</a></li>
                <li><span>United Kingdom - </span><a href="javascript:;">English</a></li>
                <li><span>United States - </span><a href="javascript:;">English</a></li>
                <li><span>Uzbekistan - </span><a href="javascript:;">русский</a></li>
                <li><span>Uzbekistan - </span><a href="javascript:;">O’zbek</a></li>
                <li><span>Vietnam - </span><a href="javascript:;">Tiếng Việt</a></li>
            </ul>
        </div>
    </div>
    <header>
        <div class="header-b">
            <div class="container">
                <div class="logo">
                    <a href="javascript:;">
                        <img src="picture/huawei_logo.png" alt="">
                    </a>
                </div>
                <div class="nav-con hidden-sm hidden-xs">
                    <ul class="clearfix">
                        <li>
                            <i></i>
                            <a href="javascript:;">
                                手机、笔记本&平板...
                                <i></i>
                            </a>
                            <div class="more-1"></div>
                        </li>
                        <li>
                            <i></i>
                            <a href="javascript:;">
                                解决方案&服务
                                <i></i>
                            </a>
                            <div class="more-1"></div>
                        </li>
                    </ul>
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;">
                                华为商城
                                <span>
                                    <i></i>
                                    <i></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                华为云
                                <span>
                                    <i></i>
                                    <i></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="search-btn">
                    <i></i>
                </div>
                <div class="search-box">
                    <div class="search-input">
                        <input type="text" placeholder="搜索">
                        <i></i>
                    </div>
                    <div class="close">
                        <i></i>
                    </div>
                </div>
                <div class="more hidden-lg hidden-md">
                    <div class="t">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="c">
                        <i></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-con-more hidden-sm hidden-xs">
            <div class="b-top">
                <div></div>
                <span class="active">企业用户</span>
                <span>运营商用户</span>
                <span>华为云服务</span>
            </div>
            <div class="l-bg"></div>
            <div class="container">
                <div class="a clearfix">
                    <div class="a-l">
                        <div class="img">
                            <img src="picture/nav_mate30pro_cn.jpg" alt="">
                            <p>了解更多<i></i></p>
                        </div>
                        <ul class="col-lg-6">
                            <li class="col-md-3">
                                <p><i></i></p>
                                <span>手机<i></i><i></i></span>
                            </li>
                            <li class="col-md-3">
                                <p><i></i></p>
                                <span>笔记本<i></i><i></i></span>
                            </li>
                            <li class="col-md-3">
                                <p><i></i></p>
                                <span>平板<i></i><i></i></span>
                            </li>
                
                    <dd><a href="javascript:;">招聘</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">开发者</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">合作伙伴</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">产品定义社区</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">供应商平台</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">除名查询</a></dd>
                </dl>
                <dl class="clearfix">
                    <dt><h3>相关网站</h3></dt>
                    <dd><a href="javascript:;">华为商城</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">华为云</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">华为智能光伏</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">华为心声社区</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">华为海洋</a><span><i></i><i></i></span></dd>
                    <dd><a href="javascript:;">荣耀官网</a><span><i></i><i></i></span></dd>
                </dl>
            </div>
        </div>
    </div>
    <footer class="clearfix">
        <div class="col-sm-6 top">
            ©2020 华为技术有限公司
            <a href="javascript:;">粤A2-20044005号</a>
            <a href="javascript:;">粤公网安备 44030702002388号</a>
        </div>
        <div class="col-md-6 bttom">
            <a href="javascript:;">联系我们</a>
            <i class="hidden-sm">|</i>
            <a href="javascript:;">法律声明</a>
            <i class="hidden-sm">|</i>
            <a href="javascript:;">隐私政策</a>
        </div>
    </footer>
   
</body>

</html>

2.CSS样式代码 🏠



* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    /* overflow-x: hidden; */
}

body {
    min-width: 301px;
    overflow:-Scroll;
    overflow-x:hidden
}
i {
    font-style: normal;
    font-family: iconfont;
}

li {
    list-style: none;
}

a {
    text-decoration: none !important;
    color: black;
}

ul {
    margin: 0;
}

span i:nth-child(2) {
    position: absolute;
    transform: rotate(45deg);
    top: -18px;
    right: -5px;
    transition: all 0.3s;
}

.nav-top {
    position: relative;
    z-index: 10;
}

.nav-height {
    width: 100%;
    background-color: black;
    color: white;
}

.nav-top .nav-height li {
    float: left;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
}

.nav-height li:nth-child(2) {
    float: right;
}

.nav-height .clearfix li a {
    color: white;
}

.nav-height li i {
    display: inline-block;
    margin: 0 5px;
    transform: rotate(0);
    height: 13.6px;
    line-height: 13.6px;
}

.nav-height li:nth-child(2) span i {
    position: static;
}

.nav-height li:nth-child(2) span:nth-child(2) {
    display: inline-block;
    height: 30px;
    padding-left: 5px;
    border-left: 1px solid white;
}

.nav-height li:nth-child(2) span:nth-child(2) i {
    transform: rotate(0);
}

.nav-top .one {
    display: none;
}

.nav-top .one .row {
    font-size: 14px;
    padding: 25px 0;
}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

IT黑马程序员

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
个人设计web前端大作业——HTML+CSS华为官网首页

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫