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

来源：互联网发布：阿里云 apk 编辑：程序博客网时间：2024/05/20 09:46

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属性

0 0