css怎么实现实心圆点呀?

html-css05

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>

list-style:none <ul><li>设置列表标记默认会是实心圆点,设成none就是没有标记列表格式有好几种。list-style-type设置列表的格式为none也就是没有格式。操作方法如下:

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

2、在test.html文件内,使用ul、li标签创建一个列表,分别为测试一,测试二,测试三。

3、在test.html文件内,给ul标签添加一个class属性,用于样式的设置。

4、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

5、在css标签内,通过class来设置ul的样式,将list-style属性设置为none,便可以实现取消掉li前面的点。

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.redcircle {undefined

position: absolute

margin: 52px 45px

width: 12px

height: 12px

background: #FF0000

border-radius: 50%

border: 1px solid #FF6347

}

.greencircle {undefined

position: absolute

margin: 52px 45px

width: 12px

height: 12px

background: #228B22

border-radius: 50%

border: 1px solid #3CB371

}

</html>