列表实现方法

html5实现列表效果,主要用到了ul、ol标签,ul和ol的区别在于:ul为无序列表,ol为有序列表

打开软件,点击file,选择New project,在弹出的对话框中,选择static web选项中的html5,点击next,在新对话框中,输入项目名称,点击finish

在html文件中,写入ul,并利用li添加列表内容

在html文件中,写入ol,利用li添加列表内容,可以看到,ol的列表是有序排列的

若想实现如同QQ联系人那种层级列表效果,我们可以嵌套ul、或者ol

ul和ol的type形式均有多种,选择不同的type形式,得出的样式也不一样

html中去除ul,li标签的样式列表标签的点?

首先来看看我们使用列表标签出现的问题。<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

我们发现会出现了一个黑的小点点。因为我们使用的是无序列表标签。那么要怎么除去这些点点呢。

接下来看看怎么解决问题咯。先打开记事本或者其他的html编辑器。我使用的editplus.新建一个html文件

我们只需要给无序列表标签添加一个样式就可以了。在样式标签里面写

加入如下的代码:ul li{list-style: none;}这样就可以去除默认的样式了。当然你也可以直接写在标签里面把样式,不过我推荐大家使用这种这发,使得代码后期方便维护。

运行结果就可以看到效果了。哈哈。是不是很简单啊

发表评论

电子邮件地址不会被公开。 必填项已用*标注