如何创建定义列表dl dt dd

dl

dt

dd

<dl>

<dt>

<dd>

dl

dt

dd

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。</dd>

  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets），是一种样式表语言，用于描述HTML或XML文档的呈现。</dd>
</dl>

dt

dd

ul

ol

ul

ol

ul

ol

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

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

li

dl

dt

dd

dt

dd

ul

dl

<dt>

<dl>
  <dt>前端开发</dt>
  <dd>指网站或应用程序中用户直接与之交互的部分，主要涉及HTML、CSS和JavaScript。</dd>
  <dd>也泛指负责构建和维护这些用户界面的工程师。</dd>

  <dt>HTTP 状态码 200</dt>
  <dd>表示请求已成功，客户端请求的资源已在响应体中返回。</dd>
  <dd>这是最常见的成功状态码。</dd>
</dl>

dd

dd

<dt>

<dl>
  <dt>Bug</dt>
  <dt>缺陷</dt>
  <dt>错误</dt>
  <dd>在软件或系统中存在的，导致其行为不符合预期的问题。</dd>

  <dt>如何重置密码？</dt>
  <dt>忘记密码了怎么办？</dt>
  <dd>请点击登录页面的“忘记密码”链接，根据提示操作即可。</dd>
</dl>

dl

dl {
  margin: 1em 0;
  padding: 0;
  border-left: 3px solid #007bff; /* 左侧加个边框，增加视觉焦点 */
  background-color: #f8f9fa; /* 背景色 */
  padding-left: 15px; /* 内部左边距 */
}

dt {
  font-weight: bold; /* 术语加粗 */
  color: #343a40; /* 术语颜色 */
  margin-top: 1em; /* 与上一个dd或dt的间距 */
  margin-bottom: 0.5em; /* 与dd的间距 */
  font-size: 1.1em; /* 稍微大一点 */
}

dd {
  margin-left: 20px; /* 描述内容缩进 */
  margin-bottom: 1em; /* 与下一个dt的间距 */
  line-height: 1.6; /* 行高，提高可读性 */
  color: #6c757d; /* 描述颜色 */
}

/* 针对第一个dt，去除顶部间距，避免列表顶部留白过多 */
dt:first-of-type {
  margin-top: 0;
}

dt

dd

dl.grid-layout {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  margin: 1em 0;
  border: 1px solid #dee2e6;
  padding: 15px;
  background-color: #fff;
}

dl.grid-layout dt {
  flex: 0 0 150px; /* dt 固定宽度 */
  font-weight: bold;
  color: #0056b3;
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: right; /* dt 右对齐 */
  border-right: 1px solid #dee2e6; /* dt 和 dd 之间加分隔线 */
}

dl.grid-layout dd {
  flex: 1; /* dd 占据剩余空间 */
  margin-left: 0; /* 移除默认的margin-left */
  padding: 5px 10px;
  box-sizing: border-box;
  border-bottom: 1px dashed #e9ecef; /* dd 之间加虚线 */
}

/* 最后一个dd去除底部边框 */
dl.grid-layout dd:last-of-type {
  border-bottom: none;
}

/* 确保每个dt和它后面的dd在视觉上是成对的 */
/* 这需要更复杂的选择器或者更细致的HTML结构调整，这里仅作示意 */
/* 比如，如果你想让每个dt-dd对占据一行，可以这样： */
dl.inline-pair {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自动宽度，第二列填充剩余空间 */
  gap: 5px 10px; /* 行间距和列间距 */
  margin: 1em 0;
}

dl.inline-pair dt {
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
}

dl.inline-pair dd {
  margin-left: 0; /* 移除默认的margin-left */
}

dl