👨🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

🏀 精彩专栏推荐👇🏻👇🏻👇🏻

一、网站题目👨🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

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

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

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

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

Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱

CSS样式代码🏡

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
body {
    background-color: #aad5e8;
}
#title {
    width: 100%;
    background-color: #E7D2F0;
}
nav {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    text-align: right;
}
nav a {
    text-decoration: none;
    font-size: 14px;
    color: #DE0782;
    font-weight: 600;
    margin-left: 20px;
    border-bottom: 1px solid rgba(204, 204, 204, 0);
}
nav img {
    position: absolute;
    left: 0px;
    height: 50px;
    top: 5px;
}
nav a:hover {
    color: #5DB4DD;
    border-bottom: 1px solid #5DB4DD;
}
/* 轮播图样式 */
.contentl {
    width: 1000px;
    height: 430px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.wrapper {
    width: 400%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transition: none;
}
.wrapper li {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrapper li img {
    width: 100%;
}
.radius {
    height: 12px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}
.radius li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.6;
    margin: 0 3px;
    padding: 0;
    list-style: none;
}
.radius-active {
    opacity: 1 !important;
    border: 2px solid rgb(255, 255, 255, 0.5);
    background-clip: padding-box;
}
.prev {
    width: 23px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}
.next {
    width: 23px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}
.prev span,
.next span {
    font-weight: bold;
    color: white;
    font-size: 18px;
}
/* 中间内容区域 */
#main {
    width: 1000px;
    margin: 0 auto;
    background-color: #D8DFEB;
    box-sizing: border-box;
    padding: 20px;
}
h1 {
    color: #DE0782;
    text-align: center;
    margin-bottom: 30px;
}
#jiehsao {
    margin-top: 30px;
}
#jiehsao img {
    width: 300px;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
}
#jiehsao p {
    font-size: 16px;
    line-height: 30px;
    color: rgb(103, 103, 103);
    text-indent: 32px;
}
#jiehsao p span {
    color: #333;
    font-size: 28px;
    font-weight: 550;
}
#fenlei {
    width: 100%;
    font-size: 0px;
    margin-top: 30px;
}
#fenlei>div {
    margin-left: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}
#fenlei>div:first-child {
    margin-left: 0px;
}
#fenleiimg {
    width: 300px;
    height: 179px;
    overflow: hidden;
}
#fenlei_title {
    width: 300px;
    height: 400px;
    background-color: #f9f2fc;
    display: inline-block;
    font-size: 16px;
}
#fenlei_title h1 {
    text-align: left;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
#fenlei_title p {
    box-sizing: border-box;
    padding: 0px 20px;
    font-size: 14px;
}
footer {
    line-height: 60px;
    background-color: #E7D2F0;
    color: #DE0782;
    text-align: center;
}
/* 第二页 */
#main_banner {
    width: 100%;
    font-size: 0px;
}
#main_banner img {
    width: 100%;
}
.h1 {
    margin-top: 20px;
}
#dierye {
    width: 100%;
    padding-top: 30px;
}
#dierye li {
    width: 100%;
    margin-bottom: 0px;
    height: 210px;
    overflow: hidden;
    margin-bottom: 30px;
}
#dierye li div {
    display: inline-block;
    height: 210px;
}
#foodimg {
    width: 350px;
    height: 210px;
    overflow: hidden;
    float: left;
    border-radius: 10px;
    margin-right: 30px;
}
#foodimg img {
    width: 100%;
    height: 210px;
}
#jieshao {
    width: 100%;
    height: 300px;
}
#jieshao p:first-child {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
#jieshao p:last-child {
    text-indent: 32px;
    line-height: 30px;
}
/* 第三页 */
#fengjing {
    width: 1000px;
    margin: 0 auto;
    font-size: 0px;
    margin-top: 20px;
}
#fengjing li {
    display: inline-block;
    width: 320px;
    height: 400px;
    box-sizing: border-box;
    padding: 20px;
}
#fengjing li p {
    font-size: 16px;
    line-height: 28px;
}
#fengjing li p:nth-child(2) {
    font-weight: 600;
}
#fengjing li p:nth-child(3) {
    box-sizing: border-box;
    width: 280px;
    height: 135px;
    font-size: 14px;
    margin-top: 10px;
    color: rgb(101, 101, 101);
}
#fengjing li img {
    display: inline-block;
    width: 280px;
    height: 175px;
    background-color: #333;
    margin-bottom: 10px;
}
/* 第四页 */
#renwen {
    text-align: center;
}
#renwen img {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
#renwen p {
    text-align: left;
    line-height: 30px;
    text-indent: 32px;
}
#liuyan {
    text-align: center;
}
#liuyanbox {
    display: inline-block;
    text-align: left;
}
#liuyanbox {
    line-height: 30px;
}
#liuyanbox input {
    width: 240px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
textarea {
    width: 500px;
    height: 230px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    width: 100px;
    height: 30px;
    margin-left: 225px;
    margin-top: 30px;
}

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货🎁

请 “👍点赞” “✍️评论” “💙收藏” 

❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥