列表样式属性
这里的列表指的是:无序列表和有序列表
因为在整个网页布局中无序列表是使用的最多的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式属性</title>
<style type="text/css">
/*用后代元素选择器*/
.box ul{
list-style-type: none; /*去除列表前面的项目符号*/
}
</style>
</head>
<body>
<div class="box">
<h2>请列出中国的四大名著</h2>
<ul>
<li>水浒传</li>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
</ul>
</div>
</body>
</html>
代码显示的效果是这样的,是没有实心圆的
- 上图选中的地方是可以修改的有(disc、square、circle)这些效果可以自己尝试修改一下看看,这里就不在一一展示了
.box ul li{
border: 1px solid #f00; /*给文字加边框*/
height: 35px; /*要将文本在一个盒子里面垂直方向居中对齐,要将高度与行高设置为一样*/
line-height: 35px; /*边框高度*/
list-style-position: inside; /* 设置项目符号所在位置(框内还是框外,outside框外、inside框内)*/
- list-style-image:将列表前面的项目符号设置为一张图片 它的值是:url(图片的地址)
注意: url()是固定写法
.box ul li{
border: 1px solid #f00; /*给文字加边框和颜色*/
height: 35px; /*要将文本在一个盒子里面垂直方向居中对齐,要将高度与行高设置为一样*/
line-height: 35px; /*去除列表前面的项目符号 */
list-style-type: none;
list-style-image: url(图片地址,可以为相对路径也可以是绝对路径);
/* 将列表前面的符号换成一张图片 */
list-style: none url(图片地址);
}
- 以上是我随便找了一张图插入进去的效果,可以随便插入,但最好是小一点,太大的话会超过我们之前设置的框的大小
list-style: 这个属性是一个简写属性 它集成了上面三个属性的功能,可以同时设置上面的三个属性。每一个属性之前使用空格分隔!他的属性值个数可以有很多个,位置也不定
.box ul li{
border: 1px solid #f00; /*给文字加边框和颜色*/
height: 35px; /*要将文本在一个盒子里面垂直方向居中对齐,要将高度与行高设置为一样*/
list-style: none url(图片的地址);
}
图中指出的部分是必须要有空格分隔的
效果同上