css定义列表制作

使用 <dl> 标签定义列表

HTML 提供了 <dl>（定义列表）标签，配合 <dt>（定义术语）和 <dd>（定义描述）标签实现定义列表的结构。CSS 可通过样式调整布局和视觉效果。

<dl>
  <dt>术语1</dt>
  <dd>描述内容1</dd>
  <dt>术语2</dt>
  <dd>描述内容2</dd>
</dl>

基础样式调整

通过 CSS 控制定义列表的间距、对齐和字体：

dl {
  margin: 1em 0;
  line-height: 1.5;
}
dt {
  font-weight: bold;
  margin-top: 0.5em;
}
dd {
  margin-left: 2em;
}

水平布局定义列表

通过 Flexbox 或 Grid 实现术语与描述的水平排列：

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1em;
}
dt {
  grid-column: 1;
}
dd {
  grid-column: 2;
}

添加装饰元素

使用伪元素或边框增强视觉层次：

dt {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 0.3em;
}
dd::before {
  content: "→ ";
  color: #666;
}

响应式布局处理

针对小屏幕设备调整布局：

@media (max-width: 600px) {
  dl {
    grid-template-columns: 1fr;
  }
  dd {
    grid-column: 1;
    margin-left: 1em;
  }
}