网页设计期末建筑博物馆首页 HTML+CSS+js 完整代码（轮播图+瀑布流）

文章目录

前言：
- 完整代码在总结处跳转！！！
描述：
结果展示：
部分代码演示：（完整代码在总结处跳转）
总结：（完整代码在此处跳转）

前言：

此篇为作者网页期末设计，现在无偿分享给大家。
——————————————————————————————————
① 注意！注意！注意！此篇只有首页！
——————————————————————————————————
② 此项目主题为建筑博物馆读者也可以自行更改。
——————————————————————————————————
③ 此项目所涉及的技术有：轮播图、瀑布流。
——————————————————————————————————

完整代码在总结处跳转！！！

描述：

本项目包括css、html、js、images和dist（实现瀑布流的css和js）。

完整代码在总结处跳转，此项目无偿分享，大家可点击下载。（为压缩包）

结果展示：

在这里插入图片描述

部分代码演示：（完整代码在总结处跳转）

部分css代码展示：

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display: block;
}
mark, rp, rt, ruby, summary, time {display: inline
}
/* Global properties ======================================================== */
body {	font-family: 'PT Serif Caption', serif;font-size:14px;line-height:24px;color:brown;min-width:100%;background:url(../images/bg-body.gif) #e6e4d7;/* text-transform:uppercase */
}
footer {  background-color: brown;  
}
html, body {height:100%;
}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;padding:0;overflow:hidden
}
p {padding-bottom:18px;}a {color:#fff;text-decoration:none;
}.giao{color: white;float: right;
}h1 {float:left;display:block;position:relative;z-index:10;
}h1 a {display:block;
}

部分html代码展示：

<!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>