1

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

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

4

7 回答 7

2

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>
于 2013-06-05T14:54:39.280 回答
1

首先，任何 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>
于 2013-06-05T14:55:07.797 回答
1

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

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

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

于 2013-06-05T14:58:55.250 回答
0

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

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

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

li { background: green; }

或使用十六进制颜色代码：

li { background: #00ff00; }

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

<li class="precious">

然后将 css 规则应用于此类：

.precious { background: #00ff00; }

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

现场示例：http: //jsfiddle.net/pulleasy/WEdmt/

于 2013-06-05T15:03:41.813 回答
0

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

<li style="background: red"><a href="#tab1">PROGRAM</a></li>
于 2013-06-05T14:55:38.853 回答
0

您还可以使用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*/
}

我假设你知道如何制作

于 2013-06-05T16:16:09.090 回答
0

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

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

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

于 2013-06-05T16:22:41.807 回答