css怎么实现实心圆点呀?

html-css097

css怎么实现实心圆点呀?,第1张

<li>的默认样式就带有实心点,或定义个样式;list-style-type : disc

例子:

<html>

<head>

<style type="text/css">

ul.disc {list-style-type: disc}

ul.circle {list-style-type: circle}

ul.square {list-style-type: square}

ul.none {list-style-type: none}

</style>

</head>

<body>

<ul class="disc">

<li>咖啡</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="circle">

<li>咖啡</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="square">

<li>咖啡</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

<ul class="none">

<li>咖啡</li>

<li>茶</li>

<li>可口可乐</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

ul.a {list-style-type:circle}

ul.b {list-style-type:square}

ol.c {list-style-type:upper-roman}

ol.d {list-style-type:lower-alpha}

</style>

</head>

<body>

<p>无序列表实例:</p>

<ul class="a">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<ul class="b">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>有序列表实例:</p>

<ol class="c">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ol class="d">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>