HTML怎么插入无序列表_HTML无序列表ul和li标签的创建及样式设置

上周一位客户问我如何用 HTML 创建无序列表，我直接向他展示了 HTML 和 CSS 的基本用法。
首先，使用ul标签创建无序列表；然后对每个列表项使用 li 标签。
像这样：
苹果 香蕉 橙色
默认情况下，浏览器使用点来表示列表项。

然后因为客户想要更改列表的图标格式。
我教他使用CSS的list-style-type属性。
例如，如果他想要一个方形符号。

可以写。
    第一件事 第二个内容
    效果是每个列表前面都有一个正方形。

    访问者想知道如何使用图像作为要点，所以我告诉他使用 list-style-image 属性。
    但注意图片大小要适中，以免影响布局。
    示例代码如下：
      使用图像图标 在每个项目之前显示相同的图像
      他还询问如何消除刻板印象。
      这时我教他用liststyle-none加上padding:0和margin:0来清除默认的外边距和内边距。

      最后，访问者想要一个水平菜单的示例，因此 Flexbox 来展示如何实现它被使用了。
      代码如下：
      <风格> .nav { 列表格式：无； 填充：0； 保证金：0； 显示：柔性； 间距-2 0px； } .nav李{ 背景：f0f0f0； 内边距：8 像素 x 1 2 像素； } </风格>
        首页 产品 关于
        效果是并排显示三个菜单。

        无论如何，无论您是制作购物清单还是导航菜单，这些 HTML 和 CSS 技能都非常有用。

        ul和li基本用法分析

        ul 和 li 用于创建列表。
        ul 是一个普通的列表，li 是其中的每一项。

        导航菜单是这样使用的。
        ul 将其包装起来，li 则创建每个链接。
        CSS 使 li 水平，没有点。

        也可以使用表格。
        ul的宽度分为几部分，li的宽度也分为几部分。
        CSS 控件排列在一行上。

        您可以随意安排。
        ul 和 li 非常灵活。