HTML定义列表怎么用_HTML的dl dt dd标签使用教程

<dl>

<dl>

<dt>

<dd>

<dl>

<dl>

<dl>

<dt>

<dt>

<dd>

<dt>

<dd>

<dt>

<dd>

<dl>
    <dt>HTML
    <dd>超文本标记语言（HyperText Markup Language），是构建网页内容的标准标记语言。

    <dt>CSS
    <dd>层叠样式表（Cascading Style Sheets），用于描述HTML文档的呈现样式。
    <dd>它能控制字体、颜色、布局等视觉表现。

    <dt>JavaScript
    <dt>JS
    <dd>一种高级的、解释型的编程语言，主要用于使网页具有交互性。

<dd>

<dl>

<dl>

<dl>

<dl>

<ul>

<ul>

<ol>

<dl>

<dl>

<dl>

<dl>

dl {
    margin: 0;
    padding: 0;
}

dt {
    font-weight: bold; /* 让术语更突出 */
    margin-top: 15px; /* 每个术语和上一个定义之间留点空间 */
    color: #333;
}

dd {
    margin-left: 20px; /* 默认缩进，可以根据需要调整 */
    line-height: 1.6; /* 增加行高，提升阅读舒适度 */
    color: #555;
    padding-bottom: 5px; /* 定义底部留空 */
    border-bottom: 1px dashed #eee; /* 添加虚线分隔，增加层次感 */
}

/* 最后一个dd通常不需要底部分隔线 */
dd:last-of-type {
    border-bottom: none;
}

<dl>

/* 为特定的dl添加一个类名，例如 .horizontal-list */
.horizontal-list {
    display: flex;
    flex-wrap: wrap; /* 如果内容过多，允许换行 */
    margin-bottom: 20px; /* 整个列表底部留空 */
}

.horizontal-list dt {
    flex-basis: 150px; /* 给术语一个固定的宽度，或者使用 flex: 0 0 150px; */
    font-weight: bold;
    margin-top: 0; /* 在水平布局中通常不需要顶部外边距 */
    padding-right: 10px; /* 术语和定义之间留点空间 */
    text-align: right; /* 让术语右对齐，看起来更整齐 */
}

.horizontal-list dd {
    flex-grow: 1; /* 让定义占据剩余空间 */
    margin-left: 0; /* 移除默认的左外边距 */
    padding-bottom: 0; /* 移除底部分隔线 */
    border-bottom: none; /* 移除底部分隔线 */
    margin-top: 0; /* 与dt对齐 */
}

/* 针对每个dt/dd对，确保它们在同一行 */
.horizontal-list dt,
.horizontal-list dd {
    /* 配合 flex-wrap: wrap; 确保它们在同一行，并在需要时换行 */
    /* 也可以考虑将dt和dd都放在一个div中，然后对div使用flex */
}

float

flex-basis

@media (max-width: 768px) {
    .horizontal-list {
        flex-direction: column; /* 在小屏幕上将水平布局改为垂直堆叠 */
    }

    .horizontal-list dt {
        text-align: left; /* 术语左对齐 */
        flex-basis: auto; /* 宽度自适应 */
        margin-top: 10px;
        padding-right: 0;
    }

    .horizontal-list dd {
        margin-left: 20px; /* 恢复默认缩进 */
        padding-bottom: 5px;
        border-bottom: 1px dashed #eee; /* 恢复分隔线 */
    }
}

<dl>