Javascript 二元'；导航中的背景色_Javascript_Jquery_Html_Css

Javascript 二元'；导航中的背景色

javascript jquery html css

Javascript 二元'；导航中的背景色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要在一个div中添加两个元素的效果。我尝试了选择它们的id（以及其他一些方法），但没有按预期工作。也许我不成功是因为我对HTML/CSS没有深入的了解这是我最近尝试的一个例子- <style> #container { margin: 0 auto; max-width: 890px; } .toggle, [id^=drop] { display: none; } nav { margin: 0; padding: 0; wid

我需要在一个div中添加两个元素的效果。我尝试了选择它们的id（以及其他一些方法），但没有按预期工作。也许我不成功是因为我对HTML/CSS没有深入的了解

这是我最近尝试的一个例子-

<style>
#container {
    margin: 0 auto;
    max-width: 890px;
}
.toggle, [id^=drop] {
    display: none;
}
nav {
    margin: 0;
    padding: 0;
    width: 100%;
    padding-top: .4em;
    padding-bottom: .4em;
    background-color: #FFF;
    border-bottom: 2px solid #BBB;
    box-shadow: 3px 3px 5px 3px #CCC;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#menuBar{
    background-color: #2D2D2D;
}
#logo {
    display: block;
    padding: 0 20px;
    float: left;
    font-size: 20px;
    line-height: 40px;
}
nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background-color: #2D2D2D;
}
nav a {
    display: block;
    padding: 0 20px;
    color: #4CAF50;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    text-decoration: none;
}
</style>

</head>
    <body id="top" data-gr-c-s-loaded="true">
        <nav>
            <div id="menuBar">
                <div id="logo">nMess</div>
                <label for="drop" class="toggle menu">Menu</label> <input type="checkbox" id="drop">
                <ul class="menu">
                    <li><a href="homepage">Home</a></li>
                    <li><a href="bazarExchange">Bazar Exchange</a></li>
                    <li><a href="bazarValidate">Bazar Validate</a></li>
                    <li><a href="profile">Profile</a></li>
                    <li><a class="alertBtn" href="logout">Logout</a></li>
                </ul>
            </div>
        </nav>
    </body>
</html>


#容器{
保证金：0自动；
最大宽度：890px；
}
.toggle[id^=drop]{
显示：无；
}
导航{
保证金：0；
填充：0；
宽度：100%；
填料顶部：.4em；
填充底部：.4em；
背景色：#FFF；
边框底部：2倍实心#BBB；
盒影：3px 3px 5px 3px#CCC；
z指数：100；
位置：固定；
排名：0；
左：0；
右：0；
}
#梅努巴{
背景色：#2d；
}
#标志{
显示：块；
填充：0 20px；
浮动：左；
字体大小：20px；
线高：40px；
}
导航ul{
浮动：对；
填充：0；
保证金：0；
列表样式：无；
位置：相对位置；
}
李国荣{
边际：0px；
显示：内联块；
浮动：左；
背景色：#2d；
}
导航a{
显示：块；
填充：0 20px；
颜色：#4CAF50；
字号：18px；
字号：700；
线高：40px；
文字装饰：无；
}
高考
菜单

这是一张剪纸它现在看起来像什么-

但是我想要这个-

注意：我不想要整个背景的颜色为灰色，我想要白色背景中的灰色。

您可以更改背景的HTML元素nav，如下所示：

nav {
  background-color: #2D2D2D;
}

如果您仍然希望在顶部和底部添加白色边框，您可以添加这样的边框：

nav {
  background-color: #2D2D2D;
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
}

解决方案1：使用带浮动的

clearfix

您已将背景色设置为#2d2d在菜单栏上，但它会折叠到零高度，因为它的所有子项都是浮动或隐藏的。您应该使用clearfix来避免它（注意

.clearfix

在

#menuBar

上的类）：

#容器{
保证金：0自动；
最大宽度：890px；
}
.toggle[id^=drop]{
显示：无；
}
导航{
保证金：0；
填充：0；
宽度：100%；
填料顶部：.4em；
填充底部：.4em；
背景色：#FFF；
边框底部：2倍实心#BBB；
盒影：3px 3px 5px 3px#CCC；
z指数：100；
位置：固定；
排名：0；
左：0；
右：0；
}
#梅努巴{
背景色：#2d；
}
#标志{
显示：块；
填充：0 20px；
浮动：左；
字体大小：20px；
线高：40px；
}
导航ul{
浮动：对；
填充：0；
保证金：0；
列表样式：无；
位置：相对位置；
}
李国荣{
边际：0px；
显示：内联块；
浮动：左；
背景色：#2d；
}
导航a{
显示：块；
填充：0 20px；
颜色：#4CAF50；
字号：18px；
字号：700；
线高：40px；
文字装饰：无；
}
.clearfix:之后{
内容：“.”；
可见性：隐藏；
显示：块；
身高：0；
明确：两者皆有；
}


高考
菜单

你好

这就是你想要做的

HTML:

第一个更好地满足了我的要求。@Isac，我在你的链接后面找不到任何东西。

       <nav>
            <div id="menuBar">
                <ul class="menu">

                    <li> <div id="logo">nMess</div>
                                    <label for="drop" class="toggle menu">Menu</label> <input type="checkbox" id="drop">
                    </li>
<div class="right">

                    <li><a href="homepage">Home</a></li>
                    <li><a href="bazarExchange">Bazar Exchange</a></li>
                    <li><a href="bazarValidate">Bazar Validate</a></li>
                    <li><a href="profile">Profile</a></li>
                    <li><a class="alertBtn" href="logout">Logout</a></li></div>
                </ul>
            </div>
        </nav>

#container {
    margin: 0 auto;
    max-width: 890px;
}
.toggle, [id^=drop] {
    display: none;
}

#menuBar{
    background-color: #2D2D2D;
}
#logo {
    display: block;
    padding: 0 20px;
    float: left;
    font-size: 20px;
    line-height: 40px;
      color:#fff;
}
nav {
    margin: 0;
    padding: 0;
    width: 100%;
    padding-top: .4em;
    padding-bottom: .4em;
    background-color: #FFF;
    border-bottom: 2px solid #BBB;
    box-shadow: 3px 3px 5px 3px #CCC;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
nav ul {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
    width:100%;
        background-color: #2D2D2D;
}
nav ul div.right{
  float:right;
}

nav ul li {
    float: left;
}
nav a {
    display: block;
    padding: 0 20px;
    color: #4CAF50;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    text-decoration: none;
}