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

标题: 纯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">

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

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

  22.         ol {
  23.             width: 100%;
  24.             height: auto;
  25.             counter-reset: my-counter;
  26.             list-style: none;
  27.         }

  28.         li {
  29.             width: 100%;
  30.             height: 43px;
  31.             line-height: 43px;
  32.             text-align: left;
  33.             font-size: 20px;
  34.             color: #ddd;
  35.             cursor: pointer;
  36.         }

  37.         li:hover {
  38.             background-color: rgba(0, 156, 247, 0.5);
  39.             color: #fff;
  40.         }

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

  59.         li:nth-child(1) {
  60.             color: #effb71;
  61.         }
  62.     </style>
  63. </head>

  64. <body>
  65.     <div class="search_window">
  66.         <ol>
  67.             <li>大米</li>
  68.             <li>二米</li>
  69.             <li>三米</li>
  70.             <li>四米</li>
  71.             <li>五米</li>
  72.             <li>六米</li>
  73.             <li>七米</li>
  74.         </ol>
  75.     </div>
  76. </body>

  77. </html>
复制代码

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

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

感谢大家的支持与厚爱!






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