html里的li怎么用

我们一般用的li是与ul或者是ol一直连用的。<ul>是无序列表，<ol>是有序列表。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

显示如图，每个列表项前面是个小圆圈。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

显示如下图，每个列表项前面是数字。

我们用的无序列表比较多，也就是ul li。我们拿ul li做比例，我们会给ul设置一个class，把他们的默认的margin和padding，还有前面的小圆点去掉。

<ul class="aa">

<li>Coffee</li>

<li>Milk</li>

</ul>

.aa {

margin: 0//去掉默认margin

padding: 0 //去掉默认padding

list-style: none  //去掉前面的小圆圈

}

.aa li {

padding-left: 20px//给小图标留出前面的位置

background: url(...) no-repeat left center//如果想给每个列表项前面换个小图标，可以这样把小图标以图片的形式引入

}

1、首先打开可以编写前端代码的编辑器，新建一个test.html文件，HTML文件是前端页面文件，可以在浏览器直接打开查看效果。新建文件后写入基本的代码，如图所示。

2、接下来在body标签里面写入一个div标签，并在里面写一个ul标签，ul里面包含四个li标签，并写上1111,2222,3333,4444的文本。同时，还有写入id或class属性，以便于后面设置样式。

3、上一步的效果如图所示，可以看到，现在只是一个普通的列表，四个元素前面都有黑点。这是ul、li标签的默认样式。。

4、接着设置居中效果，在style标签里面写入如图所示代码，对元素的样式进行设置。

5、写入代码后，在浏览器里打开该文件，查看效果，如图所示，达到了居中的效果。

---