您的位置：首页 > Web前端 > CSS

【css】day04_列表样式_显示方式_鼠标形状

2015-09-28 23:03 701 查看

1.列表样式

1）list-style-type

·用来控制列表中列表项标志的样式

·无序列表取值

- none：无标记

- disc：实心圆，默认值

- circle：空心圆

- square：实心方块

·有序列表取值

- none：无标记

- decimal：数字（如1,2,3，。。。），为默认值

- lower-roman:小写罗马数字（如i,ii,iii ...）

- upper-roman:大写罗马数字（如I,II,III,。。。）

2）list-style-image

使用图片来替换列表项的标记

- 取值为：url(),指定图像作为有序或无序列表项的标志

eg：

<!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>

2.显示方式

1）默认显示方式

- 块元素：从上到下，可以设置宽高

- 行内元素：从左到右，不能设置宽高

- 行内块：从左到右，可以设置宽高

2）改变显示方式

eg：

<!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/01.jpg" class="block"/>
<img src="../images/02.jpg" class="block"/>
<img src="../images/04.jpg"/>
<img src="../images/05.jpg" class="none"/>
<img src="../images/06.jpg"/>

<p class="inline">好多照片</p>
<p class="inline">好多照片</p>
</body>
</html>

3.鼠标形状

1）如何改变鼠标形状

2）cursor属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航