列表样式
list-style-type
list-style-image
显示方式：
默认显示方式
改变显示方式
鼠标形状：
如何改变属性形状
cursor属性
list-style-type：
该属性控制列表中列表项标志的样式
无序列表
有序列表
list-style-image
该属性使用图像替换列表项的标志
取值为：URL（），制定图像有序或无序列表项的标志
列表样式代码：
<!doctype html>
<html>
<head>
<title>列表样式</title>
<meta charset="utf-8"/>
<style type="text/css">
.open {
list-style-image: url("../images/open.png");
}
.close {
list-style-image: url("../images/close.png");
}
.add {
list-style-image: url("../images/add.png");
}
.modify {
list-style-image: url("../images/modify.png");
}
.delete {
list-style-image: url("../images/remove.png");
}
</style>
</head>
<body>
<ul>
<li class="open">
部门管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
<li class="close">
员工管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
<li class="close">
资产管理
<ul>
<li class="add">增加</li>
<li class="modify">修改</li>
<li class="delete">删除</li>
</ul>
</li>
</ul>
</body>
</html>
元素显示方式：
除了默认的显示效果外，可以使用display属性来修改属性修改元素框
的现实方式，改变生成框的类型
改变元素的现实方式，取值有：
none，block，inline，inline‘-block
代码如下：
<!doctype html>
<html>
<head>
<title>元素显示方式</title>
<meta charset="utf-8"/>
<style type="text/css">
.block {
/*设置为块元素*/
display: block;
}
.inline {
/*设置为行内元素*/
display: inline;
}
.none {
/*隐藏元素*/
display: none;
}
</style>
</head>
<body>
<img src="../images/image1.png" class="block"/>
<img src="../images/image1.png" class="block"/>
<img src="../images/image1.png" class="block"/>
<img src="../images/image1.png" class="none"/>
<p class="inline">好多照片</p>
<p class="inline">好多照片</p>
</body>
</html>
鼠标形状：
可以使用cursor属性置顶显示给用户的鼠标类型
可以为用户提供一种可视化的暗示，提示可以进行
的操作
cursor属性
sursor属性定义了鼠标指针放在一个元素边界范围内时多用的光标形状
可取值：
default
pointer
crosshair
text
wait
help
时间： 2024-12-16 05:23:04