css制作题目

CSS 制作题目示例

以下是一些常见的 CSS 题目示例，涵盖基础到进阶的内容，适合练习和测试 CSS 技能。

基础题目

题目 1：设置文本颜色和字体大小 编写 CSS 代码，将所有 <p> 标签的文本颜色设置为红色，字体大小设置为 16px。

p {
  color: red;
  font-size: 16px;
}

题目 2：居中显示一个 div 编写 CSS 代码，将一个 <div> 水平居中显示，宽度为 80%，背景色为浅灰色。

div {
  width: 80%;
  margin: 0 auto;
  background-color: lightgray;
}

进阶题目

题目 3：实现一个响应式导航栏 编写 CSS 代码，实现一个响应式导航栏，在小屏幕上显示为汉堡菜单，在大屏幕上显示为水平菜单。

.navbar {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
  }
}

题目 4：创建一个 CSS 动画 编写 CSS 代码，创建一个无限旋转的动画，应用于一个 <div> 元素。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

div {
  animation: spin 2s linear infinite;
}

综合题目

题目 5：实现一个卡片布局 编写 CSS 代码，实现一个包含标题、图片和描述的卡片布局，卡片之间有一定间距，并且整体居中对齐。

.card {
  width: 300px;
  margin: 20px auto;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.card img {
  width: 100%;
  border-radius: 4px;
}

.card h2 {
  margin-top: 10px;
  font-size: 20px;
}

.card p {
  color: #666;
}

题目设计建议

• 从简单到复杂：逐步增加难度，从基础选择器和属性开始，逐步引入布局、动画等高级特性。
• 结合实际场景：设计题目时考虑实际应用场景，如响应式设计、表单样式等。
• 注重细节：题目可以包含一些细节要求，如边框圆角、阴影效果等，以测试对 CSS 属性的掌握程度。