目录

首页

首页部分之一

首页部分之二

首页部分之三

首页部分之四

宿州历史页面

宿州美食页面

宿州民宿页面

跟着我页面（宿州宣传页面）

联系我们页面

前言

（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="data: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="data:images/高皇山.jpg" alt=""><h6>高皇山</h6><p>湖边两岸连山，重重似画，因为湖面狭长，水色如碧，这里又有宿州“小三峡”和“小黄山”之称。蓝绿色的池水，沉静的水面仿佛一块美玉，倒映着两边的岩壁。是个一秒出大片的地方。</p></div><div class="col-md-3 team-grid"><img src="data:images/绿地衢坊街.jpg" alt=""><h6>绿地衢坊街</h6><p>>如果做高铁来宿州，出了宿州东站，不妨去旁边的绿地衢坊街留宿一晚，看看夜景。现代灯光技术加上仿古建筑，让人仿佛身在梦中。</p></div><div class="col-md-3 team-grid"><img src="data: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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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>规模：&nbsp;客房形式多样，每间客房都配有现代化的生活设施，统一规范经营，房东亲情服务，在古老的砖木瓦房中尽享现代生活的安逸<br/>房型：&nbsp;标准双人房、大床房、三人间、家庭房、自助房<br/>设施：&nbsp;内部配套设施：独立卫浴、分体式空调、24小时热水、卫浴用品、电话、直饮水、保险箱、磁卡门锁、数字电视、Wifi网络、免费瓶装水；<br/>价位：￥320/间&nbsp;起</p></div><div class="col-md-4 about-top-grid"><img src="data: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="data:images/su2.PNG" alt=""><h6>宜园精品酒店</h6><p>高级标间、园林大床、高级大床、豪华大床、双人浪漫套房、行政套房、双人浪漫豪华套房</p></div><div class="col-md-3 team-grid"><img src="data:images/su3.PNG" alt=""><h6>锦堂行馆</h6><p>高级大床房、豪华大床房、豪华套房、中央套房</p></div><div class="col-md-3 team-grid"><img src="data:images/su4.PNG" alt=""><h6>望津里精品酒店</h6><p>高级标间、大床房、浪漫双人套房</p></div><div class="col-md-3 team-grid"><img src="data: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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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="data: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="data:images/高皇山.jpg" alt=""><h6>高皇山</h6><p>湖边两岸连山，重重似画，因为湖面狭长，水色如碧，这里又有宿州“小三峡”和“小黄山”之称。蓝绿色的池水，沉静的水面仿佛一块美玉，倒映着两边的岩壁。是个一秒出大片的地方。</p></div><div class="col-md-3 team-grid"><img src="data:images/绿地衢坊街.jpg" alt=""><h6>绿地衢坊街</h6><p>>如果做高铁来宿州，出了宿州东站，不妨去旁边的绿地衢坊街留宿一晚，看看夜景。现代灯光技术加上仿古建筑，让人仿佛身在梦中。</p></div><div class="col-md-3 team-grid"><img src="data: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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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 &copy; 2022.All rights reserved.&nbsp;-wjj-designed&nbsp;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

前端模板——家乡风景的介绍相关推荐

  1. 个人博客前端模板_博客设计——概述

    在目前已有的许多社交软件及平台中,博客始终保持着自己的地位,始终有一大批学生和各行各业职业人员喜欢通过博客的方式记录和分享自己在生活中或者学术上等各方面的经验,这不仅方便发表者个人今后解决类似的问题, ...

  2. swig模板 PHP,nodejs前端模板引擎swig入门

    相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是 他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...

  3. （转）【前端模板之路】一、重构的兄弟说：我才不想看你的代码！把HTML给我交出来！...

    原文地址:http://www.cnblogs.com/chyingp/archive/2013/06/30/front-end-tmplate-start.html 写在前面 随着前端领域的发展和社 ...

  4. swig模板 PHP,如何使用nodejs前端模板引擎swig

    这次给大家带来如何使用nodejs前端模板引擎swig,使用nodejs前端模板引擎swig的注意事项有哪些,下面就是实战案例,一起来看一下. 相对于jade,我还是更喜欢swig前端模板引擎,jad ...

  5. 一个对前端模板技术的全面总结

    此文的写作耗时很长,称之为雄文不为过,小心慢用 此文缘由 其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面 <!-- more --> 就是给 ...

  6. 前端模板技术的全面总结

    此文缘由 其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面 <!-- more --> 就是给我这个画面 突然发现取名字真是个大学问,当时就基 ...

  7. java 前端模板_前端模板引擎入门

    模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍,  java后台的 ...

  8. Themleaf模板基础语法使用介绍

    Themleaf模板基础语法使用介绍 项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025 一. Thymele ...

  9. JavaScript设计前端模板初步理解

    模板这个词,可能很多人第一印象是后端的技术(Smarty,Velocity等),但本文要讲的却不是后端的概念,而是前端开发中所使用到的一种技术,也就是"前端模板"技术. 模板的工作 ...

最新文章

  1. 香蕉派 banana pi github 最新Linux 代码升级到kernel 4.2.
  2. PHP中正则表达式学习及应用（二）
  3. 说一说MVC的CSRF(三)
  4. 向往的生活---考研路上的励志鸡汤
  5. java调用go接口_go语言调用API实线分词
  6. CS231n Convolutional Neural Networks for Visual Recognition------Scipy and MatplotlibTutorial
  7. IDEA---SpringBoot同一个项目多端口启动
  8. 编辑器内容FCKeditor的js验证以及FCKeditor内容是否为空判断
  9. 配置WIN2003远程桌面的客户端连接数
  10. 吴恩达|机器学习作业6.0支持向量机(SVM)
  11. 安全工具（免费杀毒软件Avast、免费防火墙费尔、免费木马清理工具arswp,AVG/Ewido，超级兔子）...
  12. 【352】矩阵转置性质
  13. 计算机网络和智能家居,智能家居与传统智能家居到底有什么区别
  14. 如何获取微信小店小程序的AppID
  15. 更改绩效管理流程的5个步骤
  16. 启动mongodb报错：waiting for connections on port 27017 解决方案
  17. 键盘录入一个字符串，统计该字符串中的大写字母、小写字母、数字字符和其他字符分别有多少个 例如，键盘录入abcABCD12345!@#$%，输出结果为：小写字母有3个，大写字母有4个，数字字符有5个，
  18. c语言链表删除重复点,【图片】想问一道链表题，如何删除重复元素【c语言吧】_百度贴吧...
  19. java初学者必读-经验总结--经典!
  20. 数学建模国赛美赛(MCM/ICM)赛前准备及比赛过程节奏分享

热门文章

  1. Python求最大公约数的五种常见方法
  2. 数据结构详解——最大（小）左倾树
  3. 11关于FFmpeg的dump打印出来的tbc,tbn,tbr的解释
  4. Linux无法删除只读文件的解决方案
  5. 计算机中各成绩所占成绩的比例计算方法,考研总成绩的计算方法和各科分数的比例占多少？...
  6. 用python快速群发邮件
  7. vuepress（六）阿里云二级域名配置与添加SSL证书
  8. 牛客网java_牛客网笔试Java输入输出救命模版
  9. 前端图像处理之马赛克
  10. openjudge 丛林中的路