当前位置：首页 > CSS

css制作题目

2026-01-28 05:59:40CSS

使用CSS制作题目样式

通过CSS可以自定义题目的样式，包括字体、颜色、间距等，使其更符合设计需求。

HTML结构示例

<div class="question">
  <h3 class="question-title">1. 这是一个示例题目</h3>
  <div class="question-content">
    <p>题目内容描述...</p>
  </div>
</div>

CSS样式设计

.question {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 4px solid #3498db;
  border-radius: 3px;
}

.question-title {
  color: #2c3e50;
  font-size: 18px;
  margin-bottom: 10px;
}

.question-content {
  color: #34495e;
  line-height: 1.6;
}

添加题目序号自动生成

使用CSS计数器可以自动为题目添加序号，避免手动编号。

CSS计数器实现

css制作题目

body {
  counter-reset: question-counter;
}

.question-title::before {
  counter-increment: question-counter;
  content: counter(question-counter) ". ";
  color: #e74c3c;
  font-weight: bold;
}

题目选项样式设计

对于选择题，可以使用CSS美化选项部分。

HTML选项结构

<div class="options">
  <label class="option">
    <input type="radio" name="q1"> 选项A
  </label>
  <label class="option">
    <input type="radio" name="q1"> 选项B
  </label>
</div>

CSS选项样式

css制作题目

.options {
  margin-top: 10px;
}

.option {
  display: block;
  padding: 8px 15px;
  margin-bottom: 5px;
  background-color: #ecf0f1;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.option:hover {
  background-color: #d6eaf8;
}

.option input[type="radio"] {
  margin-right: 10px;
}

响应式题目设计

确保题目在不同设备上都能良好显示。

响应式CSS

@media (max-width: 768px) {
  .question {
    padding: 10px;
  }

  .question-title {
    font-size: 16px;
  }

  .option {
    padding: 6px 10px;
  }
}

题目状态反馈样式

为正确和错误答案添加视觉反馈。

反馈样式示例

.correct {
  border-left-color: #2ecc71;
  background-color: #e8f8f5;
}

.incorrect {
  border-left-color: #e74c3c;
  background-color: #fdedec;
}

.feedback {
  margin-top: 10px;
  padding: 8px;
  border-radius: 3px;
  font-size: 14px;
}

.correct .feedback {
  color: #27ae60;
}

.incorrect .feedback {
  color: #c0392b;
}

这些CSS技巧可以帮助创建美观且功能完善的题目样式，根据实际需求可以进一步调整颜色、间距等参数。