时间戳

首页 > 技术文章 > CSS声明 列表样式 显示方式 鼠标形状

CSS声明 列表样式 显示方式 鼠标形状

xiaziteng 2015-10-09 22:03 原文

 

列表样式

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

 

推荐阅读