列表样式
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