给我提供一个div+css的网页布局模板
时间: 2023-12-03 22:43:41 浏览: 111
以下是一个基本的div+css网页布局模板:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.header {
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
}
.nav {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
float: left;
width: 70%;
height: 500px;
background-color: #fff;
padding: 20px;
}
.sidebar {
float: right;
width: 30%;
height: 500px;
background-color: #eee;
padding: 20px;
}
.footer {
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>网页头部</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
<div class="content">
<h2>网页内容</h2>
<p>这里是网页主要内容。</p>
</div>
<div class="sidebar">
<h3>网页侧边栏</h3>
<ul>
<li><a href="#">侧边栏1</a></li>
<li><a href="#">侧边栏2</a></li>
<li><a href="#">侧边栏3</a></li>
</ul>
</div>
<div class="footer">
<h4>网页底部</h4>
</div>
</div>
</body>
</html>
```
这个模板包含了一个头部、导航、内容、侧边栏和底部。可以根据实际需要修改样式和内容。
阅读全文