本文分享了一位学生使用HTML5、CSS和JavaScript制作华为官网的期末大作业，包括网页基本结构、前端学习路线以及实战经验。讨论了HTML结构、CSS样式、JavaScript交互，并强调在实际工作中，学习内容与工作需求的关系。
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为-构筑万物互联的智能世界</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/top-nav.css">
<link rel="stylesheet" href="css/nav-con.css">
<link rel="stylesheet" href="css/slideshow.css">
<link rel="stylesheet" href="css/recommend.css">
<link rel="stylesheet" href="css/img-show.css">
<link rel="stylesheet" href="css/news-activity.css">
<link rel="stylesheet" href="css/link-btn.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/corner.css">
<link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650896299792/font-awesome/css/all.css">
<link rel="stylesheet" href="css/iconfont1.css">
<script src="js/top-nav.js"></script>
</head>
<body>
<!-- 上侧导航区域 -->
<div class="top-nav">
<!-- 最上面个导航栏 -->
<div class="top-bar">
<ul>
<li class="login">
<a href="login.html">
<i class="fas fa-user"></i>
登录
</a>
</li>
<li class="pull">
<i class="fas fa-globe"></i>
<span>选择区域/语言</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="pull">
<i class="fas fa-border-all"></i>
<span>集团网站</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
<!-- 集团网站下拉框 -->
<div class="net">
<ul class="brief">
<li class="title">
<i class="fas fa-chevron-right"></i>
<span>集团网站</span>
</li>
<li class="intro">
公司介绍、新闻动态、展会活动等信息
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
消费者业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
手机，PC和平板等智慧生活产品
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
企业业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
企业商用产品、解决方案和云服务
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
运营商网络业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
运营商网络解决方案、产品及服务
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
华为云网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
华为云服务及解决方案
</li>
</ul>
</div>
<!-- 语言区域下拉框 -->
<div class="region">
<h3>选择地区/语言</h3>
<ul class="first">
<li>
<span>
Australia -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
France -
<a href="javascript:;">Français</a>
</span>
</li>
<li>
<span>
Kenya -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Netherlands -
<a href="javascript:;">Dutch</a>
</span>
</li>
<li>
<span>
Thailand -
<a href="javascript:;">ภาษาไทย</a>
</span>
</li>
<li>
<span>
Uzbekistan -
<a href="javascript:;">русский</a>
</span>
</li>
</ul>
<ul>
<li>
<span>
Belarus -
<a href="javascript:;">Pусский</a>
</span>
</li>
<li>
<span>
Germany -
<a href="javascript:;">Deutsch</a>
</span>
</li>
<li>
<span>
Malaysia -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Russia -
<a href="javascript:;">русский</a>
</span>
</li>
<li>
<span>
Turkey -
<a href="javascript:;">Türkiye</a>
</span>
</li>
<li>
<span>
Uzbekistan -
<a href="javascript:;">O’zbek</a>
</span>
</li>
</ul>
<ul>
<li>
<span>
Brazil -
<a href="javascript:;">Portuguese</a>
</span>
</li>
<li>
<span>
Italy -
<a href="javascript:;">Italiano</a>
</span>
</li>
<li>
<span>
Mexico -
<a href="javascript:;">Español</a>
</span>
</li>
<li>
<span>
South Africa -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Ukraine -
<a href="javascript:;">Українська</a>
</span>
</li>
<li>
<span>
Vietnam -
<a href="javascript:;">Tiếng Việt</a>
</span>
</li>
</ul>
<ul>
<li>
<span>
Canada -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Japan -
<a href="javascript:;">日本語</a>
</span>
</li>
<li>
<span>
Myanmar -
<a href="javascript:;">ျမန္မာ</a>
</span>
</li>
<li>
<span>
Spain -
<a href="javascript:;">Español</a>
</span>
</li>
<li>
<span>
United Kingdom -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Global-
<a href="javascript:;">English</a>
</span>
</li>
</ul>
<ul>
<li>
<span class="zhong">
<i class="fas fa-angle-right"></i>
China -
<a href="javascript:;">简体中文</a>
</span>
</li>
<li>
<span>
Kazakstan -
<a href="javascript:;">русский</a>
</span>
</li>
<li>
<span>
New Zealand -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Switzerland -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
United States -
<a href="javascript:;">English</a>
</span>
</li>
</ul>
</div>
</div>
<!-- 导航栏 -->
<div class="nav-con">
<div class="nav">
<!-- 最左侧logo -->
<a href="">
<img src="picture/huawei_logo.png">
</a>
<!-- 中间选项卡 -->
<ul class="center">
<li class="product">
<span>个人及家庭产品</span>
<!-- 个人及家庭产品下拉框 -->
<div class="personal">
<div class=
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
