以下是一些简单的 CSS 实例，涵盖了一些常见的样式效果和布局：

1. 文本样式：
/* 文本颜色和字体大小 */
body {
  color: #333;
  font-family: Arial, sans-serif;
}

/* 下划线效果 */
a {
  text-decoration: underline;
}

/* 加粗效果 */
strong {
  font-weight: bold;
}

/* 斜体效果 */
em {
  font-style: italic;
}

2. 背景和边框：
/* 背景颜色 */
section {
  background-color: #f8f8f8;
}

/* 边框样式 */
div {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

3. 图像样式：
/* 图像圆角效果 */
img {
  border-radius: 50%;
}

/* 图像阴影效果 */
img:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

4. 布局：
/* 响应式布局 */
@media screen and (max-width: 600px) {
  /* 在小屏幕上调整样式 */
  .container {
    width: 100%;
  }
}

/* 网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

5. 按钮样式：
/* 按钮样式 */
button {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 按钮悬停效果 */
button:hover {
  background-color: #0056b3;
}

这些实例只是简单的示例，实际中根据项目需求和设计要求，你可能需要更复杂的样式和布局。通过组合和调整这些基本样式，可以创建出更丰富和吸引人的界面。


转载请注明出处：http://www.zyzy.cn/article/detail/12555/CSS