CSS 基础学习-111 css设置列表颜色样式

由 hrs, 17 十月, 2021

使用背景颜色和内边、外边距来设置列表样式

实例代码；

<html>
  <head>
    <meta charset="utf-8">
    <style>
      ol,ul{
        width:400px;
      }
      ol{
        background-color:#ff9999;
        padding:20px 20px 20px  40px;
      }
      ul{
        background-color:#3399ff;
        padding:20px 20px 20px 40px;
      }
    ol>li{
        background-color:#ffe5e5;
        margin:5px;
        padding:5px;
      }
    ul>li{
        background-color:#cce5ff;
        padding:5px;
        margin:5px;
      }
    </style>
  </head>
  <body>
    <h1>设置列表颜色实例</h1>
    <ol>
      <li>咖啡</li>
      <li>茶</li>
      <li>可乐</li>
      <li>雪碧</li>
    </ol>

    <ul>
      <li>咖啡</li>
      <li>茶</li>
      <li>可乐</li>
      <li>雪碧</li>
    </ul>
  </body>
</html>

运行效果：

css-111.png

标签

评论