獲得背景色上的div

.wrapper { 
 
height:1200px; 
 
width:800px; 
 
overflow: auto; 
 
background:green; 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 

 
} 
 

 
.sidebar { 
 
background:grey; 
 
position:absolute; 
 
left:10%; 
 
top:0px; 
 
bottom:0px; 
 
width:20%; 
 
height:100%; 
 
float:left; 
 
} 
 

 
.content { 
 
background:blue; 
 
position:absolute; 
 
left:30%; 
 
right:0px; 
 
top:0px; 
 
bottom:0px; 
 
width:70%; 
 
float:left; 
 
} 
 

 
body { 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Steven game dev</title> 
 
\t <link rel="stylesheet" type="text/css" href="style2.css"/> 
 
</head> 
 
<body> 
 
\t <div class="wrapper"> 
 
\t <div class="sidebar"> 
 
\t \t <a href="home.html">Home</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">About</a> 
 
     \t \t <br> 
 
     \t \t <a href="page3.html">Blog</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Videos</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Pictures</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Contact</a> 
 
\t </div> 
 
\t <div class="content"> 
 
\t </div> 
 
\t </div> 
 
</body> 
 

 
\t 
 
</html>

工作，大家好我是新這樣下去容易在我身上。我決定組建一個快速網站，這是我多年來沒有做過的事情，結果我幾乎忘記了一切，但我認爲這會很容易滑回去。由於某種原因，我錯了，我不能添加背景顏色我的一個Divs。該div是在一個容器div內，這可能是我遇到麻煩的原因，但我相當肯定，這不應該是以前做過很多次的問題。問題的div是我的邊欄我不明白爲什麼它很難，但我已經嘗試了很多東西來補救它，我不能得到它的工作。請原諒我的CSS的馬虎性質我只是很快試圖阻止divs，以便我可以看到我在做什麼。任何幫助將不勝感激我確信這是我錯過的愚蠢東西，但這是基本的東西應該很容易。

來源

2017-04-25 moderategamer

查看您的代碼片段僅顯示灰色容器，而不是橙色側邊欄。在小提琴中查看您的代碼顯示橙色，並隱藏灰色，奇怪。無論如何，嘗試刪除灰色的背景顏色，看看是否通過橙色。請注意，我發現邊框更容易識別元素大小，因爲它們不會像背景色那樣重疊。 – mrkd1991

嚴重的是，這是一個謎，但我得到它的工作。這裏是解決方案：

#sidebar { 
    height: 100%; 
    width: 50%; 
    background-color:orange; 
    float:left; 
}

「但是等等」，我聽到你說，「這是相同的代碼！」。顯然不是。在width: 50%;和background-color: orange;之間是一個我看不到的字符，但它停止了背景色的工作。

測試代碼片段時，我最終刪除並重新輸入了代碼，這是我在遇到絕望時所做的事情。

來源

2017-04-25 11:43:19 Manngo

感謝它真的很奇怪我認爲記事本++拖動我，因爲我手工輸入所有這些，我看不到任何隱藏的字符，要麼我認爲我會切換回老的普通記事本看看是否改變似乎是任何東西我輸入的所有內容都不起作用，但是當我粘貼東西時，他們再次感謝非常感謝的幫助。 – moderategamer

這是奇怪的切換到記事本，突然一切正常！？ – moderategamer

@moderategamer在那裏，做到了，買了明信片。 Notepad ++通常非常好（我沒有正常使用Windows，所以我沒有任何近期的經驗）。有時重新打字突顯了一個錯字，但有時候只是這個煩人的無形字符。出於好奇，可能值得在N ++中展示無形的角色來測試這個理論。如果這回答了您的問題，您是否願意接受答案？ – Manngo

-1

我認爲你正在尋找一個側欄導航菜單嘗試我的代碼如下。我還推薦以下https://www.w3schools.com/w3css/w3css_sidebar.asp和http://jsfiddle.net/coltrane/cxQGc/。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div class="sidebar"> 
      <a href="page2.html">Home</a> 
      <br> 
      <a href="page2.html">About</a> 
      <br> 
      <a href="page2.html">Blog</a> 
      <br> 
      <a href="page2.html">Videos</a> 
      <br> 
      <a href="page2.html">Pictures</a> 
      <br> 
      <a href="page2.html">Contact</a> 
     </div> 
     <div class="content"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
    </body> 
</html> 
<style type="text/css"> 
.sidebar { 
    background: orange; 
    position: absolute; 
    left: 0; 
    top: 0px; 
    bottom: 0; 
    width: 178px; 
} 

.content { 
    background: red; 
    position: absolute; 
    left: 178px; 
    right: 0; 
    top: 0px; 
    bottom: 0; 
} 
</style>

來源

2017-04-25 02:21:03 Ace

感謝您的答案我仍然不明白爲什麼它不工作，但有任何想法。 – moderategamer

在背景顏色之前有空白字符：橙色。所以瀏覽器認爲它的名字是[whitespace] [whitespace]無法識別的背景色。我知道這一點，因爲我查看了devtools中的#sidebar元素，並得到unrecognized rule: background-color，這隻有在該字符串中存在一些不可見的空白時纔有意義。發現你的草率的CSS寫作是不可原諒的！

#sidebar \t { 
 
    height: 100%; 
 
    width: 50%; 
 
    background: orange; 
 
    float:left; 
 
} 
 

 
#container { 
 
    height: 800px; 
 
    width: 100%;    
 
    float:left; 
 
    background-color: grey; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
} 
 

 
#content { 
 
    float: left; 
 
    background-color: red; 
 
    width:50%; 
 
    height:100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
    background-color:blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" type="text/css" href="styledesign.css"/> 
 
</head> 
 
\t <title> 
 
Steven game dev! 
 
\t </title> 
 

 
<div id ="container"> 
 
<div id ="sidebar"> 
 
<a href="page2.html">Home</a> 
 
<a href="page2.html">About</a> 
 
<a href="page2.html">Blog</a> 
 
<a href="page2.html">Videos</a> 
 
<a href="page2.html">Pictures</a> 
 
<a href="page2.html">Contact</a> 
 
</div> 
 
<div id ="content"> 
 

 
\t <h1>Welcome to my website take a look around </h1> 
 
\t <p> 
 
\t I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go. 
 
\t Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4. 
 
\t </p> 
 

 

 
\t 
 
\t <p> 
 
\t Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker. 
 
\t I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke 
 
\t following behind using Tails in ue4 particles editor. 
 
\t </p> 
 
\t 
 
</div> 
 
</div> 
 

 

 
</html>

來源

2017-04-25 02:23:37

CSS中大多數額外的空間被忽略。唯一有意義的空格是（a）選擇符中的一些空格，這些空格具有子選擇器的效果，例如'ab {}'和（b）引號內屬性的空格，例如'font-family：「Lucida Grande 「'。背景顏色周圍的空間不會產生影響。 – Manngo

@Manngo夠公平的，它一定是另一個空白字符。因爲當我查看開發人員工具時，我看到'無法識別的規則：背景顏色'。一旦我刪除了「background-color」周圍的空白，瀏覽器就會識別它。 –

獲得背景色上的div

回答

相關問題