div css页面布局 模板
时间: 2023-07-27 11:31:34 浏览: 240
divcss布局模板
5星 · 资源好评率100%
以下是一个简单的 div CSS 页面布局模板:
```html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style type="text/css">
.container {
width: 960px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #eee;
padding: 10px;
margin-bottom: 20px;
}
.nav {
background-color: #ccc;
padding: 10px;
margin-bottom: 20px;
}
.content {
float: left;
width: 720px;
padding: 10px;
background-color: #fff;
margin-right: 20px;
}
.sidebar {
float: left;
width: 200px;
padding: 10px;
background-color: #f5f5f5;
}
.footer {
clear: both;
background-color: #eee;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<!-- 头部内容 -->
</div>
<div class="nav">
<!-- 导航栏内容 -->
</div>
<div class="content">
<!-- 主要内容 -->
</div>
<div class="sidebar">
<!-- 侧边栏内容 -->
</div>
<div class="footer">
<!-- 底部内容 -->
</div>
</div>
</body>
</html>
```
在这个模板中,我们使用了一个名为 "container" 的 div 元素来包含整个页面的内容。在这个 div 元素内部,我们使用了多个名为 "header"、"nav"、"content"、"sidebar" 和 "footer" 的 div 元素来分别表示页面的不同部分。我们使用了 CSS 的浮动(float)属性来让 "content" 和 "sidebar" 元素并排排列。同时,我们还为这些元素设置了不同的背景颜色、宽度、内边距和外边距等样式。你可以根据自己的需求来修改这些样式,以适应不同的页面布局。
阅读全文