当前位置：首页 > news >正文

大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站（河南平顶山）

news 2026/7/16 20:50:08

HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计

💥 文章目录
一、🏁 网站题目
二、🚩 网站描述
三、🎌 网站介绍
四、🏴 网站效果
五、🏳️ 网站代码
六、🏳️‍🌈 如何学习进步
七、🏴‍☠️ 更多干货

💥 文章目录

一、🏁 网站题目

💪💪💪 旅游网站（河南平顶山） 12页

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、🎌 网站介绍

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

📃网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

五、🏳️ 网站代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>[饸饹面]-平顶山地情资讯网</title><style type="text/css"><!--.STYLE11{font-size:12px;font-family:Verdana,Arial,Helvetica,sans-serif;color:#000000;}.STYLE15{color:#FFFFFF;font-size:16px;font-family:Verdana,Arial,Helvetica,sans-serif;}.STYLE24{font-size:14px}.STYLE27{font-family:"仿宋";font-size:24px;}a:link{color:#000000;text-decoration:none;}a:visited{text-decoration:none;color:#000000;}a:hover{text-decoration:underline;color:#0000FF;}a:active{text-decoration:none;color:#000000;}body{background-image:url(../images/background4.jpg);}.STYLE29{font-family:"华文行楷";font-size:50px;}.STYLE30{font-family:"华文楷体";font-size:22px;}.STYLE31{color:#FFFFFF}.STYLE32{color:#000000}--></style><script language="JavaScript"><!--functionmmLoadMenus(){if(window.mm_menu_0102004338_0)return;window.mm_menu_0102004338_0=newMenu("root",120,26,"华文楷体",20,"#000000","#FFFFFF","#CCCCCC","#000084","center","middle",3,0,1000,-5,7,true,false,true,0,true,true);mm_menu_0102004338_0.addMenuItem("尧山风景区","location='../spots/spots1.html'");mm_menu_0102004338_0.addMenuItem("中原大佛","location='../spots/spots2.html'");mm_menu_0102004338_0.addMenuItem("香山寺","location='../spots/spots3.html'");mm_menu_0102004338_0.addMenuItem("三苏园","location='../spots/spots4.html'");mm_menu_0102004338_0.hideOnMouseOut=true;mm_menu_0102004338_0.bgColor='#555555';mm_menu_0102004338_0.menuBorder=1;mm_menu_0102004338_0.menuLiteBgColor='#FFFFFF';mm_menu_0102004338_0.menuBorderBgColor='#777777';window.mm_menu_0102004935_0=newMenu("root",104,26,"华文楷体",20,"#000000","#FFFFFF","#CCCCCC","#000084","center","middle",3,0,1000,-5,7,true,false,true,0,true,true);mm_menu_0102004935_0.addMenuItem("羊肉冲汤","location='food1.html'");mm_menu_0102004935_0.addMenuItem("买根烧鸡","location='food2.html'");mm_menu_0102004935_0.addMenuItem("饸饹面","location='food3.html'");mm_menu_0102004935_0.hideOnMouseOut=true;mm_menu_0102004935_0.bgColor='#555555';mm_menu_0102004935_0.menuBorder=1;mm_menu_0102004935_0.menuLiteBgColor='#FFFFFF';mm_menu_0102004935_0.menuBorderBgColor='#777777';mm_menu_0102004935_0.writeMenus();}// mmLoadMenus()functionMM_openBrWindow(theURL,winName,features){//v2.0window.open(theURL,winName,features);}functionMM_popupMsg(msg){//v1.0alert(msg);}//--></script><script language="JavaScript"src="mm_menu.js"></script></head><body onload="MM_openBrWindow('../images/广告.jpg','饸饹面广告','width=1000,height=750')"onblur="MM_popupMsg('筋面郎饸饹面欢迎您！')"><script language="JavaScript1.2">mmLoadMenus();</script><table width="1004"border="0"align="center"><tr><td height="164"colspan="2"><div align="center"class="STYLE29">舌&nbsp;&nbsp;&nbsp;尖&nbsp;&nbsp;&nbsp;上&nbsp;&nbsp;&nbsp;的&nbsp;&nbsp;&nbsp;平&nbsp;&nbsp;&nbsp;顶&nbsp;&nbsp;&nbsp;山</div></td></tr><tr><td height="44"colspan="2"><table width="1004"height="48"border="0"align="center"cellspacing="2"><tr><td align="center"valign="middle"background="../images/navbj.png"><spanclass="STYLE15"><a href="../index.html">网站首页</a></span></td><td align="center"valign="middle"background="../images/navbj.png"><spanclass="STYLE15"><a href="../introduction/introduction.html">走进鹰城</a></span></td><td align="center"valign="middle"background="../images/navbj.png"><spanclass="STYLE15"><a href="../spots/spots.html"name="link3"id="link1"onmouseover="MM_showMenu(window.mm_menu_0102004338_0,-20,30,null,'link3')"onmouseout="MM_startTimeout();">特色景点</a></span></td><td align="center"valign="middle"background="../images/navbj.png"><spanclass="STYLE15"><a href="food.html"name="link4"id="link2"onmouseover="MM_showMenu(window.mm_menu_0102004935_0,-20,30,null,'link4')"onmouseout="MM_startTimeout();">特色美食</a></span></td><td align="center"valign="middle"background="../images/navbj.png"><spanclass="STYLE15"><a href="../people/people.html">重要人物</a></span></td></tr></table></td></tr><tr><td width="200"height="650"><table width="196"height="650"border="1"cellspacing="2"><tr><td width="186"align="center"valign="middle"><div align="center"><ul><li><spanclass="STYLE27"><a href="food1.html">羊肉冲汤</a></span></li></ul></div></td></tr><tr><td align="center"valign="middle"><div align="center"><ul><li><spanclass="STYLE27"><a href="food2.html">买根烧鸡</a></span></li></ul></div></td></tr><tr><td align="center"valign="middle"><div align="center"><ul><li><spanclass="STYLE27"><a href="food3.html">饸饹面</a></span></li></ul></div></td></tr></table></td><td width="800"height="650"align="center"valign="top"><p><img name=""src="../images/noodles2.jpg"width="750"height="450"alt=""/></p><p align="justify"><spanclass="STYLE30">&nbsp;&nbsp;&nbsp;<spanclass="STYLE32">郏县饸饹面是河南郏县地区一道用料考究、独具特色，已有千年历史的传统特色名小吃，简称郏县饸饹。郏县饸饹是一种圆形条状面制食品，初以<a target="_blank"href="https://baike.baidu.com/item/%E8%8D%9E%E9%BA%A6%E9%9D%A2/1855875"data-lemmaid="1855875">荞麦面</a>为面料，其加入用纯<a target="_blank"href="https://baike.baidu.com/item/%E7%BE%8A%E6%B2%B9/8679124"data-lemmaid="8679124">羊油</a>熬制的辣椒和百年老锅汤及新鲜味美的<a target="_blank"href="https://baike.baidu.com/item/%E7%BE%8A%E8%82%89/809492"data-lemmaid="809492">羊肉</a>，辅以八角、茴香、辣椒、胡椒、肉桂、葱花、枸杞等十余种佐料，吃起来不仅味道鲜美，香而不腻，而且有暖胃去寒，<a target="_blank"href="https://baike.baidu.com/item/%E6%BB%8B%E9%98%B4%E5%A3%AE%E9%98%B3/6838036"data-lemmaid="6838036">滋阴壮阳，保健防病的功能。清末，始以小麦面替代荞麦面，口感营养更胜一筹。《中华风味饮食总》一书称郏县饸饹“舒脾健胃，养生至宝</span><spanclass="STYLE31">”。</span></span></p></td></tr><tr><td height="122"colspan="2"><table width="1001"height="102"border="0"align="center"><tr><td width="995"background="../images/hx_bottom.jpg"><div align="center"class="STYLE11"><div align="center"><blockquote><spanclass="STYLE24">友情链接：<a href="http://www.pds.gov.cn/">平顶山市人民政府</a><a href="http://www.pdsta.gov.cn/indexzw.html">平顶山旅游政务网</a><a href="http://www.pdsdqw.com/">平顶山地情网</a><a href="http://www.tianqi.com/pingdingshan/">平顶山天气预报</a><a href="http://pingdingshan.city8.com/">平顶山地图</a></span></blockquote></div></div></td></tr><tr><td background="../images/hx_bottom.jpg"><p align="center"class="STYLE11">版权所有 ©2018XXXXX学院XXXXX校区</p><p align="center"class="STYLE11">电话：123456789电子邮件：XXXXX@163.com 邮编：XXXXX</p></td></tr><tr><td height="25"background="../images/hx_bottom.jpg"><div align="center"><spanclass="STYLE11">设计制作：</span><spanclass="STYLE11">XXXXX</span></div></td></tr></table></td></tr></table><div align="center"></div></body></html>