美文网首页
一个比较棒的html列表自定义方式

一个比较棒的html列表自定义方式

作者: BGBM | 来源:发表于2018-08-13 23:16 被阅读0次

Q:怎么在网页中用 ol 标签 + css 做出如图所示的列表项?求解!

怎么在网页中用 ol 标签 + css 做出如图所示的列表项?求解!.jpg

A:如下所示

<!DOCTYPE>
<html>
<head>
    <style>
    ol {counter-reset:lt}
    li {list-style:none;}
    li::before{content:"("counter(lt)")"; counter-increment:lt 1; }
    </style>
</head>
<body>
<ol> 
    <li>新歌top100</li> 
    <li>新曲top500</li> 
    <li>中文金曲榜</li> 
</ol>
</body>
</html>

来源:https://zhidao.baidu.com/question/452557735.html
注意:有的浏览器估计不支持。

相关文章

  • 一个比较棒的html列表自定义方式

    Q:怎么在网页中用 ol 标签 + css 做出如图所示的列表项?求解! A:如下所示 来源:https://zh...

  • html列表

    什么是html列表 html列表分为有序列,无序列表和自定义列表。 1.无序列表:无序列表是一个项目的列表,此列项...

  • HTML笔记--列表标签

    HTML笔记--列表标签 标签(空格分隔): HTML 列表标签: 定义列表:带缩进的列表如这种样式的: 自定义...

  • HTML列表

    HTML支持有序、无序和定义列表无序列表: 有序列表: 嵌套列表: 自定义列表: HTML 列表标签 定义有序列表...

  • HTML基础二

    HTML列表: 在html中,列表共分为三种:有序列表,无序列表和自定义列表 有序列表:有序列表中的各个列表都是有...

  • 前段学习笔记三

    html部分标签 列表标签:分为有序列表( )和无序列表( )和自定义列表( ) 表格标签t...

  • HTML基本知识(二)

    列表 无序列表 标签, 项 有序列表 标签, 项 自定义列表 -嵌套列表 块 块级元素,可用于组合其他HTML元素...

  • HTML列表-14

    HTML 支持有序、无序和定义列表。无序列表实例: 有序列表实例: 自定义列表: 提示: 列表项内部可以使用段落、...

  • html列表

    html有三种列表:有序列表、无序列表、自定义列表 有序列表:有序列表是一列项目,列表项目使用数字进行标记。 有序...

  • HTML阶段第四天

    1、HTML高级标签 有序列表 ol>li无序列表 ul>li自定义列表 dl>dt+dd+dd 2、表格 tab...

网友评论

      本文标题:一个比较棒的html列表自定义方式

      本文链接:https://www.haomeiwen.com/subject/mvvpbftx.html