家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<title>美丽中国</title>
</head>
<body>
<!-- 头部 -->
<div class="header">
<img src="./images/img-1.jpg">
</div>
<div class="article">
<h1 align="center" class="title">美丽中国</h1>
<h3>中国特色文化：</h3>
<div class="box">
<div>
<h5>中国书法</h5>
<p>
中国书法是一门古老的汉字的书写艺术，从甲骨文、石鼓文、金文（钟鼎文）演变而为大篆、小篆、隶书，至定型于东汉、魏、晋的草书、楷书、行书等，书法一直散发着艺术的魅力。汉字书法为汉族独创的表现艺术，被誉为：无言的诗，无行的舞；无图的画，无声的乐。汉字是中国书法中的重要因素，因为中国书法是在中国文化里产生、发展起来的，而汉字是中国文化的基本要素之一。以汉字为依托，是中国书法区别于其他种类书法的主要标志。
</p>
</div>
<div class="img" style="width: 30%;height: 200px;margin-left: 1%;">
<img src="./images/img-2.jpg">
</div>
</div>
<div class="box">
<div>
<h5>木版水印</h5>
<p>
木版水印（古代彩色版画印刷术）水印字画是中国传统特有的版画印刷技艺。它集绘画、雕刻和印刷为一体，根据水墨渗透原理显示笔触墨韵，既可用以创作体现自身特点的艺术作品，也可逼真地复制各类中国字画。木版水印字画在我国具有悠久的历史。远在唐代，单色木版印刷已经具有相当水平。明末以十竹斋为代表的“饾版”、“拱花”等套色叠印，表明技术有了更大的进步。由于这项技艺始终基于手工进行，所以中国纯粹作为非物质文化遗产予以继承和发展。
</p>
</div>
<div class="img" style="width: 40%;height: 400px;margin-left: 1%;">
<img src="./images/img-3.jpg">
</div>
</div>
<div class="box">
<div>
<h5>茶</h5>
<p>
茶，植物学名：Camellia sinensis (L.) O. Ktze.，灌木或小乔木，嫩枝无毛。叶革质，长圆形或椭圆形，先端钝或尖锐，基部楔形，上面发亮，下面无毛或初时有柔毛，边缘有锯齿，叶柄无毛。花白色，花柄有时稍长；萼片阔卵形至圆形，无毛，宿存；花瓣阔卵形，基部略连合，背面无毛，有时有短柔毛；子房密生白毛；花柱无毛。蒴果3球形或1-2球形，高1.1-1.5厘米，每球有种子1-2粒。花期10月至翌年2月。
</p>
<p>
野生种遍见于中国长江以南各省的山区，为小乔木状，叶片较大，常超过10厘米长，长期以来，经广泛栽培，毛被及叶型变化很大。茶叶可作饮品，含有多种有益成分，并有保健功效。
</p>
<p>
2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，茶在3类致癌物清单中。属于对人类致癌性可疑，尚无充分的人体或动物数据的物质类。
</p>
</div>
<div class="img" style="width: 40%;height: 400px;margin-left: 1%;">
<img src="./images/img-4.jpg">
</div>
</div>
<h3>创新中国：</h3>
<h5>1、蛟龙号载人潜水器</h5>
<p>
蛟龙号载人潜水器是一艘由中国自行设计、自主集成研制的载人潜水器。2010年5月至7月，蛟龙号载人潜水器在中国南海中进行了多次下潜任务，最大下潜深度达到了7020米。2012年6月，在马里亚纳海沟创造了下潜7062米的中国载人深潜纪录，也是世界同类作业型潜水器最大下潜深度纪录。
</p>
<div class="img" style="width: 50%;height: 300px;">
<img src="./images/img-5.jpg">
</div>
<h5>2、嫦娥四号登录月球背面</h5>
<p>
嫦娥四号，是中国探月工程二期发射的月球探测器，也是人类第一个着陆月球背面的探测器；实现了人类首次月球背面软着陆和巡视勘察，意义重大，影响深远 。
</p>
<div class="img" style="width: 50%;height: 300px;">
<img src="./images/img-6.jpg">
</div>
<h5>3、九章量子计算机</h5>
<p>
“九章”是中国科学技术大学潘建伟团队与中科院上海微系统所、国家并行计算机工程技术研究中心合作，成功构建76个光子的量子计算原型机，求解数学算法高斯玻色取样只需200秒。2020年12月4日，中国科学技术大学宣布该校潘建伟等人成功构建76个光子的量子计算原型机“九章”。
</p>
<div class="img" style="width: 50%;height: 300px;">
<img src="./images/img-7.jpg">
</div>
<h5>4、国产和谐号高速动车组</h5>
<p>
和谐号电力动车组是2004年中国引进德国、日本等国的高速动车组技术，在消化吸收再创新的基础上，生产的高速动车组系列的总称，是中国铁路全面实施自主创新战略取得的重大成果，标志着中国铁路客运装备的技术水平达到了世界先进水平。
</p>
<div class="img" style="width: 50%;height: 300px;">
<img src="./images/img-8.jpg">
</div>
<h3>绿色中国：</h3>
<div class="box">
<div class="img" style="width: 50%;height: 500px;margin-right: 1%;">
<img src="./images/img-9.jpg">
</div>
<div>
<p>
“中国绿”，源自先进的生态文明思想和绿色发展理念。中华民族向来尊重自然、热爱自然，中华文明孕育着丰富的生态文化。生态兴则文明兴，生态衰则文明衰。新时代中国大力推进生态文明建设，努力建设美丽中国，实现中华民族永续发展。在辽阔的中国大地上，“绿水青山就是金山银山”“像保护眼睛一样保护生态环境，像对待生命一样对待生态环境”等凝聚起广泛共识。如今，“绿色发展”“生态文明”等理念和词汇已被纳入联合国文件。
</p>
<p>
“中国绿”，源自集中力量办大事的制度优势。随着中国不断推进生态文明顶层设计和制度体系建设，自上而下的决心和智慧正不断拓宽绿色发展之路。研究数据显示，过去17年，中国新增绿色面积的42%来自植树造林，32%来自农业。美国芝加哥大学能源政策研究所去年发表报告指出，2013年至2017年短短4年间，中国治理空气污染取得的进步“不管从哪种标准说都相当卓越”，而美国完成同样的任务用了数十年。联合国官员更是盛赞中国生态环境改善的速度是“人类历史上最快的”。快的背后，是中国的绿色动员能力和执行能力。
</p>
</div>
</div>
<div class="box">
<div class="img" style="width: 50%;height: 450px;margin-right: 1%;">
<img src="./images/img-10.jpg">
</div>
<div>
<p>
“中国绿”，源自深度参与全球环境治理的大国担当。同世界各国深入开展生态文明领域的交流合作，携手共建生态良好的地球美好家园，这是中国一以贯之的追求，也是构建人类命运共同体的应有之义。推动气候变化《巴黎协定》的达成、生效与实施，出资200亿元人民币设立气候变化南南合作基金，为太平洋岛国应对气候变化提供支持，建立“一带一路”绿色发展国际联盟，将绿色发展合作计划纳入中非“十大合作计划”“八大行动”。
</p>
<h5>建设成果</h5>
<p>
2019年2月，美国航天局在社交媒体发文：“世界比20年前更绿了！”美国航天局卫星在2000年至2017年间收集的数据显示，全球绿化面积增加了5%，相当于多出一个亚马孙热带雨林。其中，仅中国的植被增加量，就占到过去17年里全球植被总增量的25%以上，位居全球首位。
</p>
</div>
</div>
</div>
<div class="footer">
<marquee>Copyright © 2022 xxx All rights reserved.</marquee>
</div>
</body>
</html>
2.CSS样式代码 🏠
* {
margin: 0;
padding: 0;
}
body{
background-image: url("../images/bj.png");
}
img{
object-fit: cover;
object-position: center;
}
/* 头部 */
.header{
width: 1100px;
box-sizing: border-box;
margin: 0 auto;
height: 400px;
box-shadow: 0 0 10px #ee9c0e;
}
.header img{
width: 100%;
height:100%;
}
/* 文章 */
.article{
background-color: #fff;
width: 1100px;
box-sizing: border-box;
margin: 0 auto;
box-shadow: 0 0 10px #ee9c0e;
padding: 20px 15px 10px 15px;
}
.article .title{
border-bottom: 2px dashed rgb(221, 106, 106);
padding-bottom: 10px;
}
.article h3{
margin-top: 5px;
}
.article h5{
margin-top: 3px;
font-size: 16px;
}
.article p{
text-indent: 2rem;
line-height: 2;
margin-bottom: 15px;
}
.box{
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 10px;
}
.box .img{
flex-shrink: 0;
}
.img img{
width: 100%;
height:100%;
}
/* 底部 */
.footer{
width: 100%;
background-color: brown;
color: white;
}
.footer marquee{
height: 50px;
line-height: 54px;
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
