源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 纯CSS实现ol li标签左边带数字的实例代码 [打印本页]
作者: 洪七公    时间: 2023-4-12 12:35
标题: 纯CSS实现ol li标签左边带数字的实例代码

需求：ol li标签左边带数字的列表

思路：

1.ol css设置属性： counter-reset: my-counter; list-style: none;

2.li css设置属性： `
  1.   li::before {  
  2.         content: counter(my-counter);
  3.         counter-increment: my-counter;
  4.         display: block;
  5.         float: left;`  
  6.         }
复制代码

直接给出一个demo实例代码吧：
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             -webkit-box-sizing: border-box;
  12.             box-sizing: border-box;
  13.         }

  15.         .search_window {
  16.             position: absolute;
  17.             top: 53px;
  18.             left: 0;
  19.             width: 436px;
  20.             height: auto;
  21.             background-color: rgba(6, 34, 61, 0.7);
  22.             padding: 10px 0;
  23.         }

  25.         ol {
  26.             width: 100%;
  27.             height: auto;
  28.             counter-reset: my-counter;
  29.             list-style: none;
  30.         }

  32.         li {
  33.             width: 100%;
  34.             height: 43px;
  35.             line-height: 43px;
  36.             text-align: left;
  37.             font-size: 20px;
  38.             color: #ddd;
  39.             cursor: pointer;
  40.         }

  42.         li:hover {
  43.             background-color: rgba(0, 156, 247, 0.5);
  44.             color: #fff;
  45.         }

  47.         li::before {
  48.             content: counter(my-counter);
  49.             counter-increment: my-counter;
  50.             display: block;
  51.             float: left;
  52.             margin-top: 10px;
  53.             margin-left: 20px;
  54.             width: 26px;
  55.             height: 26px;
  56.             background-color: #0e5b9f;
  57.             border-radius: 13px;
  58.             margin-right: 60px;
  59.             line-height: 26px;
  60.             text-align: center;
  61.             font-size: 14px;
  62.             color: #fff;
  63.             background-color: #0096ff;
  64.         }

  66.         li:nth-child(1) {
  67.             color: #effb71;
  68.         }
  69.     </style>
  70. </head>

  72. <body>
  73.     <div class="search_window">
  74.         <ol>
  75.             <li>大米</li>
  76.             <li>二米</li>
  77.             <li>三米</li>
  78.             <li>四米</li>
  79.             <li>五米</li>
  80.             <li>六米</li>
  81.             <li>七米</li>
  82.         </ol>
  83.     </div>
  84. </body>

  86. </html>
复制代码

根据自己的需求调整样式，便可达到你想要的数字排序效果！

好了，关于纯CSS实现ol li标签左边带数字的实例代码今天就介绍到这，更多内容请关注锦尚中国！

感谢大家的支持与厚爱！





欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3