css li 显示不同颜色

html-css016

css li 显示不同颜色,第1张

这个问题可以给每个li增加一个class属性，这样就可以统一管理每个li的背景色了。在style里面设置class对应的background-color。你想要的相同颜色的li的class属性值相同就可以了

#top_e li {

font-size:9pt

background-color: #4BAFDA

color:#000000

text-decoration:none

display: inline

border: 1px solid #000000

overflow: visible

width: 11%

height: 40px

margin-bottom: 10px

text-align: center

padding-top: 12px

}

#top_e li {

color:red

}

<div id="top_e">

<li>操作</li>

<li>基站名称</li>

<li>进站人员</li>

<li class="one">联系电话</li>

<li>归属公司</li>

<li>进站时间</li>

<li>出站时间</li>

<li>进站原因</li>

<li>操作</li>

</div>

题目有点简单，不清楚具体问题是什么。

下面写了一下关于鼠标移入移出，li变色的例子，仅供参考。

思路：当鼠标移入时，修改li的背景色，直接用background修改就可以。

鼠标移出时，恢复原来li的背景色。

 <body>

     <ul id="ul">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

    <script>

  var oUl = document.getElementById('ul')

var aLi = oUl.children

for(var i=0i<aLi.lengthi++){

aLi[i].onmouseover = function(){

this.style.background = 'red'

}

aLi[i].onmouseout = function(){

this.style.background = ''

}

}

</script>