時(shí)間:2023-10-14 08:12:01 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-10-14 08:12:01 來源:網(wǎng)站運(yùn)營
HTML+CSS+JS家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì) 學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模板 旅游景點(diǎn)網(wǎng)頁作業(yè)制作:<!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">互動(dòng)</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>包括了婺劇、道情保護(hù)成果展演及龍游皮紙制紙師評(píng)選等。</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>打造十里風(fēng)荷景觀</h4> <p>開化縣村頭鎮(zhèn)古竹村的荷塘內(nèi),荷葉隨風(fēng)搖曳,白鷺翩翩起舞。</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>開化景區(qū)人氣火爆</h4> <p>開化各大景區(qū)景點(diǎn)游客如織,感受錢江源國家公園的獨(dú)特魅力。</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>熱點(diǎn)聚焦</h3> <h5>全力打造全域旅游“江山樣本”</h5> <p>在中國幸福鄉(xiāng)村建設(shè)的基礎(chǔ)上,2016年又創(chuàng)新提出打造“中國幸福鄉(xiāng)村”2.0版本。當(dāng)年,江山成功創(chuàng)建全省首批美麗鄉(xiāng)村示范縣。2017年,成功承辦全省美麗鄉(xiāng)村和農(nóng)村精神文明建設(shè)現(xiàn)場會(huì)。此后,美麗鄉(xiāng)村景區(qū)化標(biāo)準(zhǔn)在全省推廣,并升格為A級(jí)景區(qū)村莊省級(jí)標(biāo)準(zhǔn)。近兩年,江山成功打造省A級(jí)景區(qū)村莊128個(gè),其中3A級(jí)景區(qū)村莊22個(gè),數(shù)量居全省第一。</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="#">關(guān)隘古鎮(zhèn)-風(fēng)情楊林邀您踏春游</a></li> <li><a href="#">憑車票-建德八大景區(qū)免費(fèi)任游</a></li> <li><a href="#">女神節(jié)-帶你玩轉(zhuǎn)浙里人氣景區(qū)</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="#">[最新]“享生態(tài)清新”精品線</a></li> <li><a href="#">[柯城區(qū)] 農(nóng)家樂 一日游線路</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>鄉(xiāng)村游·自駕游</h4> <li><a href="#">清水魚生態(tài)示范園 金鳳凰農(nóng)莊</a></li> <li><a href="#">和睦彩陶文化特色村 合清山莊</a></li> <li><a href="#">塘湖休閑漁業(yè)山莊 興隆生態(tài)園</a></li> <li><a href="#">杰文花果休閑農(nóng)莊 汀塘圩漁場</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="#">開化花牽谷旅游開發(fā)有限公司</a></li> <li><a href="#">衢州市宇鴻旅游有限責(zé)任公司</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;}}
請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”
一鍵三連哦!??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】
帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!關(guān)鍵詞:設(shè)計(jì),作業(yè),靜態(tài),作品,學(xué)生,主題,家鄉(xiāng)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。