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 属性优化动画性能。
