网站div css制作
使用DIV和CSS制作网页布局
HTML结构
<!DOCTYPE html>
<html>
<head>
<title>DIV+CSS布局示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">网站头部</div>
<div class="nav">导航栏</div>
<div class="main">
<div class="content">主要内容区</div>
<div class="sidebar">侧边栏</div>
</div>
<div class="footer">页脚</div>
</div>
</body>
</html>CSS样式
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 容器样式 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* 头部样式 */
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* 导航栏样式 */
.nav {
background-color: #444;
padding: 10px;
}
.nav ul {
list-style-type: none;
display: flex;
}
.nav li {
margin-right: 15px;
}
.nav a {
color: white;
text-decoration: none;
}
/* 主要内容区样式 */
.main {
display: flex;
margin: 10px 0;
}
.content {
flex: 3;
padding: 15px;
background-color: #f1f1f1;
}
.sidebar {
flex: 1;
padding: 15px;
background-color: #ddd;
}
/* 页脚样式 */
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}响应式布局实现
媒体查询示例
@media (max-width: 768px) {
.main {
flex-direction: column;
}
.nav ul {
flex-direction: column;
}
.nav li {
margin-right: 0;
margin-bottom: 5px;
}
}常用CSS技巧
浮动清除
.clearfix::after {
content: "";
display: table;
clear: both;
}盒子阴影效果
.box-shadow {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}圆角边框
.rounded {
border-radius: 5px;
}布局注意事项
- 使用语义化的class命名
- 避免过度嵌套div结构
- 优先使用flexbox或grid布局
- 考虑浏览器兼容性
- 保持代码整洁和可维护性
