<!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">
<!--css-->
<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">
<!--js-->
<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=================================-->
<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>
<!--==============================content=================================-->
<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="border-horiz"></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">
西藏，中国的神秘之地，拥有壮丽的自然风光和丰富的文化遗产�
建筑博物馆首页 HTML+CSS+js 完整代码（轮播图+瀑布流）
5星 · 超过95%的资源 需积分: 0 8 浏览量
2023-12-28
21:41:40
上传
评论 4
收藏 5.76MB ZIP 举报 
建筑博物馆.zip （45个子文件） 
建筑博物馆 js 
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资源评论
tuihgghs2023-12-29#完美解决问题 #运行顺畅 #内容详尽 #全网独家 #注释完整 代码思路清晰，逻辑严谨，网页布局完美！- qwertyUI1236662023-12-29#完美解决问题 #运行顺畅 #内容详尽 #全网独家 #注释完整 只有好能形容了 感谢博主！
- 2302_763110172023-12-29#完美解决问题 #运行顺畅 #内容详尽 #全网独家 #注释完整 网页yyds ！
