• 目录

ul和li元素

阅读量: 778 编辑

ul和li元素

一、基本语法介绍

  • ul：无序列表

  • ol：有序列表

  • li：列表中项目，经常配合 ul 或 ol 一起使用

<ul>
	<li>  </li>
</ul>

<ol>
	<li>  </li>
</ol>

二、代码实战

代码的详细解读，可以参考视频教程。

新建 html 文件 07-ul.html ，编写下方程序，运行看看效果吧。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ul和li</title>
    </head>
    <body>
       <ul>
            <li style="list-style-type: none;">内容1</li>
            <li style="list-style-type: circle;">内容2</li>
            <li>内容3</li>
            <li>内容4</li>
       </ul> 
       <ol>
            <li style="list-style-type: none;">内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li> 
       </ol>
    </body>
</html>
  • 目录