2014-12-11 114 views
0

我找不出錯誤代碼在哪裏。我嘗試使用以下css來改變背景顏色到任何東西:背景顏色不會更改錯誤

body { 
background-color: black; 
    padding: 0px; 
    margin:0px; 
    height: 1500px; 
} 

但除了換擋導航欄下幾行出於某種原因它不改變任何東西。爲什麼會發生這種情況,爲什麼我不能更改背景顏色?

的index.html

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<link rel="shortcut icon" href=""> <!--tab image--> 
<title> Bear Patrol | Home </title> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
    <a id="logo" href="index.html">BEAR PATROL</a> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="index.html">HOME</a></li>  
     <li><a href="about.html">ABOUT US</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div><!-- /.navbar-collapse --> 
<div> 
    <div class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 center hero-unit"> 
     <h1 id="name">BEAR PATROL</h1> 
     <img id="mainPic" src="bp.jpg"> 
     <div id="bio"> 
      <h4>Late Night Escorts Anywhere On Campus</h4> 
      <h4> Headquarters Located in Whispers </h4> 
      <h4>Available 8 PM to 2 AM Every Day</h4> 
     </div> 
    </div> 
</div> 

<div id="contact" class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 center hero-unit"> 
     <a href="contact.html"><h1> REQUEST AN ESCORT!</h1></a> 

    </div> 
</div> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<!-- js --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

的main.css

body { 
    padding: 0px; 
    margin:0px; 
    height: 1500px; 
    background-color: black; 
} 

#img { 
    text-align: center; 
    height: 300px; 
    width: 230px; 
} 

#mainPic { 
    text-align: center; 
    height: 300px; 
    width: 500px; 
    margin: 50px; 
} 

form { 
    margin-left: 176px; 
    margin-top: 30px; 
} 

#title { 
    padding-top: 105px; 
    text-align: center; 
    margin-top: 0px; 
    color: white; 
    font-size: 60px; 
    font-family: helvetica; 
} 

#logo { 
    font-size: 20px; 
    font-style: bold; 
    margin-top: 28px; 
    margin-left: 20px; 
    display: inline-block; 
    border-style: solid; 
    border-width: 5px; 
    padding: 10px; 
} 

#info { 
    text-align: center; 
    padding-top: 20px; 
    color: white; 
    font-size: 68px; 
    font-family: helvetica; 
} 

.hero-input { 
    padding: 5px; 
    margin: 5px; 
    display:inline-block; 
} 

#navbar-nav { 
    padding-left: 150px; 
} 

#contact { 
    opacity: .9; 
} 

#button { 
    background-color: blue; 
    float: right; 
} 

#nav { 
    margin-top: 9px; 
    margin-right: 20px; 
    display: inline-block; 
} 

.hero-unit { 
    text-align: center; 
    background-color: blue; 
    font-size: 11px; 
    margin: 30px; 
    padding: 30px; 
    line-height: 1.4em; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    box-shadow: 1px 1px 10px #444; 
    border-color: #C1C1C1; 
    color: white; 
} 

li { 
    list-style-type: none; 
    margin-top: 15px; 
    margin-right: 12px; 
    display: inline-block; 
    font-size: 15px; 
    /* color: white; */ 
} 

a:link, a:visited, a:active { 
    color: black; 
} 

a:hover { 
    color: blue; 
} 

::-webkit-input-placeholder { 
    font-family: helvetica; 
    line-height: 1.8; 
    font-size: 12px; 
} 

h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
} 

h1 { 
    font-size: 3em; 
    letter-spacing: 4px; 
    margin-bottom: 30px; 
    text-align: center; 
} 

h4 { 
    font-size: 2em; 
    letter-spacing: -1px; 
    margin-bottom: 30px; 
    text-align: center; 
    font-weight: normal; 
} 

p { 
    font-size: 1.1em; 
    line-height: 1.7em; 
} 
+0

試用背景:#000000; – 2014-12-11 03:13:23

+0

嘗試'背景顏色:黑色!重要;'有什麼東西在壓倒它。 – JunM 2014-12-11 03:13:34

+0

該代碼似乎對我工作正常。 http://jsfiddle.net/kkyo5pgu/無法複製該問題。 – 2014-12-11 03:15:08

回答

3

更改CSS鏈接順序如下圖所示

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="main.css"> 

工作正常http://jsfiddle.net/gtpco6k9/

在同一個選擇

main.css將覆蓋bootstrap.min.css

有關CSS的優先順序,看看這篇文章 - >here