css怎么实现实心圆点呀?

html-css0103

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>

1、首先新建一个html文件,命名为test.html。

2、在test.html文件内,使用div标签一个模块,在div内,再使用div标签创建两个内部模块,下面将让两个内部div并排显示。

3、在test.html文件内,分别给每一个div设置class属性,分别为wdiv,fldiv,frdiv。

4、在css标签内,设置class为wdiv的div样式,定义其宽度为500px,高度为400px,背景颜色为灰色。

5、在css标签内,再分别设置class为fldiv和frdiv的样式,定义它们的宽度为240px,高度为350px,同时,使用float属性分别设置一个div浮动向左,另一个浮动向右,从而实现并排显示。

6、最后在浏览器打开test.html文件,查看实现的效果,就完成了。

在ul标签下li的默认样式为一个实心圆(disc)   可忽略不写li样式的改变是用 list-style:属性值 来改变的我们给li设置css,去除默认样式(实心圆)将li的样式设置为空心圆将li的样式设置为实心正方形其他:  decimal   :   CSS1 阿拉伯数字   lower-roman   :   CSS1 小写罗马数字     upper-roman   :   CSS1 大写罗马数字     lower-alpha   :   CSS1 小写英文字母     upper-alpha   :   CSS1 大写英文字母     armenian   :   CSS2 传统的亚美尼亚数字     cjk-ideographic   :   CSS2 浅白的表意数字     georgian   :   CSS2 传统的乔治数字     lower-greek   :   CSS2 基本的希腊小写字母    hebrew   :   CSS2 传统的希伯莱数字     hiragana   :   CSS2 日文平假名字符     hiragana-iroha   :   CSS2 日文平假名序号     katakana   :   CSS2 日文片假名字符     katakana-iroha   :   CSS2 日文片假名序号     lower-latin   :   CSS2 小写拉丁字母   upper-latin   :  CSS2 大写拉丁字母