时间：2023-09-18 07:00:02 | 来源：网站运营
时间：2023-09-18 07:00:02 来源：网站运营
web前端期末大作业——开心旅游网站设计与实现(HTML+CSS+JavaScript)： 学生HTML静态网页基础水平制作 ，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2）css文件包含：css全部页面样式,文字滚动, 图片放大等； （3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。<!DOCTYPE html PUBLIC "-//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" style="overflow: auto; overflow-x:hidden;"><head> <title>开心旅游网</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/screen.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> <link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" /></head><body> <div class="wrapper"> <div class="top"> <div class="top_link"><a href="#">设为首页</a> | <a href="#" class="link2">加入收藏</a></div> </div> <!--end of top--> <div class="nav"> <ul> <li><a href="index.html">网站首页</a></li> <li><a href="lvyouwh.html">杭州旅游</a></li> <li><a href="njms.html">杭州美食</a></li> <li><a href="jingdian.html">杭州旅游</a></li> <li><a href="meishi.html">杭州美食</a></li> <li><a href="fengjing.html">杭州旅游</a></li> <li><a href="kmms.html">杭州美食</a></li> </ul> </div> <!--end of nav--> <div id="banner"> <div class="flexslider"> <ul class="slides"> <li><a href="#"> <img src="image/ad1.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j2.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j3.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j4.jpg" width="1010" /></a> </li> </ul> </div> </div> <!--end of banner--> <div class="content"> <div class="sidebar"> <div class="pro_box"> <div class="jj_cp2"> <h3>旅游景点</h3> </div> <ul class="pro_list"> <li><a href="jingdian_1.html">金鸡湖</a></li> <li><a href="jingdian_2.html">拙政园</a></li> <li><a href="jingdian_3.html">周庄</a></li> <li><a href="jingdian_4.html">同里古镇</a></li> </ul> </div> <!--end of pro_box--> <div class="pro_box"> <div class="jj_cp2"> <h3>特色美食</h3> </div> <ul class="pro_list"> <li><a href="meishi_1.html">太湖梅鲚</a></li> <li><a href="meishi_2.html">太湖白虾</a></li> <li><a href="meishi_3.html">采芝斋糖果</a></li> <li><a href="meishi_4.html">松鼠桂鱼</a></li> </ul> </div> <!--end of pro_box--> </div> <!--end of sidebar--> <div class="main_con"> <div class="chanp_box"> <div class="jj_cp"> <h3>旅游景点</h3> </div> <div class="show_box"> <div class="show_panel"> <ul id="show_list"> <li> <a href="#"><img alt="" src="image/j1.jpg" width="164" height="168" /><span>景点展示</span></a> <a href="#"><img alt="" src="image/j2.jpg" width="164" height="168" /><span>景点展示</span></a> <a href="#"><img alt="" src="image/j3.jpg" width="164" height="168" /><span>景点展示</span></a> <a href="#"><img alt="" src="image/j4.jpg" width="164" height="168" /><span>景点展示</span></a> </li> </ul> </div> </div> <!--end of show_box--> </div> <!--end of chanp_box--> <div class="chanp_box"> <div class="jj_cp"> <h3>特色美食</h3> </div> <div class="show_box"> <div class="show_panel"> <ul id="show_list"> <li> <a href="#"><img alt="" src="image/m1.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m2.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m3.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m5.jpg" width="164" height="168" /><span>特色美食</span></a> </li> </ul> </div> </div> <!--end of show_box--> </div> <!--end of chanp_box--> <div class="jj_box"> <div class="jj_cp"> <h3>开心旅游网南概况</h3> </div> <div class="jj_cloumn"> <a href="#"><img alt="" src="image/1.jpg" width="237" height="166"/></a> <div class="jj_txt"> <p>开心旅游网主要介绍杭州，杭州河杭州的旅游景点和特色美食。带您领略旅游的无限开心一刻。</p> <p>杭州，古称吴，简称苏，又称姑苏、平江等，中国华东地区特大城市之一，位于浙江省东南部、长江以南、太湖东岸、长江三角洲中部，是浙江省省辖市。</p> <p>杭州历史悠久，是国家首批24个历史文化名城之一。杭州有文字记载的历史已逾四千年，是吴文化的发祥地和集大成者，历史上长期是江南地区的政治经济文化中心，杭州是天下四聚之一，杭州城始建于公元前514年，历史学家顾颉刚先生经过考证，认为杭州城为中国现存最古老的城市。</p> <p>杭州文化古迹遍布，从中可以探寻历史的源头：杭州陵依山而建，结构严整，观之而生一股浩然之气；夫子庙建筑群古色古香，漫步其间，让你体味明清时代的市井繁荣；中华门气势宏伟，设计巧妙，置身城内，壁垒森然，耳边似有战马嘶鸣；此外还有灵谷寺、石象路、三国东吴所筑石头城遗址、明代朱元璋的陵墓（明孝陵）以及革命纪念地雨花台等，引人遐思无限。</p> <p>杭州，别称"春城"，是浙江省会，浙江省唯一的特大城市和西南地区第三大城市（仅次于杭州、杭州），是浙江省政治、经济、文化、科技、交通中心，西部地区重要的中心城市和旅游、商贸城市，亦是中国面向东南亚、南亚、东盟开放的重要枢纽城市。</p> </div> <!--end of jj_txt--> </div> <!--end of jj_cloumn--> </div> <!--end of jj_box--> </div> <!--end of mian_con--> </div> <!--end of content--> </div> <!--end of wrapper--> <div class="foot"> <div class="copyright"> <p>版权所有©开心旅游网</p> <p><a href="http://mail.qq.com/">联系我们</a><a href="http://www.baidu.com/" target="_blank"> 友情链接</a></p> </div> <!--end of copyright--> </div> <!--end of foot--></body></html>/* Browser Resets */.flex-container a:active,.flexslider a:active { outline: none;}.slides,.flex-control-nav,.flex-direction-nav { margin: 0; padding: 0; list-style: none;}/* FlexSlider Necessary Styles*********************************/.flexslider { width: 100%; margin: 0; padding: 0;}.flexslider .slides>li { display: none;}/* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides img {}.flex-pauseplay span { text-transform: capitalize;}/* Clearfix for the .slides element */.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}html[xmlns] .slides { display: block;}* html .slides { height: 1%;}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */.no-js .slides>li:first-child { display: block;}/* FlexSlider Default Theme*********************************/.flexslider { position: relative; margin-top: 10px; padding-top: 10px; margin-left: 10px; zoom: 1;}.flexslider .slides { zoom: 1;}.flexslider .slides>li { position: relative;}/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */.flex-container { zoom: 1; position: relative;}/* Caption style *//* IE rgba() hack */.flex-caption { background: none; -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); zoom: 1;}.flex-caption { width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, .3); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); font-size: 14px; line-height: 18px;}/* Direction Nav */.flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../image/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 150px; cursor: pointer; text-indent: -9999px;}.flex-direction-nav li a.next { background-position: -52px 0; right: -51px;}.flex-direction-nav li a.prev { background-position: 0 0; left: -60px;}.flex-direction-nav li a.disabled { opacity: .3; filter: alpha(opacity=30); cursor: default;}/* Control Nav */.flex-control-nav { width: 100%; position: absolute; bottom: -30px; *bottom: -0px; *bottom: -0px/9; text-align: center;}.flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}.flex-control-nav li:first-child { margin: 0;}.flex-control-nav li a { width: 13px; height: 13px; display: block; background: url(../image/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}.flex-control-nav li a:hover { background-position: 0 -13px;}.flex-control-nav li a.active { background-position: 0 -26px; cursor: default;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,实现,旅游,开心,作业
