1

我已经能够更改整个页面的背景颜色，但我正在努力更改标题的单独背景颜色。任何帮助都是史诗般的：小提琴

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：

* {
    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;
}
4

4 回答 4

2

您的问题是您的 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;
}

至于排列按钮 - 导航栏可以做很多事情。我不太确定你想要什么；示例导航栏的图像高于其他所有内容。如果您添加float: left;到其他元素，它们会排列。除此之外，还有很多调整 :P 的问题。我建议使用 Chrome 和开发控制台（右键单击，检查元素），它可以让您实时修改 CSS。

于 2013-07-12T03:33:39.603 回答
2

您的 CSS 大部分是正确的，但您的#header背景颜色不是有效的十六进制颜色。目前设置为：

background-color: #FSE9BE;

它应该是

background-color: #F5E9BE;

注意 qr S tu 不等于 34 5 67

id正如其他人所提到的，您每页只能使用一次。你header_button的 s 更适合class.

至于使菜单项都更好地对齐；

只需添加：

vertical-align:top;

http://jsfiddle.net/daCrosby/T4jdq/2/

于 2013-07-12T03:47:57.567 回答
1

更新了小提琴：

演示

<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：

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;
}

我同意@DaCrosby .. 颜色的十六进制十进制无效。那么一切都很好。

于 2013-07-12T05:37:47.713 回答
0

演示

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

<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>
于 2013-07-12T03:43:28.380 回答