Html CSS 标题背景颜色不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17606963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Header Background-Color Won't Work
提问by YepNamesJames
I've been able to change the background-color for the entire page, but am struggling to change the header's separate background-color. Any help would be epic:Fiddle
我已经能够更改整个页面的背景颜色，但我正在努力更改标题的单独背景颜色。任何帮助都是史诗般的：小提琴
HTML:
HTML：
<body>
<div id="header" border="0">
<div id="header_button" alt="Ashley Lincoln Designs">
enter code here`<img src="images/logo.png" height="100px"><div>
<div id="header_button">About</div>
<div id="header_button">Newest<br>Project</div>
<div id="header_button">Archive</div>
<div id="header_button">Contact</div>
</div>
<p>Test</p>
</body>
CSS:
CSS：
* {
margin: 0;
padding: 0;
background-color: #174C4F;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background-color: #FSE9BE;
}
#header_button {
height: 100px;
margin: 0 auto;
padding: 0;
color: #207178;
font-family: "Verdana", Verdana, sans-serif;
font-size: 20px;
text-align: center;
text-transform:uppercase;
text-indent: 0px;
display:inline-block;
background-color: #FSE9BE;
}
回答by Raekye
Your problem is your IDs aren't unique (they should be, by the HTML standard). Use a class - see here http://jsfiddle.net/T4jdq/1/
您的问题是您的 ID 不是唯一的（按照 HTML 标准，它们应该是唯一的）。使用一个类 - 见这里http://jsfiddle.net/T4jdq/1/
<div class="header_button">About</div>
<div class="header_button">Newest<br>Project</div>
<div class="header_button">Archive</div>
<div class="header_button">Contact</div>
.header_button {
height: 100px;
...
background-color: red;
}
As for lining up the buttons - there's a lot you can do with navigation bars. I'm not quite sure what you want; the the example nav bar has the image above everything else. If you add float: left;to the other elements they line up. Other than that, it's a matter of a lot of tweaking :P . I recommend using Chrome and the dev console (right click, inspect element) which lets you modify the CSS live.
至于排列按钮 - 您可以使用导航栏做很多事情。我不太确定你想要什么；示例导航栏的图像高于其他所有内容。如果您添加float: left;到其他元素，它们会对齐。除此之外，这是一个大量调整的问题：P。我建议使用 Chrome 和开发控制台（右键单击，检查元素），它可以让您实时修改 CSS。
回答by DACrosby
You have the CSS mostly correct, but your #headerbackground color isn't a valid HEX color. Presently it's set to:
您的 CSS 基本正确，但您的#header背景颜色不是有效的十六进制颜色。目前设置为：
background-color: #FSE9BE;
It should be
它应该是
background-color: #F5E9BE;
Note qr Stu is not the same as 34 567
注意 qr Stu 与 34 567 不同
As others have mentioned, you can only use idonce per page. Your header_buttons are better suited to class.
正如其他人所提到的，id每页只能使用一次。你的header_buttons 更适合class.
As for making the menu items all align better;
至于让菜单项全部对齐更好；
simply add:
只需添加：
vertical-align:top;
回答by Guruprasad Rao
Updated the fiddle:
更新了小提琴：
<body>
<div id="header" border="10">
<img src="Images/logo.png" id="header_button" alt="Some Text"/>
<div id="header_button" alt="Ashley Lincoln Designs"/>
<div id="header_button">About</div>
<div id="header_button">Newest<br>Project</div>
<div id="header_button">Archive</div>
<div id="header_button">Contact</div>
</div>
<p style="position:relative">Test</p>
</body>
Css:
css：
body{
margin: 0;
padding: 0;
background-color: #174C4F;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
position:absolute;
background-color:Black;
}
#header_button {
height: 100px;
margin: 0 auto;
padding: 0;
color: #207178;
font-family: "Verdana", Verdana, sans-serif;
font-size: 20px;
text-align: center;
text-transform:uppercase;
text-indent: 0px;
display:inline-block;
background-color: #FSE9BE;
}
and I agree with @DaCrosby.. The HEX decimal for color was invalid. Everything is fine then.
我同意@DaCrosby .. 颜色的十六进制十进制无效。那么一切都很好。
回答by Abdul Malik
Css
css
* {
margin: 0;
padding: 0;
}
body{
background-color: #174C4F;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background: red;
}
.header_button {
height: 100px;
margin: 0 auto;
padding: 0;
color: #207178;
font-family: "Verdana", Verdana, sans-serif;
font-size: 20px;
text-align: center;
text-transform:uppercase;
text-indent: 0px;}
html
html
<div id="header">
<div class="header_button"> <img src="images/logo.png"
height="100px" alt="Ashley Lincoln Design"s /></div>
<div>
<div class="header_button">About</div>
<div class="header_button"> Newest
<br/>Project
</div>
<div class="header_button">Archive</div>
<div class="header_button">Contact</div>
</div>
<p>Test</p>
