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

 

列表样式

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

 

posted @ 2015-10-09 22:03  夏子藤  阅读(411)  评论(0编辑  收藏  举报