div css页面布局 模板
时间: 2023-09-24 14:09:42 浏览: 51
以下是一个基本的 div CSS 页面布局模板:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #999;
float: left;
width: 20%;
height: 500px;
padding: 10px;
}
section {
float: left;
width: 60%;
height: 500px;
padding: 10px;
}
aside {
float: left;
width: 20%;
height: 500px;
padding: 10px;
}
footer {
background-color: #333;
color: #fff;
clear: both;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>My Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<section>
<h2>Content Title</h2>
<p>Content goes here...</p>
</section>
<aside>
<h3>Sidebar Title</h3>
<p>Sidebar content goes here...</p>
</aside>
<footer>
<p>© 2021 My Page</p>
</footer>
</body>
</html>
```
在这个模板中,我们使用了 div 元素来布局页面。我们将页面分成了头部、导航栏、内容区、侧边栏和页脚。我们使用了 CSS 的 float 属性来使导航栏、内容区和侧边栏并排排列,在页脚处使用了 clear:both 来清除浮动。我们也使用了 CSS 的 width 和 height 属性来设置每个元素的宽度和高度。
这只是一个基本的模板,你可以根据自己的需要进行修改和扩展。