2015-12-10 30 views
-1

我正在製作一個非常簡單的網頁。我是一個總新手,所以標準很低。我的頁面目前看起來像這樣:http://i.imgur.com/UVK5RLX.png我的圖像旋轉木馬有什麼問題?

我在這裏錯過了什麼?

這裏是我的代碼:

<html> 
 

 
<head> 
 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
 
    <link rel="stylesheet" type="text/CSS" href="Style.css" /> 
 

 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <header id="container"> 
 
    <h1> 
 
      <a href="a">My Interactive Webpage</a> 
 
     </h1> 
 
    <h1> 
 
      <a href="a">Games Page</a> 
 
     </h1> 
 

 
    <style> 
 
     ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     } 
 
     li { 
 
     float: left; 
 
     } 
 
     li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
     } 
 
     li a:hover:not(.active) { 
 
     background-color: #111; 
 
     } 
 
     .active { 
 
     background-color: #4CAF50; 
 
     } 
 
    </style> 
 

 
    <ul> 
 
     <li> 
 
     <a class="active" href="#home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="#news">Information</a> 
 
     </li> 
 
     <li> 
 
     <a href="#contact">Games</a> 
 
     </li> 
 
     <li> 
 
     <a href="#about">Career</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 

 
    <div id="container"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
     </ol> 
 

 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
      <img src="img_chania.jpg" alt="Chania"> 
 
      <div class="carousel-caption"> 
 
      <h3>Chania</h3> 
 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="item"> 
 
      <img src="deus.jpg" alt="Deus"> 
 
      <div class="carousel-caption"> 
 
      <h3>Deus Ex</h3> 
 
      <p>Deus Ex is a cyberpunk-themed action-role playing video game—combining first-person shooter, stealth and role-playing elements—developed by Ion Storm and published by Eidos Interactive in 2000. 
 
      </p> 
 
      </div> 
 
     </div> 
 

 
     <div class="item"> 
 
      <img src="diablo.jpg" alt="Diablo"> 
 
      <div class="carousel-caption"> 
 
      <h3>Diablo III</h3> 
 
      <p>Diablo III is an action role-playing video game developed and published by Blizzard Entertainment. It is the third installment in the Diablo franchise and was released in 2012. 
 
      </p> 
 
      </div> 
 
     </div> 
 

 
     <div class="item"> 
 
      <img src="hitman.jpg" alt="Hitman"> 
 
      <div class="carousel-caption"> 
 
      <h3>Hitman: Blood Money</h3> 
 
      <p>Hitman: Blood Money is a stealth video game developed by Danish developer IO Interactive and published by Eidos Interactive in 2006. 
 
      </p> 
 
      </div> 
 
     </div> 
 

 
     <div class="item"> 
 
      <img src="oblivion.jpg" alt="Oblivion"> 
 
      <div class="carousel-caption"> 
 
      <h3>Elder Scrolls IV: Oblivion</h3> 
 
      <p>The Elder Scrolls IV: Oblivion is an action role-playing video game developed by Bethesda Game Studios and published by Bethesda Softworks and the Take-Two Interactive subsidiary, 2K Games and was released in 2006. 
 
      </p> 
 
      </div> 
 
     </div> 
 

 
     <div class="item"> 
 
      <img src="wow.jpg" alt="WoW"> 
 
      <div class="carousel-caption"> 
 
      <h3>World of Warcraft</h3> 
 
      <p>World of Warcraft (WoW) is a massively multiplayer online role-playing game (MMORPG) created in 2004 by Blizzard Entertainment. 
 
      </p> 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 

 
     <!-- Left and right controls --> 
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

我添加了一個堆棧段將帖子。這是允許我們在這個網站上運行你的代碼的東西。請花點時間確定該代碼段與您的計算機上的代碼存在相同的問題。 – Makoto

+0

非常感謝。它確實表現出同樣的問題。 – Boolean123

回答

0

你缺少兩件事情:

  1. 將jQuery
  2. 來引導的JS
基準的基準

裏面你<head></head>標籤補充一點:

<script src="//code.jquery.com/jquery.js" /> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" /> 

所以你的最終結果將是這樣的:

<head> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" type="text/CSS" href="Style.css" /> 
    <script src="//code.jquery.com/jquery.js" /> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" /> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>