HTML+CSS3+JavaScript美丽家乡.zip资源-CSDN文库

共58个文件

jpg：22个

png：17个

html：6个

HTML

需积分: 11 50 浏览量 2022-12-27 16:07:07 上传评论 1 收藏 15.32MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

美丽家乡.zip （58个子文件）

美丽家乡02

lightbox-plus-jquery.min.js 91KB

responsiveslides.min.js 3KB

jquery-1.11.1.min.js 94KB

follow-me.html 4KB

tell.html 6KB

css

style.css 30KB

pics.css 2KB

bootstrap.css 118KB

lightbox.css 4KB

index.html 10KB

contact.html 4KB

history.html 9KB

.project 1KB

images

laba.jpg 75KB

handie1.jpg 63KB

10.png 460KB

9.png 509KB

food8.jpg 69KB

prev.png 1KB

3.png 1.45MB

6.jpg 2.06MB

banner.jpg 405KB

fo4.PNG 475KB

12.png 662KB

culture03.jpg 26KB

phone.png 3KB

culture04.jpg 64KB

social.png 5KB

1.png 521KB

next.png 1KB

food6.jpg 41KB

culture02.jpg 48KB

food4.jpg 63KB

timg.jpg 117KB

11.png 526KB

hd.jpg 41KB

food5.jpg 42KB

5.jpg 1.87MB

culture01.jpg 35KB

fo3.PNG 453KB

handie2.jpg 56KB

close.png 280B

location.png 3KB

top.png 3KB

food12.jpg 35KB

4.png 1.45MB

food2.jpg 32KB

food11.jpeg 65KB

food9.jpg 47KB

2.png 1.26MB

food10.jpg 65KB

food3.jpg 43KB

food7.jpg 78KB

food.html 7KB

video

wu.mp4 2.13MB

fonts

glyphicons-halflings-regular.woff 23KB

Dorsa-Regular.ttf 20KB

OpenSans-Regular.ttf 212KB

<!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' />  <link href="css/style.css" rel='stylesheet' type='text/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>  <div class="banner">  <div class="container"> <div class="header"> <div class="logo"> <a href="index.html">信阳</a> </div> <div class="icons"> <ul> <li><a href="#" class="facebook"> </a></li> <li><a href="#" class="facebook twitter"> </a></li> <li><a href="#" class="facebook chrome"> </a></li> <li><a href="#" class="facebook dribbble"> </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="food.html">信阳美食</a></li> <li><a href="#news" class="scroll">景区公告</a></li> <li><a href="contact.html">联系我们</a></li> </ul>  <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script>  </div> </div>  <div class="banner-text">  <div class="container"> <ul> <li>信阳地处大别山革命老区核心区域，被誉为“红军的摇篮、将军的故乡”,</br>信阳所产的信阳毛尖闻名遐迩，因此又被誉为山水茶都、“中国毛尖之都”。</li> </ul> </div>  </div> </div>   <div class="banner-top-slide"> <div class="banner-bottom-top"> <h4>全民抗疫</h4> <p>团结一致，万众一心，早日战胜疫情，中国加油</p> </div> <div class="banner-bottom-bottom"> <div class="banner-top-slide-grids"> <script src="js/responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow 4 $("#slider3").responsiveSlides({ auto: true, pager: true, nav: false, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script> <div id="top" class="callbacks_container"> <ul class="rslides" id="slider3"> <li> <div class="banner-slid"> <h3>同舟共济</h3> <p>居家隔离，减少外出，就是最好的防护;</br> 听从号召尽量待在家中，不串门不聚会;</br>正确佩戴口罩，做好防护，养成良好卫生习惯。 </p> </div> </li> <li> <div class="banner-slid"> <h3>坚定信心</h3> <p>科学宣传疫情防护知识，提高公众自我保护意识;</br> 加强防控，一起加油。众志成城，抗击疫情;</br> 疫情就是命令，防控就是责任。 </p> </div> </li> </ul> </div> </div> </div> </div>   <div class="welcome">  <div class="container"> <div class="welcome-info"> <h3>Hello there!</h3> <h5>打卡美丽信阳的正确姿势</h5> <h4>你要不要跟我走？  <a href="follow-me.html">嗯，点这里>></a></h4> </div> </div>  </div>  <div class="copyrights">Collect from </div>  <div class="banner-bottom">  <div class="container"> <div class="banner-bottom-info"> <h3>信阳年习俗</h3> <p><a href="handie.html">更多>></a></p> </div> <div class="banner-bottom-grids"> <div class="col-md-6 banner-bottom-grid"> <div class="col-md-5 banner-bottom-left"> <img src="images/5.jpg" alt=""> </div> <div class="col-md-7 banner-bottom-right"> <h4>吃汤圆</h4> <p>民间有“吃了汤圆大一岁”之说。古人有诗云:“宁波家家捣米做汤圆，知足常乐又一天。”元宵节吃汤圆:这种食品，最早叫“浮元子”后称“汤圆”，又称元宵;"汤圆"以芝麻、豆沙、核桃仁、果仁、枣泥等为馅料，用糯米粉包成圆形，可荤可素，风味各异。可汤煮、油炸、蒸食，有团圆美满之意。</p> </div> <div class="clearfix"> </div> </div> <div class="col-md-6 banner-bottom-grid"> <div class="col-md-5 banner-bottom-left"> <img src="images/6.jpg" alt=""> </div> <div class="col-md-7 banner-bottom-right"> <h4>贴春联</h4> <p>春联，又叫“春贴”、“门对”、“对联”，是过年时所贴的红色喜庆元素“年红”中一个种类。它以对仗工整、简洁精巧的文字描绘美好形象，抒发美好愿望，是中国特有的文学形式，是我们过年的重要习俗。当人们在自己的家门口贴年红（春联和福字等）的时候，意味着过春节正式拉开序幕。</p> </div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> </div>  </div>   <div id="news" class="news"> <div class="container"> <div class="news-text"> <h3>信阳景区</h3> </div> <div class="news-grids"> <div class="col-md-3 news-grid"> <h4>西九华山</h4> <span>2022.10.01</span> <img src="images/1.png" alt=""> <div class="news-info"> <p>西九华山为地藏王菩萨道场，分为东九华和西九华，东九华山在安徽池州，一般介绍地藏王菩萨道场时均以安徽九华山介绍，所以东九华山广为人知，而西九华山却默默无闻。山，西北与柏全山相望。芦草坛虽不雄伟壮观，却也峻峭，人若站于其顶眺望，视野倒也开阔，更因其西峰寺而遐迩闻名。</p> </div> </div> <div class="col-md-3 news-grid"> <h4>鸡公山</h4> <span>2022.10.01</span> <img src="images/2.png" alt=""> <div class="news-info"> <p>鸡公山，位于河南省信阳市境内，桐柏山以东，大别山最西端，是中国四大避暑胜地之一，第一批列入全国44个国家级重点风景名胜区之一，鸡公山是国家级自然保护区，区内森林茂密、生物资源丰富，有国家重点保护动植物大鲵、长尾雉、香果树等，是河南农林、师范、医药等高校教学和科研基地。</p> </div> </div>

评论收藏

内容反馈