将 HTML 的一部分设置为不同的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19127129/
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
Setting one Section of HTML as a Different Background Color
提问by Austin Bunker
I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.
我的网站上有一个顶部下拉导航，我希望背景颜色不同。我的网站背景颜色是灰色，而我只希望标签部分是（例如）白色。
The CSS for my background color is as follows:
我的背景颜色的 CSS 如下：
body{
background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}
I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.
我希望我的下拉导航具有白色背景，同时保持页面的其余部分相同。我的下拉列表位于 header.php 文件中，然后在其中引用。
My navigation HTML is as follows:
我的导航 HTML 如下：
<center><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/arcade">Arcade</a>
<ul>
<li><a href="/arcade/action">Action</a></li>
<li><a href="/arcade/arcade">Arcade</a></li>
<li><a href="/arcade/puzzle">Puzzle</a></li>
<li><a href="/arcade/vehicle">Vehicle</a></li>
<li><a href="/arcade/violence">Violence</a></li>
<li><a href="/arcade/defense">Defense</a></li>
<li><a href="/arcade/rpg">RPG</a></li>
</ul>
</li>
<li><a href="">Watch</a>
<ul>
<li><a href="/watch/tv">TV Shows</a></li>
<li><a href="/watch/movies">Movies</a></li>
</ul>
</li>
<li><a href="">Extras</a>
<ul>
<li><a href="/reviews">Reviews</a></li>
<li><a href="/news">Updates</a></li>
</ul>
</li>
<li><a href="/support">Support</a></li>
</ul>
My CSS, of course, styles this header.php.
当然，我的 CSS 会设置这个 header.php 的样式。
Thisis my website.
这是我的网站。
Thanks in advance!
提前致谢！
采纳答案by Josh Crozier
Change the CSS to this:
将 CSS 更改为：
nav {
background-color: #fff;
margin: 0px -12.5%;
}
Gives the following result:
给出以下结果：
If you're not happy with this solution, you are going to need to modify the HTML.
如果您对这个解决方案不满意，您将需要修改 HTML。
回答by Getu.ch
Put an id on the nav tag and style the menu over css.
在导航标签上放置一个 id 并通过 css 设置菜单样式。
Html:
网址：
<nav id='nav'>
// menu
</nav>
Css:
css：
#nav {
background-color: 'white';
}
回答by Jacob Raccuia
I'm pretty sure you just need to set the nav background as white..
我很确定你只需要将导航背景设置为白色..
in your css:
在你的 css 中：
nav { background-color:#fff; }
Extending the full width:can also be done with HTML resdesign
扩展全宽：也可以通过 HTML resdesign 来完成
HTML
HTML
<body>
<nav>
<!-- nav code -->
</nav>
<div id="container">
<!-- all of the rest of your code -->
</div>
</body>
CSS
CSS
body { }
nav { background-color:#fff; }
#container {
background-color:#D0D0D0;
margin:0px 10%;
}
