HTML5期末大作业：我的家乡网站设计——旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML

文章目录

  • HTML5期末大作业：我的家乡网站设计——旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、获取更多源码

一、作品展示






二、文件目录

三、代码实现


<!DOCTYPE html>
<html>
<head>
<title>我的家乡新密</title>
<!-- for-mobile-apps -->
<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="Your Trip Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);function hideURLbar(){ window.scrollTo(0,1); }</script>
<!-- //for-mobile-apps -->
<link rel="stylesheet" href="css/Infini.css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.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>
<!-- start-smoth-scrolling -->
</head><body><header><img src="images/LOGO1.png" alt=""><!-- 导航部分 --><nav><ul><li><a href="index.html" class="active">首页</a></li><li><a href="about.html">关于新密</a></li><li><a href="classify.html">分类</a></li><li><a href="intro.html">景点简介</a></li><li><a href="#contact" class="scroll">联系我们</a></li>            </ul></nav></header><ul id="ul1"><li></li><li></li><li></li><li></li></ul>
<!-- //banner -->
<!-- portfolio --><div id="fen"></div><div class="portfolio"><div class="container"><h3>分类</h3><div class="portfolio-grids"><div class="sap_tabs">         <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;"><ul class="resp-tabs-list"><li class="resp-tab-item"><span><a href="classify.html">全部</a></span></li><li class="resp-tab-item"><span><a href="c1.html">标志建筑</a></span></li><li class="resp-tab-item"><span><a href="c2.html">最受欢迎</a></span></li><li class="resp-tab-item"><span><a href="c3.html">古代遗迹</a></span></li>                   </ul> <div class="clearfix"> </div>   <div class="resp-tabs-container"><div class="tab-1 resp-tab-content">                               <div class="main"><div class="view effect"><div class="img-top"><a href="images/9.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/9.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/10.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/12.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/12.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div> <div class="view effect"><div class="img-top"><a href="images/13.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/13.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/11.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/11.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/12.1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/12.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div>             <div class="clearfix"> </div><div class="view effect"><div class="img-top"><a href="images/13.1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/13.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/14.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/14.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/15.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/15.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div>                                    <div class="clearfix"> </div></div>                                                                                                                    </div><div class="tab-1 resp-tab-content">                             <div class="main"><div class="view effect"><div class="img-top"><a href="images/9.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/9.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/10.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/11.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/11.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div> </div></div><div class="tab-1 resp-tab-content">                              <div class="main"><div class="view effect"><div class="img-top"><a href="images/12.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/12.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/13.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/13.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/14.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/14.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div>   <div class="view effect"><div class="img-top"><a href="images/15.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/15.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/10.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div>  </div></div><div class="tab-1 resp-tab-content">                              <div class="main"><div class="view effect"><div class="img-top"><a href="images/11.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/11.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/12.1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/12.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div><div class="view effect"><div class="img-top"><a href="images/13.1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/13.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div>   <div class="view effect"><div class="img-top"><a href="images/15.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox"><img src="images/15.jpg" class="img-responsive" alt="" /><div class="mask"></div><div class="content"><span class="info" title="Full Image"> </span></div></a></div></div> </div></div></div></div></div><script src="js/easyResponsiveTabs.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {$('#horizontalTab').easyResponsiveTabs({type: 'default', //Types: default, vertical, accordionwidth: 'auto', //auto or any width like 600pxfit: true   // 100% fit in a container});});</script></div></div></div>
<!-- //portfolio -->
<!-- contact --><div class="contact" id="contact"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d16271316.765282348!2d-176.42968180551608!3d60.143570657527626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5400df9cc0aec01b%3A0xbcdb5e27a98adb35!2sAlaska%2C+USA!5e0!3m2!1sen!2sin!4v1448597600354" frameborder="0" style="border:0" allowfullscreen></iframe><div class="container"><h3>联系我们</h3><div class="col-md-4 contact-grid"><i class="glyphicon glyphicon-home" aria-hidden="true"></i><h4>Address</h4><p>JI.Paulnadwam 2nd D.No:23-50-903.<span>United States</span></p></div><div class="col-md-4 contact-grid"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><h4>Mail</h4><a href="mailto:info@example.com">info@example.com</a></div><div class="col-md-4 contact-grid"><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><h4>Phone</h4><p>+020 456 9696</p></div><div class="clearfix"> </div><!-- footer --><div class="footer-copy"><p>Copyright &copy; 2016.Company name All rights reserved.More Templates<p>Copyright &copy; 2018.Company name All rights reserved.More Templates<a href="http://www.xinmi.com/" target="_blank" title="xinmi">新密</a>- Collect from <a href="http://www.xinmi.com/" title="我的家乡" target="_blank">我的家乡</a></p></div></div></div><script src="js/bootstrap.js"></script><script type="text/javascript" src="js/infini.js"></script>
<!-- //for bootstrap working --><!--/**<script type="text/javascript">$(document).ready(function() {</h3>var defaults = {containerID: 'toTop', // fading element idcontainerHoverID: 'toTopHover', // fading element hover idscrollSpeed: 1200,easingType: 'linear' };$().UItoTop({ easingType: 'easeOutQuart' });});</script>**/-->
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码

学生DW静态网页设计 旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板相关推荐

  1. HTML+CSS大作业——旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板

    HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板 常见网页设计作业题材有 个人. 美 ...

  2. HTML5期末大作业：关于题介绍的网页作业——我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计

    HTML5期末大作业:关于家乡介绍的网页设计--我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设 ...

  3. Web前端大作业—个人网页(html+css+javascript)我的家乡新密 (15页)含课程设计

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

  4. HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板

    HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...

  5. B8HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板

    HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...

  6. HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板

    HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...

  7. HTML5期末大作业：动漫网站设计——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板

    HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...

  8. HTML5期末大作业：甜品蛋糕网站设计——甜品蛋糕网页设计(5页) 甜品网页设计制作 简单静态HTML网页作品 美食网页作业成品 学生水果生鲜网站模板

    HTML5期末大作业:甜品蛋糕网站设计--甜品蛋糕网页设计(5页) 甜品网页设计制作 简单静态HTML网页作品 美食网页作业成品 学生水果生鲜网站模板 常见网页设计作业题材有 个人. 美食. 公司. ...

  9. div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板

    HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ...

最新文章

  1. jQuery元素过滤
  2. PHP 和 ASP.NET的优势和弱点
  3. 网站运行java_定制化Azure站点Java运行环境(5)
  4. 重用生成的JAXB类
  5. php扑克牌排序,PHP实现判断扑克牌5张连续
  6. php getdbused,PHP之购物车
  7. Wix 安装部署（二）自定义安装界面和行为
  8. ZooKeeper 到底解决了什么问题？
  9. 为极致的视频体验而设计：facebook新一代存储平台Bryce Canyon架构
  10. 超详细JDK下载与安装步骤
  11. 计算机怎么知道用户名和密码,电脑的用户名和密码怎么查看
  12. 我那牛逼老公，创业成功但最后被辞退，仍然一毛钱股份没有拿到……
  13. 企业数字化/数智化转型（一）：数智力创新2.0
  14. C7:如何使用JEPG Simulation进行ColorTuning？
  15. ＜笔记本电脑设备管理器检测不到触控板，电脑触控板失灵＞
  16. dubbo(4) Dubbo源码解析之服务引入过程
  17. linux.x64_11gR2_database.zip下载
  18. 深度学习 （四）Keras利用CNN实现图片识别（Mnist、Cifar10）
  19. IHE（Integrating the Healthcare Enterprise）
  20. 蔻驰和mk哪个更大牌_mk包包属于什么档次 蔻驰和mk的包包哪个好

热门文章

  1. C# 导入（读取） WPS ET文件
  2. @Transactional(readOnly = true)
  3. C++ 二叉排序树（二叉查找树、二叉搜索树）
  4. 油猴脚本安装以及使用方法
  5. woff格式字体怎么打开和编辑？
  6. 【CF891E】Lust 生成函数
  7. 用c-lodop打印远端pdf
  8. 血小板细胞膜包载曲安奈德,阿帕替尼的PLGA纳米粒|血小板膜包裹载药多孔纳米颗粒
  9. 一个Html页面给另一个html页面传值(或B.html页面调用A.html的参数)
  10. nagios监控安装配置文档+139邮箱报警