為什么和老師的不一樣？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" >
<title>無標題文檔</title>
<style>
body{
? ? ?padding-top:50px;
}
.carousel{
? ? ?height:500px;
background-color:#000;
}
.carousel.item{
? ? ?height:500px;
background-color:#000;
}
.carousel.img{
? ? ?width:100%; ?
}
.carousel.caption p{
? ? ?margin-bottom:20px;
font-size:20px;
line-height:1.8;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
? ?<div class="container">
? ? <div class="navbar-header">
? ? ?<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
? ? ?<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span>
? ? ?<span class="icon-bar"></span><span class="icon-bar"></span></button>
? ? ?<a class="navbar-brand" href="#">騰訊NBA</a> ? ?
? ? </div>
? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
? ? ?<ul class="nav navbar-nav" style="font-size:25px;">
? ? ? <li ?id="one" class="active"><a href="#">馬刺</a></li>
? ? ? <li id="two"><a href="#">勇士</a></li>
? ? ? <li class="dropdown">
? ? ? ?<a href="#" class="dropdown-toggle" data-toggle="dropdown">騎士<span class="caret"></span></a>
? ? ? ?<ul class="dropdown-menu" role="menu">
? ? ? ? <li><a href="#" >勒布朗*詹姆斯</a></li>
? ? ? ? <li><a href="#">樂福</a></li>
? ? ? ? <li class="divider"></li>
? ? ? ? <li><a href="#">歐文</a></li>
? ? ? ?</ul>
? ? ? </li>
? ? ?</ul>
? ? ?
? ? </div>
? ?</div>
? </nav>
??
? <!-- 圖片輪播-->
? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
? ? <ol class="carousel-indicators">
? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="1"></li>
? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="2"></li>
? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="3"></li>
? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="4"></li>
? ? </ol>
? ? ? ? ??
? ?<div class="carousel-inner" role="listbox">
? ? ?<div class="item active">
? ? ? ? ? ? ? <img src="images/firefox-big.jpg" alt="1 slide" />
? ? ? ? ? ? ? <div class="carousel-caption">
? ? ? ? ? ? ? <h1>Firefox</h1>
? ? ? ? ? ? ? <p>Firefox,又稱火狐瀏覽器。最新版 Firefox 在性能上有非常顯著的提升，大幅降低的內存占用和更快的渲染速度，給用戶更為流暢和高速的上網瀏覽體驗，同時也讓開發者能夠開發出更為快速的網絡應用和網站。 </p>
? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a></p>
? ? ? ? ? ? ? </div>
? ? ?</div>
? ??
? ? <div class="item">
? ? ? ? ? ? ? <img src="images/ie-big.jpg" alt="2 slide" />
? ? ? <div class="carousel-caption">
? ? ? ? <h1>IE</h1>
? ? ? ? ? ? ? <p>IE,又稱IE瀏覽器。如果運行的是 Windows 7，可以安裝的最新 Internet Explorer 版本是 Internet Explorer 11。</p>
? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a></p>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? </div>
? ??
? ? <div class="item">
? ? ? ? ? ? ? <img src="images/chrome-big.jpg" alt="3 slide"/>
? ? ? ? ? ? ? <div class="carousel-caption">
? ? ? ? ? ? ? <h1>chrome</h1>
? ? ? ? ? ? ? <p>chrome,又稱谷歌瀏覽器。Chrome 可將您在計算機上打開的標簽頁、保存的書簽和最近搜索過的內容同步到手機或平板電腦上，反之亦然。這意味著您可將自己在 Chrome 中的內容和設置同步到所有的設備上。只需登錄您的其他設備即可開始同步。</p>
? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a></p>
? ? ? ? ? ? ? </div>
? ? </div>
? ??
? ? <div class="item">
? ? ? <img src="images/opera-big.jpg" alt="4 slide" />
? ? ? <div class="carousel-caption">
? ? ? ? <h1>歐朋瀏覽器</h1>
? ? ? ? <p>歐朋瀏覽器秉承了 Opera 速度快、省流量、功能強大的優點并為中國用戶精心設計及推出了本地化的優質服務，為用戶提供最佳的移動互聯網體驗。</p>
? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a></p>
? ? ? ? ? ? ? </div>
? ? ? ? </div>
? ??
? ? <div class="item ">
? ? ? ? ? ? ? <img src="images/safari-big.jpg" alt="5 slide"/>
? ? ? ? ? ? ? <div class="carousel-caption">
? ? ? ? ? ? ? <h1>safari</h1>
? ? ? ? ? ? ? <p>Get a sneak peek at upcoming web technologies in macOS and iOS and experiment with these technologies in your websites and extensions.</p>
? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a></p>
? ? ? ? ? ? ? </div>
? ? </div>
? ??
? ??
? ? ? ? ? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-left"></span>
? ? ? ? ? ? <span class="sr-only">上一頁</span>
? ? ? ? ? </a>
? ? ? ? ? <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-right"></span>
? ? ? ? ? ? <span class="sr-only">下一頁</span>
? ? ? ? ? </a>
? ? ? ? ??
</div>
??
? <!--Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣 -->
?<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
2017-05-04
樣式名為carousel-inner的div的結束標簽位置放錯了，你現在的寫法只包住了前兩個樣式名為item的div，應該包住5個才對！