div和css制作
使用 div 和 CSS 制作网页布局
基本结构
HTML 使用 <div> 标签划分区块，CSS 控制样式和布局。以下是一个简单示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: #f0f0f0;
}
.header {
padding: 20px;
background-color: #333;
color: white;
}
.content {
padding: 15px;
}
.footer {
padding: 10px;
background-color: #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">页眉</div>
<div class="content">主要内容</div>
<div class="footer">页脚</div>
</div>
</body>
</html>布局方式
Flexbox 适合一维布局，Grid 适合二维布局。
Flexbox 示例：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 5px;
}Grid 示例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
.container {
width: 100%;
}
.item {
flex: 100%;
}
}视觉增强
添加过渡效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}最佳实践
- 语义化命名类（如
.main-nav而非.div1） - 使用 CSS 变量管理颜色和尺寸：
:root { --primary-color: #3498db; } .header { background-color: var(--primary-color); }
以上方法提供了从基础结构到高级布局的实现方式，可根据项目需求选择合适的技术组合。
