常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。
作品目录
一、📚网站介绍
二、🔗网站效果
🧩1.图片演示
三、💒网站代码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码)。
三、🔗网站效果
四、💒代码展示
代码说明：以下仅展示部分代码供参考~
🧱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">
<title>网站首页</title>
<link rel="stylesheet" href="css/index.css">
<style>
</style>
</head>
<body>
<div class="ak">
<div class="header">
<ul>
<li class="active">
<a href="index.html">网站首页</a>
</li>
<li>
<a href="index01.html">景点介绍</a>
</li>
<li>
<a href="index02.html">发展历史</a>
</li>
<li>
<a href="index03.html">自然资源</a>
</li>
<li>
<a href="index04.html">景点位置</a>
</li>
<li>
<a href="index05.html">内部景点</a>
</li>
<li>
<a href="index06.html">注意事项</a>
</li>
<li>
<a href="index07.html">用户点评</a>
</li>
<li>
<a href="index08.html">关于我们</a>
</li>
<li>
<a href="index09.html">联系我们</a>
</li>
<li>
<a href="index10.html">在线登陆</a>
</li>
<li>
<a href="index11.html">在线注册</a>
</li>
</ul>
</div>
<div class="nr">
<div class="banner">
<img src="./images/banner1.jpg" alt="">
</div>
<div class="ak_1">
<h1>景点简介</h1>
<p>冠头岭国家森林公园坐落于北海市区西端，是一处既有森林又有海蚀礁石群的景区，游客可以在礁石海滩漫步，欣赏日出日落美景。景区里的主峰望楼岭海拔120米，是北海市区至高点，登上山顶可远眺周边海岸风光。
</p>
<p>
冠头岭公园面积不大，景点也并不多，这里的海蚀礁石群是主要景观，漫步在海滩上，可看到大小不一的礁石，与冠头岭西麓那块被海水侵蚀而成的巨大陡壁形成错落有致的独特美景。礁石滩上有名的便是“海枯石烂”礁石龟，这是冠头岭的标志性景点，吸引着人们来留影。
</p>
<img src="./images/banner2.jpg" alt="">
<h1>发展历史</h1>
<p>冠头岭历史上为海防要塞，明洪武八年，为防海寇袭扰，创设炮台于主峰之侧，遗迹尚存。岭巅灯塔已增高，登山公路可直达岭巅。建国后，遍岭绿化，现今冠头岭已成为国家级森林公园。</p>
<p>1988年林业部批准建立冠头岭森林公园。1995年广西北海市规划局出具了森林公园用地范围图面积245.7公顷。森林公园以马尾松树种为主要建群树种,林地面积约3000亩。</p>
<img src="./images/banner3.jpg" alt="">
<h1>自然资源</h1>
<p>位于南澫镇西北数百米的山坡上，有一民办植物园，园址为国家冠头岭森林公园的一部分，现属初建阶段，自然植被以马尾松林为主，内有十片零星空地，山间洼地，半朝海半朝陆，北依海拔70米的山顶，为冠头岭国家森林公园的组成部分。植物园分为森林区、花木区、林果区和菜圃区。内有花草果木100多个品种。种植果木有龙眼、木菠萝、杨桃、黄皮果等。饲养有鹦鹉、八哥、珊瑚鸟、百灵鸟等十多种鸟类。正规划建成望海亭、花果山、水濂洞、长江、黄河、小石林、小水库等微缩各地名胜景观，并规划扩展至80亩。该植物园始建成于1994年。</p>
<img src="./images/banner4.jpg" alt="">
</div>
<div class="ak_2">
<div class="ak_2_1">
<img src="./images/yo1.jpeg" alt="">
</div>
<div class="ak_2_2">
<img src="./images/yo2.jpeg" alt="">
<img src="./images/yo3.jpeg" alt="">
</div>
</div>
<div class="ak_3">
<img src="./images/banner.jpg" alt="">
</div>
</div>
<div class="footer">
<span>深巷积木青春 © 版权所有</span>
</div>
</div>
</body>
</html>🏠CSS样式部分代码
* {
margin: 0;
padding: 0;
}
body {
background-color: #1c98b0;
}
.ak {
width: 1200px;
margin: 0 auto;
}
.header {
width: 100%;
height: 60px;
}
.header ul {
padding: 0;
margin: 0;
}
.header ul li {
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
list-style: none;
}
.header ul li a {
color: white;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
.header ul li.active a {
color: #1c98b0;
padding: 8px;
font-weight: bold;
border-radius: 15px;
background-color: white;
}
.header ul li:hover a {
color: #1c98b0;
padding: 8px;
font-weight: bold;
border-radius: 15px;
background-color: white;
}
.nr {
width: 100%;
height: 4800px;
/* margin-bottom: 20px; */
border-radius: 15px;
padding: 30px;
box-sizing: border-box;
background-color: white;
}
.banner img {
width: 100%;
}
h1 {
font-size: 24px;
color: #1c98b0;
margin: 20px 0;
}
.ak_1 p {
color: #666;
text-indent: 2em;
line-height: 30px;
}
.ak img {
width: 100%;
margin: 10px 0;
}
.ak_2 {
margin: 30px 0;
}
.ak_2_1 {
float: left;
width: 770px;
}
.ak_2_1 img {
width: 760px;
height: 454px;
margin: 0;
}
.ak_2_2 {
float: left;
width: 370px;
}
.ak_2_2 img {
float: left;
width: 100%;
margin: 0;
margin-bottom: 10px;
}
.ak_3 img {
width: 100%;
margin: 30px 0;
}
.footer {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: #1c98b0;
}五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
