首页 > 分享 > 制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面

制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面

花匠小妙招
2024-11-13 22:40

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

精彩专栏推荐

【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录一、网站题目‍二、网站描述✍️三、网站介绍四、网站效果五、网站代码制作部分 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> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style.css" rel="stylesheet"> <script type="text/javascript" src="js/pptBox.js"></script> <title>无锡印象</title> </head> <body> <embed src="file/m.mp3" width="0" height="0"> <div class="con"> <div style="position: fixed; top: 0px;right: 0px; font-size: 30px;"> </div> <header> <div class="logo"> <a href=""><img src="picture/logo.png" width="1010"></a> </div> <nav> <ul> <li><a href="">网站首页</a></li> <li><a href="page1.html">历史沿革</a></li> <li><a href="page2.html">地理环境</a></li> <li><a href="page3.html">地方特产</a></li> <li><a href="page4.html">旅游胜地</a></li> <li><a href="page5.html">关于我们</a></li> <li><a href="log.html">登录</a></li> <li><a href="reg.html">注册</a></li> </ul> </nav> <div class="clear"></div> </header> <div class="clear"></div> <div class="lunbo"> <script> var box = new PPTBox(); box.width = 1010; //宽度 box.height = 333; //高度 box.autoplayer = 3; //自动播放间隔时间 //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"}) box.add({ "url": "picture/banner_1.png", "href": "#", "title": "1" }) box.add({ "url": "picture/banner_2.png", "href": "#", "title": "2" }) box.add({ "url": "picture/banner_3.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_4.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_5.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_6.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_7.png", "href": "#", "title": "3" }) box.show(); </script> </div> <div class="clear"></div> <div class="main"> <h2>家乡无锡简介</h2> <p>无锡，简称“锡”，古称新吴、梁溪、金匮，是江苏省地级市，国务院批复确定的中国长江三角洲的中心城市之一、重要的风景旅游城市。截至2018年，全市下辖5个区、代管2个县级市，总面积4627.47平方千米，建成区面积332.01平方千米，常住人口657.45万人，城镇人口501.50万人，城镇化率76.28%。</p> <p> 无锡地处中国华东地区、江苏省南部、长江三角洲平原，是扬子江城市群重要组成部分，北倚长江、南滨太湖，被誉为“太湖明珠”，京杭大运河从无锡穿过；境内以平原为主，星散分布着低山、残丘；属北亚热带湿润季风气候区，四季分明，热量充足。 </p> <p> 无锡是国家历史文化名城，自古就是鱼米之乡，素有布码头、钱码头、窑码头、丝都、米市之称。无锡是中国民族工业和乡镇工业的摇篮，是苏南模式的发祥地，也是联勤保障部队无锡联勤保障中心驻地。无锡有鼋头渚、灵山大佛、无锡中视影视基地等景点。</p> <p> 2017年11月，复查确认继续保留全国文明城市荣誉称号。 2018年12月，被评为2018中国大陆最佳地级城市第3名，2018中国创新力最强的30个城市之一，2018中国最佳旅游目的地城市第17名。2019年8月，中国海关总署主办的《中国海关》杂志公布了2018年“中国外贸百强城市”排名，无锡排名第11。2019年，无锡市地区生产总值为11852.32亿元，增长6.7%。分产业看，第一产业增加值122.50亿元，下降2.4%；第二产业增加值5627.88亿元，增长7.6%；第三产业增加值6101.94亿元，增长6.0%。 </p> <p></p> <p></p> <p></p> <h2>风景欣赏</h2> <div class="main_list"> <ul> <li> <a href="#"><img class="img2" src="picture/p1.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p2.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p3.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p4.png"></a> </li> </ul> </div> </div> <div class="clear"></div> <footer> <p id="xx"></p> </footer> <div class="clear"></div> </div> </body> </html> <script> var xx = document.getElementById('xx') xx.innerHTML=itime() setInterval(function(){ xx.innerHTML=itime() },1000) function itime() { var date = new Date(); this.year = date.getFullYear(); this.month = date.getMonth() + 1; this.date = date.getDate(); this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()]; this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var currentTime = + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day; return(currentTime) } </script></doctype>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146

CSS样式代码

*{ margin:0; padding:0; font-family:Microsoft YaHei;} .clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} li{ list-style-type:none;} .center{ text-align:center;} .p10{ padding:10px;} .p20{ padding:20px;} img{-moz-border-radius:15px;border-radius:15px; } .img2 {transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover {transform: scale(1.1); -webkit-transform: scale(1.1);-moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } body{ background:url(../image/bj.jpg) top center fixed no-repeat;} /*----------------------con-------------------------*/ .con{ width:1024px; padding:20px; height:auto; margin:10px auto; background:#fff;background-color:rgba(255,255,255,0.85);-moz-border-radius:15px;border-radius:15px;} /*----------------head-----------------*/ header{ width:1024px; height:auto; margin:auto;} .logo{ width:1010px; height:auto; margin:10px auto;} nav{ width:1010px; height:40px; margin:20px auto; border-top:1px dotted #611111; border-bottom:1px dotted #611111; } nav ul{ } nav li{ float:left; padding:5px 28px; text-align:center; } nav li a{ font-size:18px; line-height:30px; color:#611111;} nav li a:hover{ color:#611111; text-decoration:none;} nav li:hover{} nav li:hover a{ color:#a11a1a;} .banner{ width:1010px; height:auto; margin:5px auto;} .mainbox{ overflow:hidden; position:relative;} .flashbox{ overflow:hidden; position:relative;} .imagebox{ text-align:right;position:relative;} .bitdiv{display:inline-block;width:12px;height:12px;margin:0 10px 10px 0px;cursor:pointer;float:right;} .defimg{background-image:url(../image/02.png)} .curimg{background-image:url(../image/01.png)} /*----------------main-----------------*/ .main{ width:1000px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;} .main h2{ font-size:22px; line-height:40px; margin:10px auto;color:#611111;font-weight:normal; text-align:center; border-bottom:1px dotted #611111; font-family:楷体;} .main h3{ font-size:16px; line-height:32px;color:#611111; text-align:left; } .main p{ font-size:14px; line-height:26px;color:#666; text-align:left; } .main p strong{ font-size:16px; line-height:32px;color:#611111; text-align:left; } .main_list{ width:960px; height:auto; margin:30px auto; } .main_list li{ width:210px;height:180px; float:left; margin:15px; } .main_list li p{ text-align:center;} .main_list li p a{font-size:18px; line-height:40px; color:#111; text-align:center;} .main_list li p a:hover{ color:#611111;} .main_list li:hover{} .main_list li img{ width:211px; height:137px; } /*----------------love-----------------*/ .love_in{ width:980px; height:auto; margin:10px auto;} .love_in_l{ width:400px; height:auto; float:left; margin:10px;} .love_in_r{ width:520px; height:auto; float:right; margin:10px;font-size:14px; line-height:26px; color:#111; } /*----------------foot-----------------*/ footer{ width:1010px; height:auto; margin:10px auto; border-top:1px dotted #ccc; padding-top:10px; text-align:center; font-size:12px; line-height:24px; color:#

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970

六、遇到问题及如何解决

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

七、实训总结

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