帮我采用三栏式布局,左侧是导航栏,中间是主要内容区域,右侧是广告或相关信息设计一个网页
时间: 2023-06-19 09:10:33 浏览: 50
好的,以下是一个简单的三栏式布局网页代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>三栏式布局网页</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置页面宽度 */
body {
width: 100%;
}
/* 设置导航栏样式 */
.nav {
width: 20%;
height: 100vh;
background-color: #333;
float: left;
}
/* 设置主要内容样式 */
.main {
width: 60%;
height: 100vh;
background-color: #ccc;
float: left;
}
/* 设置广告或相关信息样式 */
.ads {
width: 20%;
height: 100vh;
background-color: #999;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<!-- 导航栏内容 -->
</div>
<div class="main">
<!-- 主要内容区域 -->
</div>
<div class="ads">
<!-- 广告或相关信息 -->
</div>
</body>
</html>
```
你可以将导航栏、主要内容和广告或相关信息的内容适当填充到对应的 `<div>` 中,然后通过 CSS 样式设置它们的宽度、高度和背景颜色等等。另外,为了保证三栏式布局的效果,需要设置 `float: left;` 让它们浮动到左侧。