如何用CSS定义标签li前面的小点，很小的点，不是默认的大圆点？不要图片做背景能做到吗？

html-css015

如何用CSS定义标签li前面的小点，很小的点，不是默认的大圆点？不要图片做背景能做到吗？,第1张

不行，如果是使用css自带的list-style属性定义前面的小圆点则不同浏览器，不同版本均有自己的解析方法，无法通过css实现具体控制，淘宝的是背景图片，使用css的list-style定义不确定因素太大，如果要求严格美观的页面布局应该在整个css中预先就清除列表元素的list-style属性然后用背景图片实现效果

方法有：

1、用图片

2、用中文标点符号（•）

3、用<li>标签（推荐！）

4、给其他标签增加下述css属性，也可实现类似li标签的功能：

<div style="display:list-itemlist-style-type:discmargin-left:2em">文字文字文字</div>

<style>

* {margin:0px padding:0px}

li {list-style:none border:1px solid #ccc text-align:center line-height:298px}

.box {width:800px height:400px overflow:hidden border:1px solid #ccc}

.first {width:298px height:298px float:left}

.line {width:500px heigth:300px float:right}

.line .c1 {width:198px height:98px float:left line-height:98px}

.line .c2 {width:298px height:98px float:left line-height:98px}

.last {width:800px height:100px float:left line-height:100px}

</style>

    

</head>

<body>

     <ul class="box">

         <li class="first">1</li>

            <li style="float:right border:none">

                <ul class="line">

                    <li class="c1">1</li><li class="c2">2</li>

                    <li class="c1">3</li><li class="c2">4</li>

                    <li class="c1">5</li><li class="c2">6</li>

                </ul>

            </li>

            <li class="last">2</li>

        </ul>

</body>