zoukankan      html  css  js  c++  java
  • CSS(7)列表

      CSS列表属性主要包括列表类型(list-style-type)、列表图像(list-style-image)和列表位置(list-style-position)。

    一、list-style-type

      list-style-type属性用于设置列表类型(标志类型)。例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点(disc);在有序列表中,标志可能是字母(a/A/...)、数字(1/i/I...)或另外某种计数体系中的一个符号。例如,下面的声明把无序列表中的列表项标志设置为方块。

     /*将无序列表中的列表项标志设置为方块*/
      ul {list-style-type : square} 

    二、list-style-image

      list-style-image属性用于设置列表的类型为一幅图片,也就是使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。list-style-image属性的语法为:ul li {list-style-image : url(xxx.gif)},只需要简单地使用一个 url() 值,就可以使用图像作为标志。 例如,下面的声明把图像设置为列表中的项目标记:

    /*把图像设置为列表中的项目标记*/
    ul
      {
      list-style-image:url("/i/arrow.gif");
      list-style-type:square;
      }

    说明:上面的例子将ul中li的项目标记用list-style-image属性设置为"/i/arrow.gif"这幅图片,并且使用一个list-style-type属性设置来防止图像标记不可用。

    三、list-style-position

      list-style-position 属性用于设置列表项标记的位置,就是指定在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置,取值包括:外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义;内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。例如,下面的例子规定列表中列表项目标记的位置:

    /*列表项标记在列表内容的内部*/
    ul.inside 
    {
    list-style-position: inside
    }
    
    /*列表项标记在列表内容的外部*/
    ul.outside 
    {
    list-style-position: outside
    }

    四、list-style
      list-style是各种列表属性的一个组合,是一种简写属性,它在一个声明中设置所有的列表属性。该声明涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

    /*CSS列表的简写*/
    li {list-style : url(example.gif) square inside}

    参考:http://www.w3school.com.cn/css/css_list.asp

  • 相关阅读:
    网页日历显示控件calendar3.1
    切换“使用被动式FTP”
    href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别
    CSS布局--上中下布局(上下固定,中间自适应)
    css字体颜色动画
    怎么让jQuery支持swipe事件
    html 5 canvas
    javascript面向对象
    WEB相关存储方式
    angularjs
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2664635.html
Copyright © 2011-2022 走看看