web前端网页布局代码
时间: 2023-11-23 17:08:26 浏览: 40
以下是一个简单的web前端网页布局代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页布局示例</title>
<style>
/* 定义一个类名为container的div元素,用于包含整个页面内容 */
.container {
width: 960px; /* 设置容器宽度为960像素 */
margin: 0 auto; /* 设置容器水平居中 */
}
/* 定义一个类名为header的div元素,用于显示网页头部内容 */
.header {
height: 100px; /* 设置头部高度为100像素 */
background-color: #ccc; /* 设置头部背景颜色为灰色 */
}
/* 定义一个类名为content的div元素,用于显示网页主要内容 */
.content {
float: left; /* 设置内容区域左浮动 */
width: 700px; /* 设置内容区域宽度为700像素 */
background-color: #fff; /* 设置内容区域背景颜色为白色 */
padding: 20px; /* 设置内容区域内边距为20像素 */
}
/* 定义一个类名为sidebar的div元素,用于显示网页侧边栏内容 */
.sidebar {
float: right; /* 设置侧边栏右浮动 */
width: 200px; /* 设置侧边栏宽度为200像素 */
background-color: #eee; /* 设置侧边栏背景颜色为浅灰色 */
padding: 20px; /* 设置侧边栏内边距为20像素 */
}
/* 定义一个类名为footer的div元素,用于显示网页底部内容 */
.footer {
clear: both; /* 清除浮动 */
height: 50px; /* 设置底部高度为50像素 */
background-color: #ccc; /* 设置底部背景颜色为灰色 */
text-align: center; /* 设置底部文本居中 */
line-height: 50px; /* 设置底部行高为50像素 */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>网页标题</h1>
</div>
<div class="content">
<p>网页主要内容</p>
</div>
<div class="sidebar">
<p>网页侧边栏内容</p>
</div>
<div class="footer">
<p>网页底部内容</p>
</div>
</div>
</body>
</html>
```