您现在的位置是:首页 > 正文

html改有序列表的序号颜色,CSS3 自定义OL/LI有序列表序号样式

2024-02-01 04:17:12阅读 2

CSS

语言:

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Rambla:400,400italic,700);

html {

box-sizing: border-box;

font-size: 62.5%;

}

*,

*::before,

*:after {

box-sizing: inherit;

}

body {

font-family: Rambla, sans-serif;

font-size: 2rem;

line-height: 1.5;

color: blue;

}

h1 {

text-align: center;

}

.wrapper {

margin: 0 auto;

width: 85%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

}

@media (max-width: 1100px) {

.wrapper {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

}

ol {

counter-reset: li;

margin: 20px 0;

padding-left: 0;

}

ol > li {

position: relative;

margin: 0 0 25px 2em;

padding: 4px 8px 4px 20px;

list-style: none;

}

ol > li::before {

content: counter(li);

counter-increment: li;

position: absolute;

top: -2px;

left: -2em;

width: 2em;

margin-right: 8px;

padding: 4px;

font-weight: bold;

text-align: center;

}

li ol,

li ul {

margin-top: 6px;

}

ol ol li:last-child {

margin-bottom: 0;

}

.disc > li::before {

color: white;

background-color: blue;

border-radius: 50%;

}

.circle > li::before {

color: blue;

border: solid 2px blue;

border-radius: 50%;

}

.angle > li::before {

color: blue;

border-right: solid 3px blue;

border-bottom: solid 3px blue;

}

.shadow > li::before {

color: white;

background: blue;

box-shadow: 5px 5px 0 0 #009;

}

.rombo > li {

margin-bottom: 25px;

}

.rombo > li::before {

color: white;

z-index: 2;

}

.rombo > li::after {

position: absolute;

top: -2px;

left: -2em;

width: 2em;

margin-right: 8px;

padding: 4px;

background-color: blue;

height: 2em;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

content: '';

z-index: 1;

}

.underline > li::before {

border-bottom: solid 3px blue;

}

网站文章

  • 表格与表单

    表格与表单

    表格、表单

    2024-02-01 04:17:04
  • .htaccess的301重定向代码汇总

    很久以前做过一个图片站,很久没有打理了。域名不打算续费了,但是这么多年的权重不能浪费了啊!于是我决定将它301跳转到另一个域名的子域名,在到期之前传递点权重。.htaccess的301重定向方式有以下几种:1.把不带www的域名301重定向到带www的域名

    2024-02-01 04:16:58
  • Java包装类练习题

    选择题1.C2.C3.BC4.D5.C6.B7.D8.A编程题完成基本数据类型和包装类之间的转换。public class HelloWorld { public static void main(String[] args) { // 定义int类型变量,值为100 int score = 100; ...

    2024-02-01 04:16:31
  • Linux下删除日志失败,df -h 和 du -sh 显示的数据不一致现象

    Linux下删除日志失败,df -h 和 du -sh 显示的数据不一致现象 问题背景: 在机器上的服务日志没有分天,日志堆积,磁盘被写满,当我直接执行rm 命令删除日志时,执行完之后,发现: 采用d...

    2024-02-01 04:16:25
  • javascript 函数和变量是区分大小写的

    javascript区分大小写吗, 我试了一下好像区分的2012-09-27 20:29zxingruo | 分类:JavaScript | 浏览148次分享到:2012-09-27 20:35网友采纳JS是对大小写敏感的,变量名,函数,关键字都要区分大小写,比如说变量a和A其实是两个不同的变量.

    2024-02-01 04:16:18
  • 能上QQ但不能打开网页——解决办法

    一、感染了病毒所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但老半天没响应。在任务管理器里查看进程,(进入方法,把鼠标放在任务栏上,按右键—任务管理器—进程)看看CPU的占用率如何,如果是100%,可以肯定,是感染了病毒,这时你想运行其他程序简直就是受罪。这就要查查是哪个进程贪婪地占用了CPU资源。 找到后,最好把名称记录下来,然后点击结束,...

    2024-02-01 04:15:51
  • react html2canvas 遇到的坑

    html2canvas https://html2canvas.hertzen.com 1. svg 图片导出后样式不全 这是由于html2canvas 读取dom树时不会读取svg标签外面的样式。 ...

    2024-02-01 04:15:44
  • MTK 开启DISP LOG

    需要执行如下命令: adb shell “echo dbg_log:1 > /d/dispsys”

    2024-02-01 04:15:36
  • 超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    一、BIOS常规设置 新装机涉及到的BIOS常规设置有哪些? 主要是2方面的设置 (1)CMS兼容性支持模块,请设置【Enabled】,即是开启了CSM: 部分主板若是使用集显,CSM显示灰色,这是由...

    2024-02-01 04:15:28
  • mootools_介绍MooTools模板化

    mootoolsOne major problem with creating UI components with the MooTools JavaScript framework is that...

    2024-02-01 04:14:58