源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1973|回复: 0

[CSS/Html] 纯CSS实现ol li标签左边带数字的实例代码

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2023-4-12 12:35:41 | 显示全部楼层 |阅读模式

需求: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标签左边带数字的实例代码今天就介绍到这,更多内容请关注锦尚中国!

感谢大家的支持与厚爱!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-23 14:12 , Processed in 0.038836 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明