自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

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

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › 纯CSS实现ol li标签左边带数字的实例代码
返回列表 发新帖
查看: 3115|回复: 0
打印 上一主题 下一主题

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

[复制链接]
洪七公

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
跳转到指定楼层
1#
发表于 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">

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

感谢大家的支持与厚爱！

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-12-4 00:55 , Processed in 0.106958 second(s), 24 queries .

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

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