Question

我相信这很简单，但由于我是新手，所以我不知道如何做到这一点。我只是想改变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; 
}

我注意到这里＆gt;＆gt;＆gt; “背景色：3B31FF;”是我改变的地方背景的颜色，但这样做，当然改变了所有的背景颜色 ...我只需要1个“li”标签进行更改，任何HTML教程都会很好。

Answer 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>

Answer 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>

Answer 3

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

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

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

Answer 4

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

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

Answer 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/

Answer 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*/
}

我会假设您知道如何制作

Answer 7

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

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

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

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

7 个答案: