1、首先打开可以编写前端代码的编辑器,新建一个test.html文件,HTML文件是前端页面文件,可以在浏览器直接打开查看效果。新建文件后写入基本的代码,如图所示。
2、接下来在body标签里面写入一个div标签,并在里面写一个ul标签,ul里面包含四个li标签,并写上1111,2222,3333,4444的文本。同时,还有写入id或class属性,以便于后面设置样式。
3、上一步的效果如图所示,可以看到,现在只是一个普通的列表,四个元素前面都有黑点。这是ul、li标签的默认样式。。
4、接着设置居中效果,在style标签里面写入如图所示代码,对元素的样式进行设置。
5、写入代码后,在浏览器里打开该文件,查看效果,如图所示,达到了居中的效果。
1、定义不同
ul 是 Unordered List(无序列表)的缩写。<li>标签定义列表项目(li是lists的缩写)。
2、用法不同
<ul>标签定义无序列表。使用 <li>标签定义的列表可以是个无序列表也可以是有序列表。
3、支持的HTML全局属性不同
<li>标签支持所有的HTML 全局属性。<ul>标签支持 HTML 中的全局属性:accesskey、class、dir、id、lang、style、tabindex、title。
4、属性不同
<ul>标签中的属性:compact、type。<ul>标签:id, class, title, style, dir, lang, xml:lang。
5、元素级别不同
ul 是块级元素可以定义宽和高,li表示行排列不能单独使用,需要在ul和ol里面,配合使用。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)