欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    list-style属性是css的一个简写属性,用于在一个声明中设置所有的列表属性。可以设置的列表属性有:列表项标记的类型、标记位置、图像标记;可以不设置其中的某个值,比如"list-style:circleinside;"也是允许的。
    csslist-style属性怎么用?
    list-style属性在一个声明中设置所有的列表属性。
    说明:
    该属性是一个简写属性,涵盖了所有其他列表样式属性。
    由于它应用到所有display为list-item的元素,所以在普通的HTML和XHTML中只能用于li元素,不过实际上它可以应用到任何元素,并由list-item元素继承。
    可以按顺序设置如下属性:list-style-type,list-style-position,list-style-image。
    ● list-style-type:设置列表项标记的类型。
    ● list-style-position:设置在何处放置列表项标记。
    ● list-style-image:使用图像来替换列表项的标记。
    可以不设置其中的某个值,比如"list-style:circleinside;"也是允许的。未设置的属性会使用其默认值。
    注释:所有浏览器都支持list-style属性。
    csslist-style属性的使用示例
    示例1:不同的列表项标记
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="utf-8">
    <style>
    ul.a{list-style:circle;}
    ul.b{list-style:square;}
    ol.c{list-style:upper-roman;}
    ol.d{list-style:lower-alpha;}
    </style>
    </head>
    <body>
    <p>无序列表实例:</p>
    <ulclass="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>CocaCola</li>
    </ul>
    <ulclass="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>CocaCola</li>
    </ul>
    <p>有序列表实例:</p>
    <olclass="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>CocaCola</li>
    </ol>
    <olclass="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>CocaCola</li>
    </ol>
    </body>
    </html>
    效果图:
    1.jpg
    示例2:指定列表项标记的图像
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="utf-8">
    <style>
    ul
    {
    list-style:url('sqpurple.gif');
    }
    </style>
    </head>
    <body>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>CocaCola</li>
    </ul>
    </body>
    </html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r56276.shtml