0

只是想知道是否有人可以在这里帮助我。我想要做的（虽然丑陋）是向网站上的导航栏添加两种背景颜色。基本上所有列表项都将具有红色背景，但需要具有蓝色背景的列表项除外。我尝试使用 1 个长背景图像来解决这个问题，但这在跨浏览器时不起作用，因为文本的位置在 Chrome 和 Firefox 之间发生了变化。

我想知道是否有一种方法可以给所有元素一个红色背景，但可能使用跨度或其他东西来选择导航中我想要蓝色背景的单个元素？

这就是我想要实现的目标（就像我说的我知道的非常丑陋）

双色导航

任何人都可以给我的任何想法或帮助真的很棒

谢谢！

4

3 回答 3

1

不要给整个导航栏一个背景，而是你的导航栏的所有元素。blue然后你可以在 CSS:.blue { background: blue; }或类似的东西中给一个名为 and 的类。示例：http: //jsfiddle.net/A7RMA/2/

于 2013-11-01T12:23:08.547 回答
1

演示

<nav>
  <ul>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#" class="active">Contact</a></li>
  </ul>
</nav>


nav ul{
  list-style:none;
}
nav a{
  display:block;
  float:left;
  padding:10px 20px;
  background:red;
  color:#fff;
  text-decoration:none;
}
nav a.active, nav a:hover{
  background: blue;
}
于 2013-11-01T12:49:48.883 回答
0

对于您的静态蓝色项目，请使用 DRP96 建议的 CSS：

.bluemenu
{ 
    background: blue; 
}

对于其他项目，做同样的事情，但红色：

.redmenu
{ 
    background: red; 
}

要在悬停在红色菜单上时使红色菜单变为蓝色，您可以使用：

A:hover
{ 
    background: green; 
}

（将上述片段中的“A”替换为您用于菜单项的任何对象。这也应该与您应用 redmenu 和 bluemenu 类的项目相同）

于 2013-11-01T12:42:06.283 回答