css系列-ol，ul

列表

列表符号

使用 list-style-type 来设置列表样式，规则是继承的，所以在ul 标签上设置即可。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

隐藏列表符号：这个样式我们在做导航栏时经常用到

ul {list-style-type: none;
}

自定义列表样式：设置图片（注意使用小图片，因为无法调整图片大小，也可以通过下面设置背景图片的方式设置列表符号，可以调整背景图片大小），渐变色

ul li {/* list-style-image: url(xj-small.png);list-style-image: radial-gradient(10px 10px, red, black); */list-style-image: linear-gradient(45deg, red, black);
}

符号位置

控制符号显示在内容外面还是内部

选项	说明
inside	内部
outside	外部

ul {list-style-position: inside;
}

组合定义

可以一次定义列表样式

ul {list-style: circle inside;
}

背景符号

ul li {background: url(one.png) no-repeat 0 6px;background-size: 10px 10px;list-style-position: inside;list-style: none;text-indent: 15px;
}

多图背景定义

<style>ul {list-style-type: none;}ul li {background-image: url(xj-small.png), url(houdunren.jpg);background-repeat: no-repeat, repeat;background-size: 10px 10px, 100%;background-position: 5px 7px, 0 0;text-indent: 20px;border-bottom: solid 1px #ddd;margin-bottom: 10px;padding-bottom: 5px;}
</style>

追加内容

基本使用

使用伪类 ::before 向前添加内容，使用 ::after 向后面添加内容。

伪类的应用场景比较多，一定要掌握，最下面通过应用实例讲解。

a::after {content: " (坚持努力) ";
}

提取属性

使用属性值添加内容，可以使用标准属性与自定义属性（一般用data-*表示，比如data-title=“标题”）。

<style>a::after {content: attr(href);}
</style><a href="baidu.com">百度</a>

示例一：自定义提示框

代码：一定要使用自定义属性data-title，否则会出现两个提示框，一个默认，一个自定义。

<style>body{padding: 100px;background: #ccc;}button{position: relative;}button:hover::before{content: "";border:10px solid #fff;border-left-color: transparent;border-right-color: transparent;border-top-color: transparent;position: absolute;top: 12px;z-index: 1;}button:hover::after{content: attr(data-title);padding: 5px 10px;background: #fff;border: 1px solid #ddd;position: absolute;top: calc(100% + 10px);left: 0;width:max-content;color: green;}</style><body><button data-title="这是自定义提示框">按钮</button></body>

示例二：

上面提示框有个缺陷，提示框的三角是白色背景，若弹窗后面的背景也是白色，那么三角就看不出来了。所以我们需要用两个三角覆盖在一起形成一个三角，来形成一个灰色边框。

 div {width: 300px;height: 200px;border: 1px solid #000;position: relative;}div::before {content: "";border: 10px solid #000;border-right-color: transparent;border-left-color: transparent;border-top-color: transparent;position: absolute;top: -20px;left: 20px;}div::after {content: "";border: 9px solid #fff;border-right-color: transparent;border-left-color: transparent;border-top-color: transparent;position: absolute;top: -18px;left: 21px;}<body><div></div></body>

css系列-ol，ul相关推荐

DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
常用CSS元素div ul dl dt ol的简单解释
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表. <ol> <li>--& ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
HTML+CSS系列教程
HTML+CSS系列教程这里写目录标题一.HTML+CSS系列导学 1.1拨云见日 1.2溯本求源 1.3风生水起 1.4巧夺天工二.什么是HTML和CSS 2.1如何看到网站的原始代码呢? 2. ...
css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
HTML+CSS系列实战之超链接、音视频
实现一个自我介绍页面,要求用到页面的跳转.音频.视频等综合属性. 主页面的代码为:(intrudiction.html) <!DOCTYPE html> <html lang=&qu ...
【攻破css系列——第三天】复合选择器
文章目录 1. 复合选择器 1.1 定义 1.2 分类 1.3 元素分类 1.4 后代选择器 1.4.1 定义 1.4.2 语法 1.4.3 示例 1.5 子选择器 1.5.1 定义 1.5.2 语法 ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...