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

最新推荐文章于 2024-10-02 15:35:50 发布

龙腾四海365

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量513

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u011637069/article/details/48792107

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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>