zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用
    MVC5+EF6 入门完整教程十
    MVC5+EF6 入门完整教程九
    MVC5+EF6 入门完整教程八
    MVC5+EF6 入门完整教程七
    MVC5+EF6 入门完整教程六
    MVC5+EF6 入门完整教程五
    MVC5+EF6 入门完整教程四
    MVC5 + EF6 完整入门教程三
    从前端的UI开始
  • 原文地址:https://www.cnblogs.com/xiaziteng/p/4865310.html
Copyright © 2011-2022 走看看