css不同li的背景不同

CSS是网页设计中非常重要的一部分，可以用它来设置不同元素的样式。在设计网页时，我们经常需要给不同的li元素设置不同的背景。下面我们来看一下如何通过CSS实现这一需求。

 <ul>
        <li class="bg-blue">蓝色背景</li>
        <li class="bg-green">绿色背景</li>
        <li class="bg-yellow">黄色背景</li>
    </ul>

    <style>
        .bg-blue {
            background-color: blue;
        }
        .bg-green {
            background-color: green;
        }
        .bg-yellow {
            background-color: yellow;
        }
    </style> 

上面的代码中，我们首先创建了一个无序列表，并为每个li元素设置不同的class名。然后，在样式表中为每个class名分别设置了不同的背景颜色。这样，在网页中展示时，每个li元素都将拥有不同的背景。

需要注意的是，在写CSS时，我们应该尽量避免使用内联样式。这样可以让我们的代码更加简洁、易于维护。而将所有的样式都写在一个外部样式表中，可以使得整个网站的样式更加统一。