前端模板——家乡风景的介绍
生活随笔
收集整理的這篇文章主要介紹了
前端模板——家乡风景的介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄?
?
首頁
首頁部分之一
首頁部分之二?
首頁部分之三
首頁部分之四
宿州歷史頁面?
?宿州美食頁面
宿州民宿頁面
?跟著我頁面（宿州宣傳頁面）
?聯系我們頁面
前言
（1）本博客以HTML為主體框架，css修飾內容，JavaScript設置動態特效，引用了jQuery，bootstrap，swiper框架中的一些代碼，可供初學者學習。
（2）本博客實現的功能有圖片的輪播效果，返回頂部，留言板功能，圖片翻轉特效等，具體實現可查看給出的代碼。
（3）本博客設計的難點在于塊狀元素的相互嵌套，css樣式的優先級順序、排列，Javastrip特效的編寫，相關框架代碼的配合使用。
首頁
首頁部分之一
首頁部分之二?
首頁部分之三
首頁部分之四
首頁劃分為五個部分? 導航欄 輪播區域 風景展示區域 版權區 返回頂部
1.導航欄制作流程
（1）先規定好導航欄的寬高（div）?，再采用無序列表嵌套a標簽
（2）清空無序列表的原有樣式，設置新的樣式
（3）設置超鏈接點擊狀態的相關樣式
2.輪播區域
（1）單獨設置兩大塊（div）的樣式
（2）使用bootstrap框架及swiper框架嵌套到塊狀標簽中
3.風景展示區域
（1）直接使用bootstrap框架中的代碼
4.版權區
（1）規定相應的寬高，劃分區域完成相應寫入
（2）注意其與每個塊狀元素之間的關系
5.返回頂部
（1）先設置錨點
（2）通過JavaScript計算瀏覽器的距離，設置顯示返回頂部的距離及返回頂部的速度等
<!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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- about --><!-- about-top --><div class="about-top"><!-- container --><div class="container"><div class="about-info"><h3>宿州宣傳片</h3><p>航拍</p></div><div class="mov-liu"><object data="video/wu.mp4" height="600px" width="100%"></object></div></div><!-- //container --></div><!-- //about-top --><!-- about-team --><div class="about-team"><!-- container --><div class="container"><h4>游玩攻略</h4><div class="team-grids"><div class="col-md-3 team-grid"><img src="images/皇藏峪國家森林公園.jpg" alt=""><h6>皇藏峪國家森林公園</h6><p>皇藏峪有“天然氧吧”之稱，最高峰飛機場景點，海拔高度約398米。是收復外蒙古將領徐樹錚的故里，也是地球同緯度保存非常完好的落葉闊葉林帶，景區總面積約39.5平方千米，有森林面積約3100多畝，木本植物約199種，樹木約146種，中草藥約700多種，鳥類和野生動物約58種。是江北罕見的暖溫帶落葉闊葉林區、亞熱帶和暖溫帶交匯地帶，為皖北地區保存非常完整的原始森林。</p></div><div class="col-md-3 team-grid"><img src="images/高皇山.jpg" alt=""><h6>高皇山</h6><p>湖邊兩岸連山，重重似畫，因為湖面狹長，水色如碧，這里又有宿州“小三峽”和“小黃山”之稱。藍綠色的池水，沉靜的水面仿佛一塊美玉，倒映著兩邊的巖壁。是個一秒出大片的地方。</p></div><div class="col-md-3 team-grid"><img src="images/綠地衢坊街.jpg" alt=""><h6>綠地衢坊街</h6><p>>如果做高鐵來宿州，出了宿州東站，不妨去旁邊的綠地衢坊街留宿一晚，看看夜景。現代燈光技術加上仿古建筑，讓人仿佛身在夢中。</p></div><div class="col-md-3 team-grid"><img src="images/宿州新汴河.jpg" alt=""><h6>宿州新汴河</h6><p>柏全山位于瓜園則灣鄉政府駐地南3公里處。據傳說，此山曾有4株枝葉繁茂的大柏樹，故名柏全山。柏全山北高南低，山巔上有一古廟，主奉天皇、地皇、人皇，簡稱為“三皇廟”。坐北面南，正殿為三孔硬山形頂拱式磚窯，整個寺院雖然面積不大，但布局合理，層次分明，有泥塑五十余尊，保持有晚清風格。</p></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //about-team --><!-- footer --><div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --></div><!-- //footer --><!-- copyright --><div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --></div><!-- copyright --> </body> </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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- about-team --><!-- //container --><!-- //about-team --><!-- about-bottom --><div class="about-bottom"><!-- container --><div class="container"><h3>宿州歷史沿革</h3><div class="about-bottom-grids"><div class="col-md-6 about-bottom-left"><h4>名字由來</h4><p>春秋時期“宋國遷宿國于此”是“宿州”的地名<span>地處安徽省北部，位于長江三角洲地區，是安徽距離出海口最近的城市 。宿州介于東經116°09′—118°10′、北緯33°18′—34°38′之間，襟臨沿海，東、東北與宿遷和徐州接壤，南臨蚌埠，西至西北與淮北、商丘和菏澤相鄰 。截至2021年，宿州市下轄1個市轄區、4個縣，總面積9939平方千米。截至2020年11月1日，宿州市常住人口5324476人</span></p></div><div class="col-md-6 about-bottom-left about-bottom-right"><h4>演變歷史</h4><p>宿州是楚漢文化、淮河文化的重要發源地。宿州有蘄縣古城遺址、小山口遺址、古臺寺遺址。周朝時期，始建蘄邑。隋唐時期，因京杭大運河通濟渠（汴河）段開通，置宿州 。北宋文學家蘇軾在《南鄉子·宿州上元》中，稱宿州為“此去淮南第一州” 。</p></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //about-bottom --><!-- footer --><div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --></div><!-- //footer --><!-- copyright --><div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --></div><!-- copyright --> </body> </html>?宿州美食頁面
?bootstrap框架的引用及相關標簽的使用，jQuery動態特效的接入
<!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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- gallery --><div class="gallery-top"><!-- container --><div class="container"><div class="gallery-info"><h3>宿州美食一覽</h3><p>那么多的美食,你心動了嗎?</p></div><div class="gallery-grids-top"><div class="gallery-grids"><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food1.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food1.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food2.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food2.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food3.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food3.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food4.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food4.jpg" alt=""/></a></div><div class="clearfix"> </div></div><div class="gallery-grids gallery-grids-middle"><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food5.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food5.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food6.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food6.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food7.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food7.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food8.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food8.jpg" alt=""/></a></div><div class="clearfix"> </div></div><div class="gallery-grids"><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food9.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food9.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food10.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food10.jpg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food11.jpeg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food11.jpeg" alt=""/></a></div><div class="col-md-3 gallery-grid"><a class="example-image-link" href="images/food12.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/food12.jpg" alt=""/></a></div><div class="clearfix"> </div></div><script src="js/lightbox-plus-jquery.min.js"></script></div></div><!-- //container --></div><!-- //gallery --><!-- footer --><div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --></div><!-- //footer --><!-- copyright --><div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --></div><!-- copyright --> </body> </html>宿州民宿頁面
?
?bootstrap框架的引用及相關標簽的使用
<!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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- about --><!-- about-top --><div class="about-top"><!-- container --><div class="container"><div class="about-info"><h3>宿州民宿</h3></div><div class="about-top-grids"><div class="col-md-8 about-top-grid"><h4>宿州民宿或面水或臨街</h4><p>規模： 客房形式多樣，每間客房都配有現代化的生活設施，統一規范經營，房東親情服務，在古老的磚木瓦房中盡享現代生活的安逸<br/>房型： 標準雙人房、大床房、三人間、家庭房、自助房<br/>設施： 內部配套設施：獨立衛浴、分體式空調、24小時熱水、衛浴用品、電話、直飲水、保險箱、磁卡門鎖、數字電視、Wifi網絡、免費瓶裝水；<br/>價位：￥320/間 起</p></div><div class="col-md-4 about-top-grid"><img src="images/su1.PNG" alt="" /></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //about-top --><!-- about-team --><div class="about-team"><!-- container --><div class="container"><h4>精品酒店</h4><div class="team-grids"><div class="col-md-3 team-grid"><img src="images/su2.PNG" alt=""><h6>宜園精品酒店</h6><p>高級標間、園林大床、高級大床、豪華大床、雙人浪漫套房、行政套房、雙人浪漫豪華套房</p></div><div class="col-md-3 team-grid"><img src="images/su3.PNG" alt=""><h6>錦堂行館</h6><p>高級大床房、豪華大床房、豪華套房、中央套房</p></div><div class="col-md-3 team-grid"><img src="images/su4.PNG" alt=""><h6>望津里精品酒店</h6><p>高級標間、大床房、浪漫雙人套房</p></div><div class="col-md-3 team-grid"><img src="images/su5.PNG" alt=""><h6>枕水度假酒店</h6><p>標準間、大床房、套房、民宿二房套A、民宿二房套B、民宿三房套A、民宿標間、民宿四房套、民宿大床、總統套房、司陪標間</p></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //about-team --><div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --></div><!-- //footer --><!-- copyright --><div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --></div><!-- copyright --> </body> </html>?跟著我頁面（宿州宣傳頁面）
?
bootstrap框架的引用及相關標簽的使用
<!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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- about --><!-- about-top --><div class="about-top"><!-- container --><div class="container"><div class="about-info"><h3>宿州宣傳片</h3><p>航拍</p></div><div class="mov-liu"><object data="video/wu.mp4" height="600px" width="100%"></object></div></div><!-- //container --></div><!-- //about-top --><!-- about-team --><div class="about-team"><!-- container --><div class="container"><h4>游玩攻略</h4><div class="team-grids"><div class="col-md-3 team-grid"><img src="images/皇藏峪國家森林公園.jpg" alt=""><h6>皇藏峪國家森林公園</h6><p>皇藏峪有“天然氧吧”之稱，最高峰飛機場景點，海拔高度約398米。是收復外蒙古將領徐樹錚的故里，也是地球同緯度保存非常完好的落葉闊葉林帶，景區總面積約39.5平方千米，有森林面積約3100多畝，木本植物約199種，樹木約146種，中草藥約700多種，鳥類和野生動物約58種。是江北罕見的暖溫帶落葉闊葉林區、亞熱帶和暖溫帶交匯地帶，為皖北地區保存非常完整的原始森林。</p></div><div class="col-md-3 team-grid"><img src="images/高皇山.jpg" alt=""><h6>高皇山</h6><p>湖邊兩岸連山，重重似畫，因為湖面狹長，水色如碧，這里又有宿州“小三峽”和“小黃山”之稱。藍綠色的池水，沉靜的水面仿佛一塊美玉，倒映著兩邊的巖壁。是個一秒出大片的地方。</p></div><div class="col-md-3 team-grid"><img src="images/綠地衢坊街.jpg" alt=""><h6>綠地衢坊街</h6><p>>如果做高鐵來宿州，出了宿州東站，不妨去旁邊的綠地衢坊街留宿一晚，看看夜景。現代燈光技術加上仿古建筑，讓人仿佛身在夢中。</p></div><div class="col-md-3 team-grid"><img src="images/宿州新汴河.jpg" alt=""><h6>宿州新汴河</h6><p>柏全山位于瓜園則灣鄉政府駐地南3公里處。據傳說，此山曾有4株枝葉繁茂的大柏樹，故名柏全山。柏全山北高南低，山巔上有一古廟，主奉天皇、地皇、人皇，簡稱為“三皇廟”。坐北面南，正殿為三孔硬山形頂拱式磚窯，整個寺院雖然面積不大，但布局合理，層次分明，有泥塑五十余尊，保持有晚清風格。</p></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //about-team --><!-- footer --><div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --></div><!-- //footer --><!-- copyright --><div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --></div><!-- copyright --> </body> </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" /> <meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-1.11.1.min.js"> </script> <script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){ event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});}); </script> </head> <body><!-- banner --><div class="banner a-banner"><!-- container --><div class="container"><div class="header"><div class="logo"><a href="index.html">安徽宿州</a></div><div class="icons"><ul><li><a href="#" class="facebook chrome"> </a></li><li><a href="#" class="facebook dribbble"> </a></li><li><a href="#" class="facebook"> </a></li><li><a href="#" class="facebook twitter"> </a></li></ul></div><div class="clearfix"> </div></div><div class="top-nav"><span class="menu">菜單</span><ul class="nav1"><li><a href="index.html" class="active">宿州簡介</a></li><li><a href="history.html">文化歷史</a></li><li><a href="accomdation.html">住宿</a></li><li><a href="food.html">宿州美食</a></li><li><a href="contact.html">聯系我們</a></li></ul><!-- script-for-menu --><script>$( "span.menu" ).click(function() {$( "ul.nav1" ).slideToggle( 300, function() {// Animation complete.});});</script><!-- /script-for-menu --></div></div><!-- //container --></div> <!-- //banner --><!-- contact --><div class="contact-top"><!-- container --><div class="container"><div class="contact-info"><h3>聯系我們</h3><p>對于我們的網站您有什么意見以及建議呢？我們衷心希望能收到您的來信，并會盡一切努力做到最好！</p></div><div class="mail-grids"><div class="col-md-6 mail-grid-left"><h3>地址</h3><h5>安徽宿州安徽省北部</h5><br/><br/><br/><br/><h3>打給我們</h3><p>電話:0755-58478412</p></div><div class="col-md-6 contact-form"><form><input type="text" placeholder="姓名" required=""><input type="text" placeholder="郵件" required=""><input type="text" placeholder="主題" required=""><textarea placeholder="內容" required=""></textarea><input type="submit" value="發送"></form></div><div class="clearfix"> </div></div></div><!-- //container --></div><!-- //contact --> <!-- footer --> <div class="footer"><!-- container --><div class="container"><div class="col-md-6 footer-left"><h3>聯系我們</h3><form><input type="text" placeholder="電子郵件,例如1435469178@qq.com" required=""><input type="submit" value="提交"></form></div><div class="col-md-3 footer-middle"><h3>地址</h3><div class="address"><p>安徽宿州<span>安徽省北部</span></p></div><div class="phone"><p>0573-88731088</p></div></div> <div class="col-md-3 footer-right"><div class="f-logo"><a href="index.html">安徽宿州</a></div><p>安徽省北部</p></div><div class="clearfix"> </div> </div><!-- //container --> </div> <!-- //footer --> <!-- copyright --> <div class="copyright"><!-- container --><div class="container"><div class="copyright-left"><p>Copyright © 2022.All rights reserved. -wjj-designed for<a href="index.html" target="_blank" title="宿州">宿州旅游</a></p></div></div><!-- //container --> </div> <!-- copyright --> </body> </html>?完整源碼鏈接?個人博客之家鄉風景的介紹-Javascript文檔類資源-CSDN文庫https://download.csdn.net/download/qq_60483918/85727459
總結
以上是生活随笔為你收集整理的前端模板——家乡风景的介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Unity_视频背景
- 下一篇： 002-全屏视频背景