div和css制作

div 与 CSS 基础使用

HTML 结构
通过 <div> 标签划分页面区块，搭配 CSS 实现布局与样式控制。示例结构：

<div class="container">
  <div class="header">标题</div>
  <div class="content">主要内容</div>
  <div class="footer">页脚</div>
</div>

CSS 样式控制
通过类名或 ID 为 <div> 添加样式：

.container {
  width: 80%;
  margin: 0 auto; /* 水平居中 */
  background-color: #f0f0f0;
}
.header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

常用布局方法

浮动布局
利用 float 属性实现多栏布局：

.content {
  float: left;
  width: 70%;
}
.sidebar {
  float: right;
  width: 30%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

Flexbox 弹性布局
适用于响应式设计：

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex: 1; /* 等分空间 */
}

响应式设计技巧

媒体查询
根据屏幕尺寸调整样式：

@media (max-width: 768px) {
  .content, .sidebar {
    float: none;
    width: 100%;
  }
}

视口单位
使用 vw 或 vh 实现动态尺寸：

.header {
  height: 10vh; /* 视口高度的10% */
  font-size: 4vw; /* 视口宽度的4% */
}

视觉效果增强

阴影与圆角
通过 CSS3 属性提升视觉效果：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  transition: transform 0.3s; /* 悬停动画 */
}
.card:hover {
  transform: translateY(-5px);
}

渐变背景
创建平滑颜色过渡：

.button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

调试与优化

浏览器开发者工具
使用 Chrome/Firefox 的检查工具调试元素盒模型、样式覆盖问题。

性能优化
避免过度嵌套选择器，压缩 CSS 文件，使用 will-change 属性优化动画性能。