HTML旅游网站设计与实现——东江湖旅游网站6个网页HTML+CSS+JavaScript
【摘要】 👨🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页...
👨🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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>
<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 href="css/css.css" rel="stylesheet" type="text/css" />
<title>最美东江湖</title>
<style>
html,body{ background:#e3e3e3}
</style>
</head>
<body>
<div class="topbg">
<div class="top">
<div class="logo"><img src="images/djh_logo.png" width="231" height="110" /></div>
<div class="nav"><ul>
<li><a href="index.html" class="hover">网站首页</a></li>
<li><a href="jingjujianjie.html">景区简介</a></li>
<li><a href="zixun.html">景区资讯</a></li>
<li><a href="jingdianjieshao.html">景点介绍</a></li>
<li><a href="lvyouluxian.html">旅游路线</a></li>
<li><a href="about.html">关于我们</a></li>
</ul></div>
</div></div>
<!-- 代码部分begin -->
<div class="slide banner" data-slide='{"action":"click","fn":"banner_ext","time":"8000"}'>
<div class="ban_c album"><a href="#"><img src="images/5.png"/></a></div>
<div class="ban_c album"><a href="#"><img src="images/2.png" /></a></div>
<div class="ban_c album"><a href="#"><img src="images/6.png" /></a></div>
</div>
<script src="js/jquery.min.js" ></script>
<script src="js/script.js"></script>
<!-- 代码部分end -->
<div class="top">
<div class="imgnv">
<img src="images/yuding.png" />
<img src="images/piaojia.png" />
<img src="images/kaifang.png" />
<img src="images/youke.png" /></div>
</div>
<div>
<div class="top">
<dl class="about"><dt><img src="images/3.png" style="height: 200px;width: 300px;" /></dt>
<dd style="width:550px; margin-left:20px; padding-top:20px"> 东江湖位于湖南省郴州市东北部的资兴市境内，是南岭和罗霄山脉南部（八面山脉和诸广山脉）合围的一个湖，是耒水的源头之一，西距郴州市30公里。
<br />
东江湖是湖南省唯一一个同时拥有国家AAAAA级旅游区、国家级风景名胜区、国家生态旅游示范区、国家森林公园、国家湿地公园、国家水利风景区“六位一体”的旅游区。
东江湖纯净浩瀚，湖面面积160平方公里，碧波万顷，景象万千，其水质达到了国家一级饮用水标准。东江湖被列为湖南省最大的饮用水水源地和长株潭城市群战略水源地。</dd>
<dd style="float:right; padding-top:15px"><img src="images/1.png" style="height: 200px;width: 300px;" /></dd>
<div class="clear"></div></dl>
</div></div>
<div style="background:url(images/index_10.jpg) no-repeat center bottom #e5edf5; padding-bottom:120px ">
<div class="top">
<dl class="sub"><p style="font-size: 30px;font-family: 黑体;">景区资讯</p><dt>
<img src="images//8.png" width="300px" height="100px" /></dt>
<dd><ul class="news">
<li><a href="#">风景宛如仙境，这里还有闻名遐迩特产银鱼</a><span>2022-2-12</span></li>
<li><a href="#">景区内有两个非常美丽的新景点值得再次一游</a><span>2022-1-14</span></li>
<li><a href="#">注意！东江湖旅游区运营时间有变</a><span>2021-12-22</span></li>
<li><a href="#">东江湖打造国内首个虚拟现实景区</a><span>2021-12-10</span></li>
</ul></dd></dl>
<dl class="sub"><img src="images/景点介绍.png" /><dt>
<img src="images/9.png" width="300px" height="100px" /></dt>
<dd><ul class="news">
<li><a href="#">雾漫小东江</a></li>
<li><a href="#">东江大坝</a></li>
<li><a href="#">兜率灵岩</a></li>
<li><a href="#">东江漂流</a></li>
</ul></dd></dl>
<div class="fr" style="width:550px; margin-top:16px">
<div><p style="font-size: 20px;">热门景点</p></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2"><img src="images/10.png" width="187" height="312" /></td>
<td><img src="images/11.png" width="166" height="145" /></td>
<td><img src="images/12.png" width="166" height="145" /></td>
</tr>
<tr>
<td><img src="images/13.png" width="166" height="154" /></td>
<td><img src="images/4.png" width="166" height="154" /></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footbg">
<div class="foot"><span class="fr"><img src="images/名片.png" style="width: 100px;height: 100px;"/><br />
官方客服微信</span><img src="images/djh_logo.png" class="fl"/ style="height: 80px;width: 150px;"><span style="padding-top:10px; display:inline-block">
<a href="index.html">网站首页</a> | <a href="jingjujianjie.html">景区简介</a> | <a href="zixun.html">景区资讯</a> | <a href="jingdianjieshao.html">景点介绍</a> | <a href="gopiao.html">购票中心</a> | <a href="about.html">关于我们</a><br />
版权所有：仅展示，不商用 <br />
观光地址：湖南省郴州市东北部的资兴市</span>
<div class="clear"></div>
</div>
</div>
</body>
</html>
CSS样式代码🏡
@charset "utf-8";
/* CSS */
html,body{margin:0;border:0;padding:0;width:100%;font-size:14px;font-family: Arial,"微软雅黑","宋体"; background:#fff; color:#333333; line-height:27px}
img {border:0px; }
*{ padding:0; margin:0}
ul,li,dl,dd,dt,span{ margin:0; padding:0;}
li { list-style:none;}
a {text-decoration:none;color:cadetblue; }
a:hover { text-decoration:none; color:#e9002e}
.clear { clear:both; font-size:0; height:0; line-height:0;}
.mt10 { margin-top:10px;}
.mb5{ margin-bottom:5px}
.ml20{ margin-left:20px;}
.ml10{ margin-left:10px;}
.mt20{ margin-top:20px}
.mt8{ margin-top:8px}
.mt30{ margin-top:30px}
.p10{ padding:20px}
.p15{ padding:15px}
.ptb5{ padding-top:5px; padding-bottom:5px}
.fl{ float:left}
.fr{ float:right}
.wd90{ width:90%}
.topbg{ height:90px; position:relative; margin-bottom:-90px; z-index:100}
.top{ width:1211px; margin:0 auto;}
.top2{ width:1211px; margin:0 auto; background:#fff; margin-top:480px;border-radius:10px; margin-bottom:20px }
.logo{ float:left; width:276px;}
.nav { float:right; width:920PX;}
.nav ul li{ float:left; width:115px; line-height:90px }
.nav ul li a{ text-align:left; display:block; color:rosybrown; font-size:16px; padding-left:25px; }
.nav ul li a.hover{ background:#048fcf;}
.nav ul li a:hover{background:#099bf0;border-radius: 20%;;}
.nav ul li a span{ display:block; margin-top:2px; font-size:12px; color:#999}
.about { padding:40px 0}
.about dt{ float:left; width:321px}
.about dd{ float:left;}
.sub { width:300px; float:left;margin:20px 10px}
.sub dt{ text-align:center; margin-top:5px}
.sub dd h1{ font-size:20px; margin-bottom:5px; margin-top:10px; line-height:20px;}
.footbg{ background:#1f1f1f;}
.foot{width:1211px; margin:0 auto; padding:15px 0;color:#dedede}
.foot a{color:#dedede }
.banner{height:680px;}
.banner .ban_c img{position:absolute;width:1920px;left:50%;margin-left:-960px;top:0;}
.banner .ban_nav{display:none;}
.banner .Left,.banner .Right{position:absolute;width:38px;height:38px;background:url(http://demo.lanrenzhijia.com/2014/banner1113/images/cir_white.gif) no-repeat #aaa;right:50%;bottom:15px;}
.banner .Left{margin-right:-650px;background-position:5px 0}
.banner .Right{margin-right:-690px;background-position:-33px 0;background-color:#e6292f;}
.bann_ext{position:relative;}
.frontCover{position:absolute;top:-120px;padding:0 0 16px;border-bottom:5px solid #de0000;}
.frontCover li{float:left;width:82px;padding:3px;background:#000;color:#fff;overflow:hidden;margin-right:10px;cursor:pointer;}
.frontCover p{text-align:center;height:14px;line-height:18px;overflow:hidden;}
.frontCover .img{position:relative;height:50px;overflow:hidden;}
.frontCover img{position:absolute;width:192px;height:50px;left:-50px;}
.frontCover .open{background:#e60013;}
.wrap{width:980px;margin-left:auto;margin-right:auto;}
/*幻灯片(组件)*/
.slide{position:relative;width:100%;}
.ban_c{display:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.ban_c img{width:100%;height:100%;}
.ban_t{position:absolute;left:0;bottom:0;width:100%;padding:4px 0;text-indent:10px;white-space:nowrap;overflow:hidden;color:#fff;background:rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000);z-index:3;}
.ban_nav{position:absolute;bottom:0;left:0;width:100%;text-align:right;z-index:4;}
.ban_nav a{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;overflow:hidden;text-align:center;margin-right:8px;cursor:pointer;text-decoration:none;font-size:10px;-webkit-text-size-adjust:none;background:#ccc;}
.ban_nav .on{background:#f90;color:#fff;}
.Left,.Right{cursor:pointer;}
.tab{ border-left:4PX #fe0032 solid; font-size:24px; padding-left:5px; margin-top:20px; margin-bottom:10px}
.tab span{ display:block; font-size:12px}
.side li{ background:#fff; border:1px #dedede solid; line-height:45px; height:45px; text-indent:2em; margin-top:5px; font-size:16px}
.side li a{ display:block; height:45px}
.side li a:hover{ background:#333; color:#fff}
.side li a.hover{ background:#333; color:#fff}
.wz{ border-bottom:1px #dedede solid; padding:10px;}
.newslist{ margin:15px 0; border-bottom:1px #dedede solid; padding-bottom:15px}
.newslist dt{ float:left; margin-right:10px; padding:4px; border:1px #dedede solid}
.newslist dd h1{ font-size:16px; margin-bottom:15px; margin-top:10px}
.newslist dd span{ line-height:22px; color:#666; display:block}
.newslist dd.time{ width:95px; text-align:center; margin-top:10px}
.newslist dd.time{ font-size:35px; border:1px #dedede solid; background:#f0f0f0; padding-top:15px}
.newslist dd.time span{ background:#7f7f7f; display:block; font-size:16px; color:#fff; margin-top:15px}
/*分页*/
.page{ margin:25px 0; text-align:right; line-height:24px;}
.page a{ padding:0 12px; border:#c1c1c1 1px solid; display:inline-block; height:28px; line-height:28px; margin:0 2px; color:#333333 }
.page a.page_hover { background:#333; color:#FFFFFF}
.page a.page_hover:hover { background:#333; color:#FFFFFF}
.page a:hover{background:#333;color:#FFFFFF }
.title{ font-size:20px; margin:0px 0 10px 0; font-weight:bold}
.news{ margin-top:10px; line-height:20px}
.news li{ margin-top:10px}
.news li span{ margin-left:13px}
.news li a{ display:block;background:url(../images/news_10.png) no-repeat left; text-indent:1em}
.imgnv{ position:absolute; margin-top:-113px; padding-left:35px}
.imgnv img{ margin-left:10px}
.maintab{ background:#f1f1f1; border-bottom:1px #dedede solid; height:60px;border-radius:10px; font-size:16px}
.maintab span{ float:left;margin:4px 15px 0 15px;border-right:1px #dedede solid; height:56px; display:block; padding-right:10px}
.maintab a{ display:block; float:left; width:120px; text-align:center; height:46px; line-height:40px; margin-top:8px}
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）