300字范文 > HTML+CSS+JS网页设计期末课程大作业——上海旅游景点（10页）web前端开发技术 web课

HTML+CSS+JS网页设计期末课程大作业——上海旅游景点（10页）web前端开发技术 web课

时间：2020-11-09 08:32:18

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录🌰

一、网站题目👨‍🎓二、网站描述✍️三、网站介绍📖四、网站效果🌐五、网站代码制作部分 📕 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)网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

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

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

HTML结构代码🧱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>上海旅游景点</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="top">

<img src="images/logo.jpg" />

</div>

<div class="daohang">

<div id="nav">

<ul>

<li><a href="index.html">首页</a></li>

<li><a href="about.html">关于上海</a></li>

<li><a href="jingdian.html">旅游景点</a></li>

<li><a href="minsu.html">风俗民情</a></li>

<li><a href="techan.html">地方特产</a></li>

<li><a href="liuyan.html">贵宾留言</a></li>

</ul>

</div>

<div class="ban">

<img src="images/banner.jpg" width="1000" height="335" border="0" />

</div>

<div class="main">

<div class="box1">

<div class="shang-left">

<div class="gk-title"><a href="about.html"><h1>上海简介</h1></a></div>

<div class="gk">

<img src="images/gktu.jpg" />

<p>上海，简称"沪"或"申"，是中国共产党的诞生地，是中华人民共和国省级行政区、直辖市，国家历史文化名城，国际经济、金融、贸易、航运、科技创新中心。 [1] 上海位于中国华东地区，界于东经120°52′-122°12′，北纬30°40′-31°53′之间，地处长江入海口，东隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接，上海市总面积6340.5平方千米。

</p>

</div>

<div class="xz">

<a href="techan.html"><h1>地方特产<span><i> 更多>></i></span></h1></a>

<a href="tc01.html"><img src="images/tc01.jpg" /></a>

<a href="tc02.html"><img src="images/tc02.jpg" /></a>

<a href="tc03.html"><img src="images/tc03.jpg" /></a>

<a href="tc04.html"><img src="images/tc04.jpg" /></a>

</div>

<div class="shang-right">

<div class="count-title"><a href="minsu.html"><h1>风俗民情</h1></a></div>

<div class="count">

<br />

<p>"海纳百川文化之申——上海城市符号与城市精神"市民修身系列讲座之第五讲在普陀区真如镇街道社区文化活动中心举行。华东师范大学教授、上海市民俗文化学会会长仲富兰向听众讲述"上海民俗文化的人文特征"。</p>

<p>明清时期，江南一带经济繁荣，市井生活发达，从民间草根的说唱艺术中，诞生了话本又产生了小说。"中国的四大名著，《红楼梦》《西游记》《水浒传》《三国演义》，全部诞生在江南地区。"精英文化总是从草根文化、民俗文化中提炼而出，从这一点可见当时民俗文化繁荣。</p>

</div>

<div class="meishi">

<div class="yy-title"><a href="jingdian.html"><h1>上海旅游景点</h1></a></div>

<div class="ms">

<ul>

<li><img src="images/jd1.jpg" /><p>东方明珠塔</p></li>

<li><img src="images/jd2.jpg" /><p>华亭</p></li>

<li><img src="images/jd3.jpg" /><p>迪士尼</p></li>

<li><img src="images/jd4.jpg" /><p>外滩</p></li>

<li><img src="images/jd5.jpg" /><p>南京路步行街</p></li>

</ul>

</div>

<div class="bottom">

</div>

</body>

</html>

CSS样式代码🏡

@charset "utf-8";

/* CSS Document */

body {

margin: 0 auto;

font-size: 12px;

font-family: "宋体",arial;

line-height: 22px;

}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {

height: auto;

margin: 0;

padding: 0;

vertical-align: middle;

}

li {

list-style: none;

}

a {

text-decoration: none;

}

img {

border: 0;

margin: 0;

padding: 0;

}

a {

color: #333;

}

a:link {

color: #333;

}

a:hover {

color: #629705;

text-decoration: none;

overflow: hidden;

}

/*---网页开始-----*/

/*---top开始-----*/

.top {

height: 200px;

width: 1000px;

margin: 0 auto;

}

.ban {

height: 335px;

width: 1000px;

margin: 0 auto;

}

/*---导航----*/

.daohang {

width: 1000px;

height: 47px;

background: url(../images/nav-bj.jpg);

margin: 0 auto;

}

#nav {

width: 1000px;

height: 47px;

line-height: 47px;

font-family: "宋体";

font-weight: bolder;

font-size: 14px;

margin: 0 auto;

}

#nav ul {

margin: 0 auto;

}

#nav li {

float: left;

width: 165px;

text-align: center;

color: #FFF;

}

#nav a {

width: 165px;

height: 47px;

display: block;

font-family: "宋体";

font-size: 14px;

font-weight: bold;

float: left;

}

#nav a:link {

color: #FFF;

}

#nav a:visited {

color: #FFF;

text-decoration: none;

overflow: hidden;

}

#nav a:hover {

color: #FFF;

text-decoration: none;

overflow: hidden;

background: #224200;

}

#nav a:active {

color: #FFF;

text-decoration: none;

overflow: hidden;

background: #224200;

}

.main {

width: 1000px;

margin: 0 auto;

margin-top: 10px;

height:auto;

overflow:hidden;

}

.box1 {

width: 1000px;

height: 311px;

margin: 0 auto;

}

.shang-left {

float: left;

}

.gk-title {

width: 308px;

height: 40px;

background: #3e8400;

}

.gk-title h1 {

height: 40px;

line-height: 40px;

width: 130px;

margin-left: 20px;

font-size: 16px;

color: #FFF;

font-family: "黑体";

}

.gk {

width: 296px;

height: 262px;

border-left: #8c8c8c 1px solid;

border-right: #8c8c8c 1px solid;

border-bottom: #8c8c8c 1px solid;

background: #FFF;

padding: 0px 5px;

padding-top: 10px;

}

.gk span {

color: #F00;

}

.gk img {

margin-right: 10px;

float: left;

}

.xz {

width: 347px;

height: 311px;

padding-left: 5px;

margin: 0px 15px;

border: #8c8c8c 1px solid;

background: #FFF;

float: left;

overflow: hidden;

}

.xz h1 {

height: 35px;

line-height: 35px;

font-size: 14px;

color: #333;

font-family: "黑体";

}

.xz span {

font-size: 12px;

color: #333;

color: #408602;

font-family: "Courier New", Courier, monospace

}

.xz img {

width: 160px;

height: 120px;

margin: 5px;

float: left;

}

.shang-right {

float: left;

}

.count-title {

width: 308px;

height: 40px;

background: #3e8400;

}

.count-title h1 {

height: 40px;

line-height: 40px;

width: 130px;

margin-left: 20px;

font-size: 16px;

color: #FFF;

font-family: "黑体";

}

.count {

width: 286px;

height: 272px;

border-left: #8c8c8c 1px solid;

border-right: #8c8c8c 1px solid;

border-bottom: #8c8c8c 1px solid;

background: #FFF;

padding: 0px 10px;

}

.count img {

margin: 10px 0px 10px 20px;

}

.count p {

line-height: 20px;

font-size: 12px;

}

.count span {

color: #408602;

font-size: 16px;

font-family: "黑体";

}

.yy-title {

width: 1000px;

height: 40px;

background: #3e8400;

}

.yy-title h1 {

height: 40px;

line-height: 40px;

width: 130px;

margin-left: 20px;

font-size: 16px;

color: #FFF;

font-family: "黑体";

}

.yy {

width: 978px;

padding: 10px;

height: 190px;

border-left: #6c6b6b 1px solid;

border-right: #6c6b6b 1px solid;

border-bottom: #6c6b6b 1px solid;

background: #FFF;

}

.meishi {

margin-top: 15px !important;

margin-bottom: 15px;

}

.ms {

width: 978px;

padding: 10px;

height: 190px;

border-left: #6c6b6b 1px solid;

border-right: #6c6b6b 1px solid;

border-bottom: #6c6b6b 1px solid;

background: #FFF;

}

.ms ul {

}

.ms ul li {

width: 185px;

height: 180px;

margin: 5px;

float: left;

}

.ms ul li img {

width: 185px;

height: 150px;

}

.ms ul li p {

text-align: center;

font-size: 14px;

}

.righttitle {

width: 935px;

background: url(../images/er_02.png) no-repeat;

height: 68px;

line-height: 68px;

padding-left: 65px;

color: #3e8100;

font-size: 18px;

font-weight: bold;

}

.righttitle span {

font-size: 14px;

color: #a5a5a5;

font-family: "arial";

font-weight: normal;

}

.ncontu {

padding-bottom: 0px;

line-height: 22px;

padding-left: 7px;

width: 100%;

padding-right: 0px;

float: left;

color: #464646;

}

.ncontu ul {

}

.ncontu ul li {

width: 250px;

display: block;

float: left;

height: 220px;

overflow: hidden;

margin-bottom: 15px;

}

.ncontu ul li a {

border-bottom: #907f6f 1px solid;

border-left: #907f6f 1px solid;

padding-bottom: 4px;

padding-left: 4px;

width: 230px;

padding-right: 4px;

display: block;

background: #ffffff;

float: left;

height: 188px;

border-top: #907f6f 1px solid;

border-right: #907f6f 1px solid;

padding-top: 4px

}

.news {

width: 100%;

}

.news ul li {

line-height: 30px;

height: 30px;

background: url(../images/fenge.jpg) bottom repeat-x;

color: #3d2915;

}

.news ul li a {

float: left;

display: block;

line-height: 30px;

height: 30px;

background: url(../images/lvdian.jpg) left center no-repeat;

color: #3d2915;

padding-left: 20px;

}

.news ul li a:hover {

color: #000;

}

.news ul li span {

float: right;

color: #666;

line-height: 30px;

}

.danye {

color: #666;

font-size: 14px;

line-height: 25px;

}

.danye b {

font-size: 18px;

display: block;

text-align: center;

}

.danye img {

margin: 0 auto;

display: block;

}

.biaoti {

color: #3d2915;

font-weight: bold;

font-size: 16px;

line-height: 40px;

background: url(../images/fenge.jpg) bottom repeat-x;

text-align: center;

margin-bottom: 10px;

_margin-bottom: 10px;

}

.neirong {

padding: 0px 15px 15px 15px;

}

.neirong img {

margin: 0 auto;

display: block;

}

/*---bottom结束-----*/

.bottom {

width: 1000px;

margin: 0 auto;

margin-top: 20px;

}

.bottom p {

width: 100%;

height: 30px;

font-size: 14px;

text-align: center;

font-weight: bold;

}

/*---bottom结束-----*/

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

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

七、实训总结😊

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