admin管理员组文章数量:1794759
学生DW静态网页设计 旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
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='fonts.googleapis/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <link href='fonts.googleapis/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, accordion width: 'auto', //auto or any width like 600px fit: true // 100% fit in a container }); }); </script> </div> </div> </div> <!-- //portfolio --> <!-- contact --> <div class="contact" id="contact"> <iframe src="www.google/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">info@example</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 © 2016.Company name All rights reserved.More Templates <p>Copyright © 2018.Company name All rights reserved.More Templates <a href="www.xinmi/" target="_blank" title="xinmi">新密</a> - Collect from <a href="www.xinmi/" 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 id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>**/--> </body> </html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识! 相关问题可以相互学习，可关注↓公Z号 获取更多源码
版权声明：本文标题：学生DW静态网页设计 旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686573680a83407.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论