列表
列表符号
使用 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>