[英]Setting one Section of HTML as a Different Background Color
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的样式。
Thanks in advance! 提前致谢!
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。
Put an id on the nav tag and style the menu over css. 在nav标签上放置一个id,然后在CSS上设置菜单样式。
Html: HTML:
<nav id='nav'>
// menu
</nav>
Css: CSS:
#nav {
background-color: 'white';
}
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重新设计来完成
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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.