【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

/* 定位元素 */
.box {
  position: relative; /* 相对定位 */
  top: 10px; /* 向下偏移10px */
  left: 20px; /* 向右偏移20px */
}
 
/* CSS精灵 - 使用伪元素清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
/* 圆角 */
.rounded-corners {
  border-radius: 10px; /* 所有角都被圆角处理 */
}
 
/* 文本超出隐藏 */
.text-overflow {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略符号 */
}
 
/* 阴影效果 */
.shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* x偏移, y偏移, 模糊半径, 颜色 */
}
 
/* 使用线性渐变背景 */
.gradient-background {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 从左到右的渐变 */
}
 
/* 使用图片作为背景 */
.background-image {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 覆盖整个元素 */
  background-position: center; /* 居中显示 */
}
 
/* 响应式设计 - 移动优先 */
@media (max-width: 768px) {
  .container {
    padding: 10px; /* 移动设备上的容器内边距 */
  }
}

这个代码实例展示了如何使用CSS定位元素、清除浮动、创建圆角、处理文本溢出、添加阴影、应用渐变背景和设置背景图片。同时，它还包括了一个简单的媒体查询示例，用于移动设备的响应式布局。这些技巧是任何前端开发人员都应该掌握的基础知识。