ul和li元素

阅读量: 153 编辑

ul和li元素

一、基本语法介绍

  • ul：无序列表

  • ol：有序列表

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

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

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

二、代码实战

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

文件：06.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
    </head>
    <body>
    
        <ul style="display: flex;flex-direction: row;">
            <li style="margin-right:20px; list-style-type: circle;">全部</li>
            <li style="margin-right:20px; ">后端开发</li>
            <li style="margin-right:20px; list-style-type: square;">前端开发</li>
            <li style="margin-right:20px; list-style-type: none;">数据库</li>
            <li style="margin-right:20px; list-style-type: none;">人工智能</li>
        </ul>
    
        <ol >
            <li style="margin-right:20px; ">全部</li>
            <li style="margin-right:20px; list-style-type: square;">后端开发</li>
            <li style="margin-right:20px; ">前端开发</li>
            <li style="margin-right:20px; ">数据库</li>
            <li style="margin-right:20px; ">人工智能</li>
        </ol>
    
    </body>
</html>
  • 目录