五分钟教你如何制作学生期末网页作业(web前端期末大作业)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

D22JP-我的家乡-郑州美景HTML+CSS(5页)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"> 
	<title>家乡简介title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
<body>
<div>
	<audio src="media/1.mp3" autoplay="">audio>
	<div class="banner">
    	<img src="images/4a8a641594a443688149db220deebd61.jpeg">
    div>
    <div class="gundong">
        <marquee><p>欢迎观赏郑州美景p>marquee>
    div>
    <div class="nav">
    	<a href="index.html">郑州简介a>
        <a href="meishi.html">特色美食a>
        <a href="zhaopian.html">美景照片a>
        <a href="fengjing.html">景点介绍a>
        <a href="shipin.html">美景郑州a>
    div>
    <div class="main">
        <div class="cont">         
              <p>
              	 郑州市，简称“郑”，是河南省会，地处华北平原南部，河南省中部偏北，黄河下游。 北临黄河，西依嵩山，东南为广阔的黄淮平原。郑州在3600年前，成为中国商代早期和中期都城，是商文明的发源地。全市各类文物古迹达10000余处，其中国家级重点文物保护单位38处43项。包括登封“天地之中”历史建筑群、黄帝故里、商城遗址等历史名胜。郑州地处中国地理中心，是全国重要的铁路、航空、高速公路、电力、邮政电信主枢纽城市，中国中部地区重要的工业城市。目前有汽车、装备制造、煤电铝、食品、纺织服装、电子信息等六大优势产业。郑州历史上曾五次为都 ，拥有不可移动文物近万处，其中世界文化遗产2处 ，全国重点文物保护单位74处80项 。 
              p>
              <p>
              	郑州市位于秦岭东段余脉、中国第二级地貌台阶与第三级地貌台阶的交接过渡地带。总的地势为西南高、东北低，呈阶梯状下降，由西部、西南部构造侵蚀中低山，逐渐下降过渡为构造剥蚀丘陵、黄土丘陵、倾斜（岗）平原和冲积平原，形成较为完整的地貌序列。
              p>
              <p>郑州市属北温带大陆性季风气候，冷暖气团交替频繁，春夏秋冬四季分明。冬季漫长而干冷，雨雪稀少；春季干燥少雨多春旱，冷暖多变大风多；夏季比较炎热，降水高度集中；秋季气候凉爽，时间短促。p>
              <p>郑州是华夏文明的重要发祥地、国家历史文化名城 、国家重点支持的六个大遗址片区之一、中国八大古都之一、世界历史都市联盟成员 。 p>
              <img src="images/CBD玉米楼.jpeg">
              <img src="images/下载 (1).jfif">
        div>
    div>
    <div class="foot">
    	<p>家乡美食美景介绍p>
    div>
body>
html>

🏠CSS样式代码

@charset "utf-8";
*
{
	margin:0;
	padding:0;
}
body
{
	font-size:14px;
	color:#6e6e6e;
	background: url(../images/bj.jpg) top center fixed;}
a,a:link,a:visited
{
	color:#7f0d0d;
	text-decoration:none; 
}
a:hover
{
	text-decoration: underline;
}
.banner{
	width:980px;
	margin:auto;
}
.banner img
{
	width:100%;
}
.gundong{
	width:980px;
	height:50px;
	line-height:50px;
	background:#dd9137;
	margin:auto;
	margin-bottom:10px;
	text-align:center;
	font-size:28px;
	color:#ffffff;
}
.nav{
	width:980px; 
	height:60px;
	line-height:60px;
	background-color:#CCCCCC; 
	margin:10px auto; 
	text-align:center; 
}
.nav a{ 
	font-size:24px; 
	margin:10px;
}
.nav a:hover{ 
	color:#F00; 
	text-decoration:none;
}
.main{
	width:980px; 
	height:auto; 
	background:#ffffff; 
	margin:auto;
	padding-top:50px;
	padding-bottom:50px;
}
.main .cont{
	width:800px;
	margin:auto;
}
.main .cont p{
	padding:10px;
	font-size:16px;
	color:333;
	text-indent:32px;
	line-height:28px;
}
.main .cont img{
	width:750px;
	height:500px;
}
.main video{
	display:block;
	margin:auto;
}
.foot{
	width:980px;
	height:50px;
	line-height:50px;
	background:#fff;
	margin:auto;
	text-align:center;
	margin-top:30px;
	font-size:20px;
	color:#000;
}

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

相关阅读:
Docker 学习笔记总结(三)
Linux系统编程 102 alarm函数
 RestTemplate的GET多参数请求转发
 js异步与同步
 IPV4流媒体C语言项目
 前端JS基础第一篇：执行上下文与执行栈
 Regular surface in Rn and Inverse image of a regular value
基于AT89C51流水花样灯proteus仿真设计
 通俗讲跨域
 【Java】B站课程《基于分布式架构项目实战》学习总结
原文地址：https://blog.csdn.net/qq_38514421/article/details/127117034