迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

HTML 中的中心项目符号点

作者:迹忆客 最近更新:2023/03/27 浏览次数:

项目符号列表用于在 HTML 中创建相关项目列表,并可用于创建大纲和菜单或相关项目列表。 每个列表项都以 <li> 标记开头。

列表项保存在 <ul>(无序/项目符号列表)或 <ol>(有序/编号列表)标签中。 本文将教我们不同的项目符号样式以及如何在 HTML 中使项目符号居中。


项目符号点的 HTML 样式

在 HTML 中,可以使用 <ul>(无序列表)标记创建项目符号点,并为其设置样式,我们使用 list-style-type 属性。 list-style-type 属性指定列表标记的类型,可以有以下值。

  • disc - 实心圆(默认)
  • circle - 空心圆
  • square - 一个填充的正方形
  • none - 无标记(用于创建嵌套列表)

Disc - 实心圆(默认)

要创建项目符号列表,请创建一个 <ul> 元素,并将 list-style-type 属性设置为所需的值。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

circle - 空心圆

我们可以通过以下代码创建空心圆项目符号点。

代码:

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type: circle;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Square – 一个填充的正方形

我们可以通过以下代码创建方形项目符号点。

<p>The list of developed countries :</p>

<ul style="list-style-type: square;">
    <li>US</li>
    <li>Australia</li>
    <li>New Zealand</li>
</ul>

None - 无标记

无项目符号点列表有以下代码。

<ul style="list-style-type: none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

HTML 中的中心项目符号点

代码示例:

<!DOCTYPE html>
<head>
    <style>
        .parent {
            text-align: center;
        }
        .parent > ul {
            display: inline-block;
        }
    </style>
</head>

<body>
    <h1>Center Bullet Points in HTML</h1>
    <div class="parent">
       <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
       </ul>
       <br>
       <ul style="list-style-type: circle;">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
      </ul>
      <br>
      <ul style="list-style-type: square;">
            <li>US</li>
            <li>Australia</li>
            <li>New Zealand</li>
      </ul>

    </div>
</body>

总结

使用 CSS 和 JavaScript,项目符号以 HTML 为中心。 可以使用标签在 HTML 中制作要点列表。

HTML 提供了几种不同的方法来创建项目符号点,最典型的方法是使用无序列表元素。 该元素将为每个列表项创建一个项目符号点,我们还可以使用有序列表元素创建带编号的项目符号点。

上一篇:HTML 列表缩进

下一篇:HTML 段落宽度

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间:2023/05/06 浏览次数:198 分类:HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便