时间：2023-10-14 08:12:01 | 来源：网站运营
时间：2023-10-14 08:12:01 来源：网站运营
HTML+CSS+JS家乡主题网页设计 学生网页设计作品 dreamweaver作业静态HTML网页设计模板 旅游景点网页作业制作：
在线咨询
<!DOCTYPE HTML><html><head><title>首页-名城衢州</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><script src="js/jquery.min.js"></script><script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); }); }); $(document).ready(function() { $().UItoTop({ easingType: 'easeOutQuart' }); });</script></head><body><div class="header"><div class="container"> <div class="logo"> <div class="container"> <a href="index.html"><img src="images/logo.png" class="img-responsive" alt=""></a> </div> </div> <div class="top-nav"> <span class="menu"><img src="images/menu.png" alt=""></span> <ul class="nav1"> <li class="hvr-sweep-to-bottom active"><a href="index.html">首页</a></li> <li class="hvr-sweep-to-bottom"><a href="travel.html">旅游</a></li> <li class="hvr-sweep-to-bottom"><a href="photos.html">美景</a></li> <li class="hvr-sweep-to-bottom"><a href="interact.html">互动</a></li> <div class="clearfix"> </div> </ul> <!-- script-for-menu --> <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script> <!-- /script-for-menu --> </div> <div class="b-search"> <form> <input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}"> <input type="submit" value=""> </form> </div> <div class="clearfix"></div></div></div><div class="instructors"> <div class="container"> <div class="col-md-4 instru-left"> <h3>最新资讯</h3> <div class="inst-top"> <div class="ins-lef"> <a href="view.html"><img src="images/6.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>非遗文化“盛宴”</h4> <p>包括了婺剧、道情保护成果展演及龙游皮纸制纸师评选等。</p> </div> <div class="clearfix"></div> </div> <div class="inst-top1"> <div class="ins-lef"> <a href="view.html"><img src="images/7.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>打造十里风荷景观</h4> <p>开化县村头镇古竹村的荷塘内，荷叶随风摇曳，白鹭翩翩起舞。</p> </div> <div class="clearfix"></div> </div> <div class="inst-top2"> <div class="ins-lef"> <a href="view.html"><img src="images/8.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>开化景区人气火爆</h4> <p>开化各大景区景点游客如织，感受钱江源国家公园的独特魅力。</p> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-8 instru-right"> <div class="training"> <div class="tra-left"> <a href="view.html"><img src="images/9.jpg" class="img-responsive" alt="" /></a> </div> <div class="tra-right"> <h3>热点聚焦</h3> <h5>全力打造全域旅游“江山样本”</h5> <p>在中国幸福乡村建设的基础上，2016年又创新提出打造“中国幸福乡村”2.0版本。当年，江山成功创建全省首批美丽乡村示范县。2017年，成功承办全省美丽乡村和农村精神文明建设现场会。此后，美丽乡村景区化标准在全省推广，并升格为A级景区村庄省级标准。近两年，江山成功打造省A级景区村庄128个，其中3A级景区村庄22个，数量居全省第一。</p> </div> <div class="clearfix"></div> </div> <div class="sructs"> <h6>衢州美图欣赏</h6> <li><a href="view.html"><img src="images/10.jpg" class="img-responsive" alt="" /></a></li> <li><a href="view.html"><img src="images/11.jpg" class="img-responsive" alt="" /></a></li> <li><a href="view.html"><img src="images/12.jpg" class="img-responsive" alt="" /></a></li> </div> </div> <div class="clearfix"></div> </div></div><!-- 推介 --><div class="container"><div class="feature-top"> <div class="col-md-3 service-left"> <img src="images/4.png" class="img-responsive" alt=""> <h4>旅游推介</h4> <li><a href="#">九华 ：枇杷丰收吸引众采摘客</a></li> <li><a href="#">关隘古镇-风情杨林邀您踏春游</a></li> <li><a href="#">凭车票-建德八大景区免费任游</a></li> <li><a href="#">女神节-带你玩转浙里人气景区</a></li> </div> <div class="col-md-3 service-left"> <img src="images/3.png" class="img-responsive" alt=""> <h4>线路推荐</h4> <li><a href="#">休闲好去处常山四季游览线路</a></li> <li><a href="#">[最新]“享生态清新”精品线</a></li> <li><a href="#">[柯城区] 农家乐 一日游线路</a></li> <li><a href="#">[最新]“悟古城春秋”精品线</a></li> </div> <div class="col-md-3 service-left"> <img src="images/2.png" class="img-responsive" alt=""> <h4>乡村游·自驾游</h4> <li><a href="#">清水鱼生态示范园 金凤凰农庄</a></li> <li><a href="#">和睦彩陶文化特色村 合清山庄</a></li> <li><a href="#">塘湖休闲渔业山庄 兴隆生态园</a></li> <li><a href="#">杰文花果休闲农庄 汀塘圩渔场</a></li> </div> <div class="col-md-3 service-left"> <img src="images/1.png" class="img-responsive" alt=""> <h4>旅行社</h4> <li><a href="#">江山市悠游假日旅游有限公司</a></li> <li><a href="#">衢州市小叶子旅行社有限公司</a></li> <li><a href="#">开化花牵谷旅游开发有限公司</a></li> <li><a href="#">衢州市宇鸿旅游有限责任公司</a></li> </div> <div class="clearfix"> </div> </div></div><!-- 推介 --><div class="footer"> <div class="foot-bottom"> <p>Copyright © 名城衢州 . All rights reserved . </p> </div></div><a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 0;"> </span></a></body></html>h4, h5, h6,h1, h2, h3 {margin-top: 0;}ul, ol {margin: 0;}p {margin: 0;}html,body{ font-family:OpenSans-Regular;}body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all;}.header { margin:0 0 3em;}.logo { float: left; width: 30%; margin: 3.9em 0 0;}span.menu { display: none;}.top-nav{ float: left; width: 45%;}.top-nav ul{ padding:0; margin:0;}.top-nav ul li{ display: inline-block; width: 18%; float: left;}.top-nav ul li.active{ background:#a7cbb4;}.top-nav ul li a { color: #000; font-size: 1.3em; margin-right: .4em; float: left; padding: 3em 0em 1.5em 0em; text-align: center; width: 100%; font-family: 'Alegreya', serif;}.top-nav ul li a:hover{ text-decoration:none; color: #fff;}.top-nav ul li.active a { color: #fff;}.copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden;}/* Sweep To Bottom */.hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); -o-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -ms-osx-font-smoothing: grayscale; -o-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; -o-transition-property: color; -moz-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s;}.about-bottom li { width: 48%;}.instru-left { padding: 1em 3.5em;}}/*-- responsive-mediaquries --*/@media(max-width:320px){.contact h2 { font-size: 1.7em; margin: 0 0 0.5em;}.contact h3 { font-size: 1.4em; margin: 0.8em 0;}.contact-left { padding: 0; margin: 1em 0;}.contact-right { padding: 0;}.form_details input[type="text"], .form_details textarea { padding: 8px; width: 100%; font-size: 1em; margin: 0px 0px 10px;}.contact-left iframe { height: 151px;}.con-left { padding: 1em 0 0;}.form_details input[type="submit"] { width: 40%; margin-top: 0.5em; font-size: 0.9em;}.form_details textarea { height: 150px;}.footer h3 { font-size: 1.4em;}.footer p { font-size: 0.875em;}.soci { padding: 0;}.footer-left { padding: 0;}.lessons h2 { font-size: 1.7em;}.lessons h3 { font-size: 1.4em;}.lessons p { font-size: 0.875em;}.lessons-right { padding: 0;}.lessons-left { padding: 0;}.ab-lft { padding: 0;}.ab-lft { padding: 0;}.lessons-middle { padding: 2em 0 0;}.lessons-bottom li a { font-size: 0.875em; line-height: 1.8em;}.lessons-bottom ul { padding: 0; margin: 0.8em 0;}.about h2 { font-size:1.7em;}.about h3 { font-size: 1.4em;}.about h2 { font-size: 1.7em;}.about h3 { font-size: 1.4em;}.about p { font-size: 0.875em;}.about-left { padding: 0;}.about-right { margin: 1em 0 0; padding: 0;}.about-middle li a { font-size: 0.875em;}.ab-rgt { margin: 1em 0; padding: 0;}.ab-rgt { margin: 1em 0; padding: 0;}.container { width: 275px;}.view { width: 72px; height: 76px;}.view .mask, .view .content { padding: 1em 0; width: 72px; height: 76px; padding:0.5em 0 0; }.view1 { width: 144px; height: 76px;}.view1 .mask, .view1 .content { width: 136px; height: 76px; padding:0;}.instructors p { font-size: 0.875em; margin: 0.5em 0 0;}.have h3 { font-size: 1.4em; margin: 0 0 1em;}.instructors h6 { font-size: 1.4em; margin: 0 0 0.5em;}.have h4 { font-size: 1.2em; margin:0;}.have p { font-size: 0.875em;}.have-left { padding: 0;}.have li a { font-size: 0.875em;}.have ul { padding: 1em 0 0;}.feature-top p { font-size: 0.875em;}.feature-top h4{margin:1em 0 0;}.feature-top { padding: 1em 0;}.logo img { width: 53%;}.b-search { width: 49%; margin: 0.1em 0; display: none;}.top-nav { margin: 0px 0; float: right; width: 7%;}.top-nav ul { top:11%;}.header { margin: 0 0 0em; padding: 1.5em 0;}.top-nav ul li a { padding: 0.5em 0;}.view h2 { font-size: 10px; padding: 0px 0 0;}.view p { font-size: 8px; padding:3px 0px 0px;}.view1 h2 { font-size: 10px; padding: 0 0 0;}.view1 p { font-size: 8px; padding:3px 0px 0px;}.contact p { font-size: 0.875em;}.instru-left { padding: 1em 0.5em;}}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,作业,静态,作品,学生,主题,家乡
