【HTML】列表结构

news2025/1/16 12:42:26

列表结构

    • HTML
    • 效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表结构</title>
    <style type="text/css">
        ol { list-style:none;} /*清除默认的序号*/
        li:before {color:#f00; font-family:Times New Roman;} /*设计层级目录序号的字体样式*/
        li{counter-increment:a 1;}  /*设计递增函数a,递增起始值为1 */
        li:before{content:counter(a)". ";}   /*把递增值添加到列表项前面*/
        li li{counter-increment:b 1;} /*设计递增函数b,递增起始值为1 */
        li li:before{content:counter(a)"."counter(b)". ";}  /*把递增值添加到二级列表项前面*/
        li li li{counter-increment:c 1;}  /*设计递增函数c,递增起始值为1 */
        li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把递增值添加到三级列表项前面*/
        </style>
</head>
<body>
    <ol>
        <li>一级列表项目1
            <ol>
                <li>二级列表项目1</li>
                <li>二级列表项目2
                    <ol>
                        <li>三级列表项目1</li>
                        <li>三级列表项目2</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>一级列表项目2</li>
    </ol>
</body>
</html>

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/378987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HIVE --- zeppelin安装

目录 把zeppelin压缩包拷贝到虚拟机里面 解压 改名 修改配置文件 编辑zeppelin-site.xml—将配置文件的ip地址和端口号进行修改 编辑 zeppelin-env.sh—添加JDK和Hadoop环境 配置环境变量 刷新环境变量 拷贝Hive文件 拷贝外部文件 启动zeppelin 启动Hadoop&Hi…

Web API接口鉴权方式

一、什么是鉴权&#xff1f;为什么要鉴权 鉴权&#xff08;authentication&#xff09;&#xff0c;也叫做认证&#xff0c;即验证用户是否拥有访问系统的权利。 HTTP本身是无状态的请求&#xff0c;每次请求都是一次性的&#xff0c;并不会知道请求前后发生了什么。但在很多…

记一次linux服务器磁盘空间占满的问题排查

问题&#xff1a;服务器安装后两天&#xff0c;发现磁盘空间使用满了【date: write error: No space left on device】问题排查&#xff1a;1、使用df -hl命令查看2、使用du -hl --max-depth1&#xff0c;从根目录开始查起&#xff0c;最后发现&#xff0c;磁盘的空间全部被/va…

自学5个月Java找到了9K的工作,我的方式值得大家借鉴 第二部分

我的学习心得&#xff0c;我认为能不能自学成功的要素有两点。 第一点就是自身的问题&#xff0c;虽然想要转行学习Java的人很多&#xff0c;但是非常强烈的想要转行学好的人是小部分。而大部分人只是抱着试试的心态来学习Java&#xff0c;这是完全不可能的。所以能不能学成Jav…

【Linux】项目的自动化构建-make/makefile

&#x1f4a3;1.背景会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的 规则来指定&#xff0c;哪些文件需要先编译&#xff…

Java List系列(ArrayList、LinekdList 以及遍历中删除重复元素时发生的异常和解决办法)

目录List集合系列List系列集合特点List集合特有方法List集合的遍历方式ArrayList集合的底层原理分析源码LinkedList集合的底层原理集合的并发修改异常问题&#xff08;删除重复元素时&#xff09;List集合系列 List系列集合特点 ArrayList、LinekdList &#xff1a;有序&#…

HNU工训中心:电子开关与信号隔离

工训中心的牛马实验 1.实验目的&#xff1a; 1) 认识三极管和MOS管构成三端电子开关电路&#xff1b; 认识信号隔离的继电器和光电隔离方式。 2) 认识施密特触发器&#xff0c;掌握一种波形变换方法。 3) 实现一种脉冲波形发生器。 2.实验资源 HBE硬件基础电路实验箱、示波…

2.FFmpeg5.1下载和使用

1.FFmpeg库下载 进入http://ffmpeg.org/download.html 官网,如下图所示: 由于我们初期只在windows上

北京筑龙吴英礼:ChatGPT对采购与招标数字化的影响

2月25日下午&#xff0c;平台经济学沙龙&#xff08;第八期&#xff09;在清华大学互联网产业研究院成功举办。本期沙龙以“ChatGPT对招标采购的影响”为主题&#xff0c;由清华大学互联网产业研究院平台经济课题组组长、中国招标投标公共服务平台原总经理、首席经济学家平庆忠…

Leetcode19. 删除链表的倒数第n个结点

一、题目描述&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1输出&#x…

Android开发八股文,Android也有自己的八股文了

前言别的行业都有自己的八股文&#xff0c;凭什么Android没有。2023春招即将来临&#xff0c;很多同学会问 Android开发的面试题有必要背吗&#xff1f;我的回答是&#xff1a;很有必要。你可以讨厌这种模式&#xff0c;但你一定要去背&#xff0c;因为不背你就进不了大厂。国内…

SSL/TLS协议信息泄露漏洞(CVE-2016-2183)调查解决

目录结构前言测试回馈漏洞介绍漏洞解决参考文献前言 产品测试阶段出现“SSL/TLS协议信息泄露漏洞&#xff08;CVE-2016-2183&#xff09;”&#xff0c;解决过程记录如下 测试回馈 建议&#xff1a;避免使用IDEA、DES和3DES算法 1、OpenSSL Security Advisory [22 Sep 2016] …

P02 滴水逆向1月4号公开课

公开课进制转换汇编如何工作的逻辑运算二进制逻辑运算|| 运算 和 | 运算&& 运算 和 & 运算^(异或) 运算! (非)运算左移二进制逻辑运算应用加法运算运算与电脑硬件进行加密寄存器内存寻址范围使用内存寻址公式堆栈变形的艺术进制转换 二进制十六进制如何转换的 汇…

k8s学习之路 | Day17 k8s 工作负载

文章目录工作负载的定义工作负载资源分类工作负载的定义 官方参考链接&#xff1a;https://kubernetes.io/docs/concepts/workloads/ A workload is an application running on Kubernetes. Whether your workload is a single component or several that work together, on K…

已解决ERROR: Failed building wheel for opencv-python-headless

已解决ERROR: Failed building wheel for opencv-python-headless Failed to build opencv-python-headless ERROR: Could not build wheels for opencv-python-headless, which is required to install pyproject.toml-based projects报错信息亲测有效 文章目录报错问题报错翻…

多任务学习概述

文章目录前言1 文章信息2 背景、目的、结论2.1 背景2.1.1 多任务的类型分类2.1.1.1 相关任务的分类2.1.1.2 将输入变输出的逆多任务学习2.1.1.3 对抗性多任务学习2.1.1.4 辅助任务提供注意力特征的多任务学习2.1.1.5 附加预测性辅助任务的多任务学习3 内容与讨论3.1 多任务学习…

HTML+ CSS 笔记

CSS1. 外边距合并 margin2. 浮动和清除浮动3. CSS 属性书写顺序(重点)4. 页面布局分析5. 定位定位模式子绝父相&#xff1a;z-index定位的拓展6. 元素的显示与隐藏7. 精灵图 sprites8. 字体图标 iconfont9. 居中10. 文字溢出处理情况11.HTML5 和CSS3 新增标签12.品优购1. 项目规…

多数据库管理工具哪家强?ChatGPT点评,第一位并不是Navicat

SQL逐渐成为职场必备的编程语言&#xff0c;相信大家都不陌生。SQL是一种结构化查询语言&#xff0c;是用于数据库之间通信的编程语言。每个数据库都有着自己独特的访问规则&#xff0c;但大体上是遵循SQL标准。 因此&#xff0c;辗转于不同的数据库之间&#xff0c;开发者或D…

Codeforces Round #852 (Div. 2) D. Moscow Gorillas

传送门 题意&#xff1a; 给你两个长度为n的排列p&#xff0c;q&#xff0c;同时定义mex表示为在mex中&#xff0c;缺少的最小正整数&#xff1a;如 mex[1&#xff0c;3]2&#xff0c;mex[1,2,3]4。 问你有多少个l,r使mex([])mex([])。 思路 &#xff1a; 可以从mex1,2,3,4,..n…

Word 行中公式与文字对不齐的解决方案

Word 行中公式与文字对不齐的解决方案问题-公式与文字不对齐解决方案简述版(亲测)解决方案详细版(亲测)参考方案问题-公式与文字不对齐 由于复制或其它误操作&#xff0c;可能会出现Word一行中公式与文字并不对齐的问题&#xff0c;有的公式会偏上或偏下&#xff0c;如下图所示…