当前位置：首页 > CSS

css定义列表制作

2026-04-02 05:46:32CSS

使用 `<dl>`、`<dt>` 和 `<dd>` 标签创建定义列表

CSS 定义列表通常使用 HTML 的 <dl>（定义列表）、<dt>（定义术语）和 <dd>（定义描述）标签构建。以下是基本结构：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页的视觉表现。</dd>
</dl>

基本样式调整

可以通过 CSS 调整定义列表的间距、对齐方式和字体样式：

dl {
  margin: 1em 0;
  line-height: 1.5;
}

dt {
  font-weight: bold;
  color: #333;
}

dd {
  margin-left: 1.5em;
  color: #666;
}

水平排列定义列表

如果需要让 <dt> 和 <dd> 水平排列，可以使用 display: flex：

dl {
  display: flex;
  flex-wrap: wrap;
}

dt {
  flex: 0 0 20%;
  font-weight: bold;
}

dd {
  flex: 0 0 80%;
  margin-left: 0;
}

添加边框和背景增强视觉效果

可以通过边框、背景色和内边距提升可读性：

dl {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1em;
  background: #f9f9f9;
}

dt {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 0.5em;
}

dd {
  padding: 0.5em 0;
}

使用伪元素美化定义列表

利用 ::before 或 ::after 添加装饰元素：

css定义列表制作

dt::before {
  content: "•";
  color: #0078d7;
  margin-right: 0.5em;
}

dd::after {
  content: "";
  display: block;
  height: 1px;
  background: #eee;
  margin-top: 0.5em;
}

这些方法可以帮助创建清晰、美观的定义列表，适用于术语解释、产品规格等场景。