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

news2024/11/27 8:47:37

文章目录

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

前言：

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

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

描述：

本项目包括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>