div css制作步骤
准备HTML结构
创建一个基本的HTML文件，使用<div>标签划分页面结构。常见的结构包括头部（header）、导航（nav）、主体内容（main）、侧边栏（aside）和页脚（footer）。
<!DOCTYPE html>
<html>
<head>
<title>Div CSS布局示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">头部内容</div>
<div class="nav">导航栏</div>
<div class="main">
<div class="content">主体内容</div>
<div class="sidebar">侧边栏</div>
</div>
<div class="footer">页脚</div>
</body>
</html>编写CSS样式
在单独的CSS文件中定义样式，使用类选择器或ID选择器为每个<div>设置样式。常见的属性包括宽度、高度、背景颜色、边距和内边距。
.header {
width: 100%;
height: 80px;
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.nav {
width: 100%;
height: 50px;
background-color: #555;
color: white;
padding: 10px;
}
.main {
display: flex;
width: 100%;
}
.content {
flex: 70%;
background-color: #f1f1f1;
padding: 20px;
}
.sidebar {
flex: 30%;
background-color: #ddd;
padding: 20px;
}
.footer {
width: 100%;
height: 60px;
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}响应式设计
使用媒体查询（Media Queries）确保布局在不同设备上适配。调整宽度和布局方向以适应小屏幕。
@media screen and (max-width: 768px) {
.main {
flex-direction: column;
}
.content, .sidebar {
flex: 100%;
}
}调试与优化
使用浏览器开发者工具检查布局问题，确保边距、内边距和浮动属性正确。测试不同分辨率和设备下的显示效果。
最终效果
保存文件并在浏览器中打开HTML文件，查看布局效果。根据需要调整CSS属性以达到理想的设计效果。
