HTML制作固定宽度的页面布局
时间: 2024-05-11 17:17:10 浏览: 12
要制作固定宽度的页面布局,可以使用CSS的width属性来设置页面的宽度,以下是一个简单的HTML和CSS代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>固定宽度的页面布局</title>
<style>
body {
margin: 0;
padding: 0;
width: 960px; /* 设置页面宽度为960像素 */
}
header {
background-color: #f0f0f0;
height: 100px;
}
nav {
background-color: #ccc;
height: 50px;
}
section {
float: left;
background-color: #eee;
height: 500px;
width: 660px;
margin-right: 20px;
}
aside {
float: left;
background-color: #ddd;
height: 500px;
width: 260px;
}
footer {
clear: both;
background-color: #f0f0f0;
height: 50px;
}
</style>
</head>
<body>
<header>
<h1>固定宽度的页面布局</h1>
</header>
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</nav>
<section>
<h2>主要内容区域</h2>
<p>这是主要内容区域的文本内容。</p>
</section>
<aside>
<h2>侧边栏</h2>
<p>这是侧边栏的文本内容。</p>
</aside>
<footer>
<p>版权信息等</p>
</footer>
</body>
</html>
```
在上面的示例中,通过设置body的width属性为960像素,实现了固定宽度的效果。同时,将主要内容区域和侧边栏的宽度分别设置为660像素和260像素,保证了它们的总宽度为960像素。此外,为了让页面更加美观,还设置了一些样式,如背景色、高度等。