如何设置 <li> 背景颜色？答案

【问题标题】：How to set <li> Background color?如何设置 <li> 背景颜色？
【发布时间】：2013-06-05 14:52:44
【问题描述】：

我相信这很简单，但由于我是新手，所以我不知道该怎么做。我只是想改变一个 li 标签的背景颜色 - 只是为了时尚，没有别的。

这是我的 HTML：

<ul id="abas">
     <li><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></li>
</ul>

很抱歉我是个菜鸟，但是这是 css 部分，对吧？

#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px; 
-webkit-border-radius-topleft:5px; 
-webkit-border-radius-topright:5px;     
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px; 
-moz-border-radius-bottomright:5px; 
-webkit-border-radius-bottomleft:5px; 
-webkit-border-radius-bottomright:5px;  
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px; 
}

我注意到这里>>> "background-color:3B31FF;"是我改变的地方背景颜色，但是这样做当然会改变所有背景颜色 ...我只需要 1 个“li”选项卡即可更改，任何 html 教程也会很好。

【问题讨论】：

这是线索：使用 CSS。此线索适用于您可能想要的任何项目的所有样式...

标签： css background html-lists

【解决方案1】：

CSS代码：

#abas li { 
 background-color:  ... ;
}

在点所在的地方填写颜色代码，如下所示：

background-color:#000000; //color black

单个标签：

CSS代码：

li.selected { 
     background-color:  ... ;
    }

HTML代码：

<ul>
   <li></li>
   <li class="selected"></li>
   <li></li>
</ul>

【讨论】：

我非常感谢您的快速回答，但我可能遗漏了什么，我只需要更改一个标签。
有效，无效，麻烦您了，我也贴了css代码（希望有帮助）

【解决方案2】：

首先，任何 css 颜色代码都需要有 # 后跟 6 位值（如果重复，则为 3，即 #FF33FF 为 #F3F）并解决您的第二部分问题

CSS

#abas li { 
    background-color:  #xxxxxx ;
    //your other style goes here
}
#abas li.current { 
    background-color:  #xxxxxx ;
    //your other style goes here
}

HTML

<ul id="abas">
     <li class="current"><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></li>
</ul>

【讨论】：

哦，好吧，我真的很难让这个工作，但发生了一些奇怪的事情，当我输入完代码时，它创建了一个“环绕”，里面是蓝色（已经是蓝色），外面是绿色（ “li.current”颜色集，当然我也放置了所有其他的css样式，只是改变了背景颜色。
我应该删除一些东西吗？
哈，进行一些更改，我想我可以很好地使用这些代码，谢谢，以及任何其他试图提供帮助的人，说真的，刚刚救了我的培根.....

【解决方案3】：

要更改背景颜色，只需设置样式：

<li style="background-color:blue;">Program</li>

您可能还想设置一些高度和宽度参数。

【讨论】：

【解决方案4】：

这将使第一项具有红色背景：

<li style="background: red"><a href="#tab1">PROGRAM</a></li>

【讨论】：

对于新人来说，直接学习他们使用 css 表而不是内联编码可能会更好..
也许吧。使用 CSS 表不是问题的一部分，我的代码是完整的，可以就地工作。

【解决方案5】：

例如，如果您想将绿色添加到 <li> 标记，您可以执行以下操作：

<li style="background: green;"><a href="#tab1">PROGRAM</a></li>

但这并不是真正的最佳实践，因为通常您希望将 HTML 和 CSS 分开。所以在 CSS 中你会这样做：

li { background: green; }

或使用hex color codes:

li { background: #00ff00; }

如果您只想更改一个特定的<li> 标签，您可以为其添加一个类：

<li class="precious">

然后对这个类应用一个css规则：

.precious { background: #00ff00; }

只有这个带有 .precious 类的 <li> 标签才会被样式化。

实时示例：http://jsfiddle.net/pulleasy/WEdmt/

【讨论】：

【解决方案6】：

您还可以使用border-radius 元素让您的生活变得更轻松。对于你正在做的事情是：

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    float: left;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
}

这会给你同样的结果。另外例如，您需要添加高度和宽度才能获得某种结果。因此，如果是这种情况，您将需要这样做：

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    float: left;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
    height: 100px; 
    width: 100px; 
}

这将为您提供我认为您正在寻找的结果。如果您希望使用像素而不是百分比来进行流畅的布局，您将需要使用它。（注意这仅适用于宽度、高度和定位）。

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
    position: absolute;
    height: 10%;
    width: 10%; /*Replace these percentiles with your width and height*/
}

我假设你知道如何制作

【讨论】：

【解决方案7】：

使用十六进制代码的替代方法是使用 RGB / RGBA：

background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);

通过添加 alpha 和透明度支持，您可以更好地控制颜色，但不幸的是，某些浏览器不支持它（IE，即，虽然我不了解 IE 10）。

【讨论】：