【免费】建筑博物馆首页HTML+CSS+js完整代码（轮播图+瀑布流）资源-CSDN文库

共45个文件

jpg：12个

png：10个

css：9个

html

javascript

5星 · 超过95%的资源需积分: 0 7 浏览量 2023-12-28 21:41:40 上传评论 8 收藏 5.76MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

建筑博物馆.zip （45个子文件）

建筑博物馆

jquery-1.7.1.min.js 92KB

jquery.flexslider-min.js 16KB

superfish.js 5KB

dist

sortable.min.js 4KB

sortable.css 250B

sortable.min.css 311B

sortable.js 5KB

css

style.css 12KB

main.css 2KB

flexslider.css 2KB

reset.css 912B

grid.css 5KB

ie.css 338B

htmleaf-demo.css 6KB

index.html 10KB

images

b1.jpg 840KB

tail-cont.gif 7KB

marker-1.png 1KB

d8.jpg 197KB

b2.jpg 420KB

prev.png 2KB

d4.jpg 249KB

logo.png 7KB

icon-2.png 2KB

d3.jpg 565KB

d6.jpg 578KB

quote-part.png 1KB

icon-1.png 1KB

d7.jpg 93KB

next.png 2KB

d5.jpg 1.45MB

tail-bg-footer.gif 1KB

d1.jpg 252KB

favicon.ico 5KB

d9.jpg 490KB

tail-item.gif 2KB

116.jpg 25KB

border-horiz.gif 1KB

line-top.gif 1KB

d2.jpg 624KB

icon-4.png 2KB

point.png 922B

tail-header.gif 7KB

icon-3.png 2KB

bg-body.gif 4KB

<!DOCTYPE html> <html lang="en"> <head> <title>建筑博物馆</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link href='http//fonts.googleapis.com/css?family=PT+Serif+Caption:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="./css/main.css"> <link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet"> <link rel="stylesheet" href="./dist/sortable.min.css">  <script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript" src="js/jquery.flexslider-min.js"></script> <script type="text/javascript" src="./dist/sortable.min.js"></script> <script> jQuery(window).load(function() { jQuery('.flexslider').flexslider({ animation: "fade", slideshow: true, slideshowSpeed: 7000, animationDuration: 600, prevText: "", nextText: "", controlNav: false }) }); </script> </head> <body>  <header> <div class="main"> <div class="row-top"> <h1><a href="index.html"><img alt="" src="images/116.jpg" height="60" width="150"> </a></h1> <nav> <ul class="sf-menu"> <li class="active"><a href="index.html">首页</a></li> <li><a href="index-1.html">导览</a> </li> <li><a href="index-2.html">展览</a> </li> <li><a href="index-3.html">学术</a> </li> <li><a href="index-4.html">文创</a> </li> <li><a href="index-5.html">关于</a> </li> </ul> </nav> <div class="clear"></div> </div> </div> <div class="box-slider"> <div class="flexslider"> <ul class="slides"> <li> <img alt="" src="images/b1.jpg" height="700" width="1515"></li> <li> <img alt="" src="images/b2.jpg" height="700" width="1515"></li> </ul> </div> </div> <div class="box-slogan"> <h3> 欢迎来到建筑博物馆 ! </h3> <p> 这些<a href="#" class="link-1">建筑</a>不仅见证了历史的变迁，更是一座座艺术宝库。每一砖每一瓦都透露着匠心独运，展现出古人的智慧与追求。</p> </div> </header>  <section id="content"><div class="ic">More Website Templates @ TemplateMonster.com. December03, 2012!</div> <div class="border-horiz"></div> <div class="container_12 row-1"> <div class="clear"></div> </div>  <div class="container_12"> <div class="htmleaf-container"> <main class="sortable"> <div class="container"> <div class="wrapper"> <ul class="sortable__nav nav"> <li><a data-sjslink="all" class="nav__link">所有</a></li> <li><a data-sjslink="flatty" class="nav__link">排名</a></li> <li><a data-sjslink="funny" class="nav__link">热度</a></li> </ul> <div id="sortable" class="sjs-default"> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="images/d1.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">北京</h2> <p class="card__text"> 北京，中国的首都，千年古都的韵味与现代都市的活力交织。历史与现代在这里交融，文化与科技在这里碰撞，古老与年轻在这里共舞。这里是梦想的起点，也是历史的见证。 </p> </div> </div> </div> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="images/d3.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">大连</h2> <p class="card__text"> 大连，中国的海滨城市，拥有独特的魅力。这里既有丰富的海洋资源，又有独特的欧式风情。时尚、浪漫、宜居，这里是人们向往的旅游胜地，也是一座充满活力的现代化城市。 </p> </div> </div> </div> <div data-sjsel="funny"> <div class="card"> <img class="card__picture" src="images/d2.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">上海</h2> <p class="card__text"> 上海，中国的经济中心，融合了东西方的文化与现代都市的魅力。这里的高楼大厦、繁华商业街与老式里弄交织成一幅独特的画卷，展现了上海的繁荣与活力。。 </p> </div> </div> </div> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="images/d4.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">重庆</h2> <p class="card__text"> 重庆，中国的山城，拥有独特的地理环境和丰富的文化底蕴。这里的火锅、夜景和山城步道，让人流连忘返。现代化的城市与古老的山城相互融合，展现出独特的魅力。 </p> </div> </div> </div> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="images/d5.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">哈尔滨</h2> <p class="card__text"> 哈尔滨，中国的冰雪之城，以其独特的欧式建筑和丰富的冰雪文化而闻名。这里的冬季雪景如诗如画，夏季则充满活力与热情。 </p> </div> </div> </div> <div data-sjsel="funny"> <div class="card"> <img class="card__picture" src="images/d6.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">大理</h2> <p class="card__text"> 大理，中国的历史文化名城，拥有美丽的自然风光和丰富的民族文化。这里的古城、洱海和苍山，共同描绘出一幅美丽的画卷。 </p> </div> </div> </div> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="images/d7.jpg" alt=""> <div class="card-infos"> <h2 class="card__title">西藏</h2> <p class="card__text"> 西藏，中国的神秘之地，拥有壮丽的自然风光和丰富的文化遗产�

评论收藏

内容反馈