网页制作css题

CSS 基础题目示例

题目：如何居中一个 div 元素？

使用 margin: auto 和设置宽度：

.center-div {
  width: 50%;
  margin: 0 auto;
}

使用 Flexbox 布局：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 Grid 布局：

.parent {
  display: grid;
  place-items: center;
}

CSS 选择器题目

题目：如何选中所有类名为 "item" 的元素？

使用类选择器：

.item {
  color: red;
}

题目：如何选中第一个 p 元素？

使用 :first-child 伪类：

p:first-child {
  font-weight: bold;
}

CSS 盒模型题目

题目：如何设置元素的内边距和外边距？

设置内边距：

.box {
  padding: 10px;
}

设置外边距：

.box {
  margin: 20px;
}

CSS 响应式设计题目

题目：如何设置媒体查询以适应不同屏幕尺寸？

针对小屏幕设备：

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

针对大屏幕设备：

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

CSS 动画题目

题目：如何创建一个简单的淡入动画？

使用 @keyframes：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 2s;
}

CSS 布局题目

题目：如何实现两栏布局？

使用浮动：

.left-column {
  float: left;
  width: 30%;
}

.right-column {
  float: right;
  width: 70%;
}

使用 Flexbox：

.container {
  display: flex;
}

.left-column {
  flex: 3;
}

.right-column {
  flex: 7;
}

CSS 特异性题目

题目：哪个选择器优先级更高？

ID 选择器优先级高于类选择器：

#header { color: red; }  /* 这个优先级更高 */
.header { color: blue; }

CSS 变量题目

题目：如何定义和使用 CSS 变量？

定义变量：

:root {
  --main-color: #3498db;
}

使用变量：

.element {
  color: var(--main-color);
}

CSS 伪元素题目

题目：如何在元素前添加内容？

使用 ::before：

.element::before {
  content: "→ ";
}

CSS 过渡效果题目

题目：如何创建悬停时的颜色过渡效果？

使用 transition：

.button {
  background-color: blue;
  transition: background-color 0.5s;
}

.button:hover {
  background-color: red;
}