<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- jQuery (necessary JavaScript plugins) -->
<script src="js/bootstrap.js"></script>
<!-- Custom Theme files -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Custom Theme files -->
<!--//theme-style-->
<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="Game Box 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" />
</head>
<body>
<!--
作者：742275749@qq.com
时间：2016-04-27
描述： 其他内容一个 层 底部自己一个层
-->
<div id="wrap">
<!-- header -->
<div class="top-banner">
<div class="header">
<div class="container">
<div class="headr-left">
<div class="social">
<a href="#"><i class="facebook"></i></a>
<a href="#"><i class="twitter"></i></a>
<a href="#"><i class="gplus"></i></a>
<a href="#"><i class="pin"></i></a>
<a href="#"><i class="youtube"></i></a>
</div>
<div class="search">
<form>
<input type="submit" value="">
<input type="text" value="" placeholder="Search...">
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="headr-right">
<div class="details">
<ul>
<li><a href="mailto@example.com"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>info(at)example.com</a></li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>(+1)000 123 456789</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="logo">
<a href="index.html"><h1>Gat<span>o</span></h1></a>
</div>
<span class="menu"></span>
<div class="top-menu">
<ul>
<nav>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="404.html">SERVICES</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="#blog" class="scroll">BLOG</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu" ).slideToggle( "slow", function() {
// Animation complete.
});
});
</script>
<!-- script for menu -->
<div class="clearfix"></div>
</div>
</nav>
</div>
<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
<li data-target="#ad-carousel" data-slide-to="1"></li>
<li data-target="#ad-carousel" data-slide-to="2"></li>
<li data-target="#ad-carousel" data-slide-to="3"></li>
<li data-target="#ad-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/chrome-big.jpg" alt="1 slide">
<div class="container">
<div class="carousel-caption">
<h1>Chrome</h1>
<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
role="button" target="_blank">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/firefox-big.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
<h1>Firefox</h1>
<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/safari-big.jpg" alt="3 slide">
<div class="container">
<div class="carousel-caption">
<h1>Safari</h1>
<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/opera-big.jpg" alt="4 slide">
<div class="container">
<div class="carousel-caption">
<h1>Opera</h1>
<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/ie-big.jpg" alt="5 slide">
<div class="container">
<div class="carousel-caption">
<h1>IE</h1>
<p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--带图片的内容-->
<div id="iconcontent">
<div class="welcome" id="about">
<div class="container">
<div class="welcome-top heading">
<h3>WELCOME</h3>
<p>Vivamus nec egestas sem. Duis libero diam, vulputate eget leo sed, pharetra placerat orci. Duis massa turpis, dictum sit amet gravida at, hendrerit a tortor. </p>
</div>
<div class="welcome-bottom">
<div class="col-md-4 welcome-left">
<span class="ship"></span>
<h4>Quisque magna purus</h4>
<p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p>
</div>
<div class="col-md-4 welcome-left">
<span class="air"></span>
<h4>Integer quis ante</h4>
<p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p>
</div>
<div class="col-md-4 welcome-left">
<span class="bus"></span>
<h4>Mauris eget molestie</h4>
<p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- 6个内容-->
<div id="content">
<div class="container">
<div class="row">
<div >
<ul class="thumbnails">
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/people.jpg" />
<div class="caption">
<h3>
冯诺尔曼结构
</h3>
<p>
也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/city.jpg" />
<div class="caption">
<h3>
哈佛结构
</h3>
<p>
哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/sports.jpg" />
<div class="caption">
<h3>
改进型哈佛结构
</h3>
<p>
改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<ul class="thumbnails">
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/people.jpg" />
<div class="caption">
<h3>
冯诺尔曼结构
</h3>
<p>
也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/city.jpg" />
<div class="caption">
<h3>
哈佛结构
</h3>
<p>
哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="images/sports.jpg" />
<div class="caption">
<h3>
改进型哈佛结构
</h3>
<p>
改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<!-- footer -->
<div id="footer">
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-3 ftr-info">
<h3>About Us</h3>
<p>Sed faucibus mollis laoreet. Sed vehicula faucibus tristique lectus a orci molestie finibus.
Suspendisse pharetra, metus sed rutrum pretium.</p>
</div>
<div class="col-md-3 ftr-grid">
<h3>Categories</h3>
<ul class="ftr-list">
<li><a href="#">Action</a></li>
<li><a href="#">Racing</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Bike</a></li>
</ul>
</div>
<div class="col-md-3 ftr-grid">
<h3>Platform</h3>
<ul class="ftr-list">
<li><a href="#">Pc</a></li>
<li><a href="#">Ps4</a></li>
<li><a href="#">XBOX 360</a></li>
<li><a href="#">XBOX ONE</a></li>
<li><a href="#">PSP</a></li>
</ul>
</div>
<div class="col-md-3 ftr-grid">
<h3>Information</h3>
<ul class="ftr-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Wish Lists</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!---->
<div class="copywrite">
<div class="container">
<p>Copyright © 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
</div>
</div>
<!---->
</div>
</body>
</html>
这个关键点 主要 是
底部自己一个层 然后 其他 都在一个层内。。
/*--控制底部 没有内容一直在底下--*/
#wrap { min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -317px;}
#push {padding-bottom: 317px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -317px; /* footer高度的负值 */
height: 317px;
clear:both;}
#push,
#footer {
height: 317px;
}
