<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>现代浏览器博物管</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
body{
padding-top:50px;
font-family:"微软雅黑";
padding-bottom:40px;
}
.carousel {
height:500px;
background-color:#000;
margin-bottom:50px;
}
.carousel .item {
height:500px;
background-color:#000;
}
.carousel img {
width:100%;
}
.carousel-caption p {
margin-bottom:20px;
font-size:20px;
line-height:30px;
}
@media (max-width: 768px) {
.carousel {
height: 300px;
margin-bottom: 30px;
}
.carousel .item {
height: 300px;
}
.carousel img {
min-height: 300px;
}
}
#summary-container .col-md-4 {
text-align: center;
}
hr.divider {
margin:40px 0;
}
.feature {
padding:30px 0;
}
.feature-heading {
font-size:40px;
color:#2a6496;
margin-top:20px;
}
.feature-heading .text-muted {
font-size:28px;
color:#ddd;
}
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="back-top"></div>
<!--顶部导航-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">现代浏览器博物馆</a>
</div>
<div class="collapse navbar-collapse" id="demo-navbar">
<ul class="nav navbar-nav">
<li><a href="#">综述</a></li>
<li><a href="#">简述</a></li>
<li>
<a href="#" data-toggle="dropdown">特点<span></span></a>
<ul role="menu">
<li>Dropdown header</li>
<li><a href="#tab-Chrome">Chrome</a></li>
<li><a href="#tab-firefox">Firefox</a></li>
<li><a href="#tab-opera">Opera</a></li>
<li></li>
<li><a href="#tab-safari">Safari</a></li>
<li><a href="#tab-ie">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div>
<input type="text" placeholder="用户名" />
<input type="text" placeholder="密码" />
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</nav>
<!--轮播图片-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol>
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div role="listbox">
<div class="item active">
<img src="images/ban_01.jpg" alt="轮播图1" />
<div>
<p>轮播图1介绍</p>
<p><a class="btn btn-lg btn-primary" href="#" target="_blank" role="button">点我下载</a></p>
</div>
</div>
<div>
<img src="images/ban_02.jpg" alt="轮播图2" />
<div>
<p>轮播图2介绍</p>
<p><a class="btn btn-lg btn-primary" href="#" target="_blank" role="button">点我下载</a></p>
</div>
</div>
<div>
<img src="images/ban_03.jpg" alt="轮播图3" />
<div>
<p>轮播图3介绍</p>
<p><a class="btn btn-lg btn-primary" href="#" target="_blank" role="button">点我下载</a></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span>上一页</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span>下一页</span>
</a>
</div>
<!--三栏简介（栅格布局）-->
<div id="summary-container">
<div>
<div>
<img src="images/xiaoQX-01.jpg" alt="01" />
<h2>小清新01</h2>
<p>小清新小清新小清新小清新</p>
<p><a class="btn btn-default" href="#" role="button">下载</a></p>
</div>
<div>
<img src="images/xiaoQX-02.jpg" alt="02" />
<h2>小清新02</h2>
<p>小清新小清新小清新小清新</p>
<p><a class="btn btn-default" href="#" role="button">下载</a></p>
</div>
<div>
<img src="images/xiaoQX-03.jpg" alt="03" />
<h2>小清新03</h2>
<p>小清新小清新小清新小清新</p>
<p><a class="btn btn-default" href="#" role="button">下载</a></p>
</div>
</div>
<hr>
<!--标签页 Tabs-->
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tab-list">
<li role="presentation"><a href="#tab-Chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li>
<li role="presentation"><a href="#tab-firefox" aria-controls="profile" role="tab" data-toggle="tab">firefox</a></li>
<li role="presentation"><a href="#tab-safari" aria-controls="messages" role="tab" data-toggle="tab">safari</a></li>
<li role="presentation"><a href="#tab-opera" aria-controls="settings" role="tab" data-toggle="tab">opera</a></li>
<li role="presentation"><a href="#tab-ie" aria-controls="settings" role="tab" data-toggle="tab">ie</a></li>
</ul>
<!-- Tab panes -->
<div>
<div role="tabpanel" class="tab-pane active" id="tab-Chrome">
<div class="row feature">
<div>
<h2>Google Chrome<span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器，该浏览器是基于其他开源软件所撰写的，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/ban_01.jpg" alt="Chrome" />
</div>
</div>
</div>
<div role="tabpanel" id="tab-firefox">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/ban_02.jpg" alt="firefox" />
</div>
<div>
<h2>firefox<span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器，该浏览器是基于其他开源软件所撰写的，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
</div>
</div>
<div role="tabpanel" id="tab-safari">
<div class="row feature">
<div>
<h2>safari<span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器，该浏览器是基于其他开源软件所撰写的，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/ban_03.jpg" alt="safari" />
</div>
</div>
</div>
<div role="tabpanel" id="tab-opera">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/ban_01.jpg" alt="opera" />
</div>
<div>
<h2>opera<span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器，该浏览器是基于其他开源软件所撰写的，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
</div>
</div>
<div role="tabpanel" id="tab-ie">
<div class="row feature">
<div>
<h2>ie<span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器，该浏览器是基于其他开源软件所撰写的，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/ban_02.jpg" alt="ie" />
</div>
</div>
</div>
</div>
<hr>
<!--底部信息-->
<footer>
<p><a href="#back-top">回到顶部</a></p>
<p>© 20151218</p>
</footer>
</div>
<!--弹出框-->
<div class="modal fade" id="about">
<!--弹出框遮罩-->
<div>
<!--弹出框内容-->
<div>
<!--model header-->
<div>
<button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span>Close</span></button>
<h4>关于</h4>
</div>
<!--modal body-->
<div>
<form class="navbar-form navbar-right" role="search">
<div>
<input type="text" placeholder="用户名" />
<input type="text" placeholder="密码" />
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
<!--modal footer-->
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
#("#demo-navbar .dropdown-menu a").click(function(){
var href = $(this).attr("href");
$("#tab-list a[href='" + href + "']").tab("show");
});
});
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消