老師，為什么打開時(shí)黑的，隨便按一下就回到原樣了
應(yīng)該只有背景黑啊
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--bootstrap不支持IE，此代碼在IE運(yùn)行最新的兼容模式-->
? ? <meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移動瀏覽顯示-->
? ? <title>現(xiàn)代瀏覽器博物館</title>
? ? <!--bootstrap工作原理：行必須包含著container中，在行中組建一組列，內(nèi)容放置在列中，只有列可以作為行的直接子元素-->
? ? <!-- Bootstrap -->
<link rel="stylesheet">
? ? <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
? ? <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
? ? <!--[if lt IE 9]>
? ? ? <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
? ? ? <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
? ? <![endif]-->
? ? <style>
? ? body{
? ? ?padding-top: 50px;
? ? ?padding-bottom:50px;
? ? ?}/*因?yàn)閚avbar-fixed-up占50px會遮住body*/
? ? .carousel{
? ? ?height: 500px;background-color: #000;margin-bottom: 60px;
? ? }
? ? .carousel .item{
? ? ?height: 500px;background-color: #000;
? ? }
? ? .carousel img{
? ? ?width: 100%;
? ? }
? ? .carousel-caption p{
? ? ?margin-bottom: 20px;font-size: 20px;line-height: 1.8;
? ? }
? ? #summary-container .col-md-4{
? ? ?text-align: center;
? ? }
? ? hr.divider{
? ? ?margin: 40px 0px;
? ? }
? ? .tab-content h2{?
? ? ?margin-top: 150px;
? ? ?color: #1E90FF;
? ? }
? ? </style>
? </head>
? <body>
?<!--********************************導(dǎo)航條******************************************-->
? ? <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
? <div><!--2選1 container代表固定居中；container-fluid代表自適應(yīng)-->
? ? <!-- Brand and toggle get grouped for better mobile display -->
? ? <div><!--表示小視口時(shí)顯示為collapse圖標(biāo)，點(diǎn)擊會顯示class=collapse所包裹的內(nèi)容-->
? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
? ? ? ? <span>Toggle navigation</span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? </button>
? ? ? <!--<img alt="Brand" src="images/opera-logo.jpg" width="10px" height="10px">-->
? ? ? <a href="#">現(xiàn)在瀏覽器博物館</a>
? ? </div>
? ? <!-- Collect the nav links, forms, and other content for toggling -->
? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
? ? ? <ul class="nav navbar-nav">
? ? ? ? <li><a href="#">綜述</a></li>
? ? ? ? <li><a href="#">簡述</a></li>
? ? ? ? <li>
? ? ? ? ? <a href="#" data-toggle="dropdown">特點(diǎn) <span></span></a>
? ? ? ? ? <ul role="menu">
? ? ? ? ? ? <li><a href="#">Chrome</a></li>
? ? ? ? ? ? <li><a href="#">Firefox</a></li>
? ? ? ? ? ? <li><a href="#">Safari</a></li>
? ? ? ? ? ? <li><a href="#">Opera</a></li>
? ? ? ? ? ? <li><a href="#">IE</a></li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li><a href="#" data-toggle="modal" data-target="#about">關(guān)于</a></li>
? ? ? </ul>
? ? </div><!-- /.navbar-collapse -->
? </div><!-- /.container-fluid -->
</nav><!--導(dǎo)航條 -->
?<!--********************************滾動廣告******************************************-->
<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="3"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="4"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="5"></li>
? </ol>
? <!-- Wrapper for slides -->
? <div role="listbox">
? ? <div class="item active">
? ? ? <img src="images/Chrome-big.jpg" alt="0 slide">
? ? ? <div>
? ? ? ? <h1>Chrome</h1>
? ? ? ? <p>Google Chrome是一款快速、簡單且安全的網(wǎng)絡(luò)瀏覽器,能很好地滿足新型網(wǎng)站對瀏覽器的要求。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a><br>
? ? ? ? </div>
? ? </div>
<div>
? ? ? <img src="images/Firefox-big.jpg" alt="1 slide">
? ? ? <div>
? ? ? ? <h1>Firefox</h1>
? ? ? ? <p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”（正式縮寫為 Fx，非正式縮寫為FF），是一個(gè)開源網(wǎng)頁瀏覽器，使用Gecko引擎，支持多種操作系統(tǒng)，如Windows、Mac和Linux。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a><br>
? ? ? ? </div>
? ? </div>
? ? <div>
? ? ? ? ? <img src="images/safari-big.jpg" alt="2 slide">
? ? ? <div>
? ? ? ? <h1>Sarafi</h1>
? ? ? ? <p>Safari，是蘋果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a><br>
? ? ? ? </div>
? ? </div>
? ? <div>
? ? ? ?<img src="images/opera-big.jpg" alt="3 slide">
? ? ? <div>
? ? ? ? <h1>Opera</h1>
? ? ? ? <p>Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a><br>
? ? ? ? </div>
? ? </div> ??
? ? <div>
? ? ? ?<img src="images/ie-big.jpg" alt="4 slide">
? ? ? <div>
? ? ? ? <h1>IE</h1>
? ? ? ? <p>nternet Explorer，原稱Microsoft Internet Explorer和Windows Internet Explorer，是微軟公司推出的一款網(wǎng)頁瀏覽器。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a><br>
? ? ? ? </div>
? ? </div>
? ? ...
? </div>
? <!-- Controls -->
? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
? ? <span class="glyphicon glyphicon-chevron-left"></span>
? ? <span>Previous</span>
? </a>
? <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
? ? <span class="glyphicon glyphicon-chevron-right"></span>
? ? <span>Next</span>
? </a>
</div><!--滾動廣告-->
?<!--*******************************柵格系統(tǒng)******************************************-->
?<div id="summary-container">
? <div>
? ?<div>
? ? ? <img src="images/Chrome-logo-small.jpg">
? ? ? ? <h1>Chrome</h1>
? ? ? ? <p>Google Chrome是一款快速、簡單且安全的網(wǎng)絡(luò)瀏覽器,能很好地滿足新型網(wǎng)站對瀏覽器的要求。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a>
? ? </div>
?
? ? <div>
? ? ? ?<img src="images/Firefox-logo-small.jpg">
? ? ? ? <h1>Firefox</h1>
? ? ? ? <p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”（正式縮寫為 Fx，非正式縮寫為FF）。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a>
? ? ?</div>
? ?<div>
? ? ? ?<img src="images/safari-logo-small.jpg">
? ? ? <div>
? ? ? ? <h1>Sarafi</h1>
? ? ? ? <p>Safari，是蘋果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。</p>
? ? ? ? <a class="btn btn-primary" >
? ? ? ? ?點(diǎn)擊下載
? ? ? ? </a>
? ? ?</div>
</div>
? ?</div><!--row-->
? ?<hr>
</div><!--container--><!--柵格系統(tǒng)-->
?<!--*******************************標(biāo)簽頁******************************************-->
<div>
<ul class="nav nav-tabs" role="tablist">
? <li><a role="tab" data-toggle="tab" href="#tab-Chrmoe">Chrome</a></li>
? <li ><a role="tab" data-toggle="tab" href="#tab-Firefox">Firefox</a></li>
? <li ><a role="tab" data-toggle="tab" href="#tab-Opera">Opera</a></li>
? <li ><a role="tab" data-toggle="tab"href="#tab-Safari">Safari</a></li>
? <li ><a role="tab" data-toggle="tab" href="#tab-IE">IE</a></li>
</ul>
<div>
<div class="tab-pane active" id="tab-Chrmoe">
<div>
<img src="images/Chrome-logo.jpg">
</div>
<div>
<h2>Chrome</h2>
<p>Google Chrome，又稱Google瀏覽器，是一個(gè)由Google（谷歌）公司開發(fā)的網(wǎng)頁瀏覽器。該瀏覽器是基于其他開源軟件所撰寫，包括WebKit，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且有效率的使用者界面。軟件的名稱是來自于稱作Chrome的網(wǎng)絡(luò)瀏覽器圖形使用者界面（GUI）。軟件的beta測試版本在2008年9月2日發(fā)布，提供50種語言版本，有Windows、Mac OS X、Linux、Android、以及iOS版本提供下載。2013年9月，Chrome已達(dá)全球份額的43%，成為全球使用最廣的瀏覽器。</p>
</div>
</div>
<div id="tab-Firefox">
<div>
<h2>Firefox</h2>
<p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”（正式縮寫為 Fx，非正式縮寫為FF），是一個(gè)開源網(wǎng)頁瀏覽器，使用Gecko引擎，支持多種操作系統(tǒng)，如Windows、Mac和Linux。Firefox由Mozilla基金會與社區(qū)數(shù)百個(gè)志愿者以GPL/LGPL/MPL三種授權(quán)方式發(fā)布，2012年1月3日起改用兼容GPL的MPL 2。
據(jù)2013年8月瀏覽器統(tǒng)計(jì)數(shù)據(jù)，F(xiàn)irefox在全球網(wǎng)頁瀏覽器市占率76%至81%，用戶數(shù)在各網(wǎng)頁瀏覽器中排名第三，全球估計(jì)有6450萬位用戶。在印度尼西亞、德國和波蘭的占有率最高，分別為97.84%、86.41%和84.31%</p>
</div>
<div>
<img src="images/firefox-logo.jpg">
</div>
</div>
<div id="tab-Opera">
<div>
<img src="images/opera-logo.jpg">
</div>
<div>
<h2>Opera</h2>
<p>全球最流行的手機(jī)瀏覽器 — Opera的中文版本！歐朋手機(jī)瀏覽器是體積輕小而功能強(qiáng)大的新一代手機(jī)瀏覽器。支持五大操作系用：安卓，iOS，塞班，JAVA，黑莓。有三個(gè)版本，最基本的歐朋手機(jī)瀏覽器，新一代歐朋瀏覽器（BETA，基于WebKit內(nèi)核的Android瀏覽器的Beta版本），歐朋HD。</p>
</div>
</div>
<div id="tab-Safari">
<div>
<h2>Safari</h2>
<p>afari，是蘋果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。
Safari,蘋果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中新的瀏覽器，用來取代之前的Internet ExplorerforMac。Safari使用了KDE的KHTML作為瀏覽器的計(jì)算核心。 該瀏覽器已支持Windows平臺，但是與運(yùn)行在Mac OS X上的safari相比，有些功能出現(xiàn)丟失。Safari也是iPhone手機(jī)、iPodTouch、iPad平板電腦中iOS指定默認(rèn)瀏覽器。
Safari 是一款瀏覽器、一個(gè)平臺，也是對銳意創(chuàng)新的公開邀請。無論在 Mac、PC 或 iPod touch 上運(yùn)行，Safari 都可提供極致愉悅的網(wǎng)絡(luò)體驗(yàn)方式，更不斷地改寫瀏覽器的定義。</p>
</div>
<div>
<img src="images/Safari-logo.jpg">
</div>
</div>
<div id="tab-IE">
<div>
<img src="images/ie-logo.jpg">
</div>
<div>
<h2>IE<small>你懂的</small></h2>
<p>Internet Explorer，原稱Microsoft Internet Explorer和Windows Internet Explorer，是微軟公司推出的一款網(wǎng)頁瀏覽器。
2014年8月，微軟內(nèi)部考慮為IE瀏覽器更名的問題，但從網(wǎng)民中的聲音可以看出人們對其的使用效果并不會立馬改觀。</p>
</div>
</div>
</div>
</div>
<!--標(biāo)簽頁-->
<!-- error log
role="tab" data-toggle="tab"用于a標(biāo)簽實(shí)現(xiàn)切換，用在li標(biāo)簽是錯誤的；
通過設(shè)置nav-tabs的href="#..." 與tab-content的id="..."實(shí)現(xiàn)對應(yīng)
?-->
? <!--*******************************頁腳******************************************-->
<hr>
<footer>
<p><a href="#top">回到頂部 </a></p>
<p >@2014 only for test</p>
</footer>
?<!--*******************************彈出框******************************************-->
<div class="modal fade" id="about">
? <div>
? ? <div>
? ? ? <div>
? ? ? ? <button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span>Close</span></button>
? ? ? ? <h4>Modal title</h4>
? ? ? </div>
? ? ? <div>
? ? ? ? <p>One fine body…</p>
? ? ? </div>
? ? ? <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><!-- /.modal-content -->
? </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
? ? <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
? ? <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
? ? <!-- Include all compiled plugins (below), or include individual files as needed -->
? ? <!-- <script src="js/bootstrap.min.js"></script> -->
? ? <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
? </body>?
</html>
2016-01-29
<div class="modal fade" id="about">
? ?<div class="modal-dialog">
? ? ? ?<div class="modal-content">
代碼中類名 .modal-dialog和 .modal-content 不能少，這兩個(gè)是必須有的