html三栏布局许愿墙编程代码
时间: 2024-09-28 13:08:25 浏览: 18
HTML三栏布局常用于创建网页结构,其中左侧是一列菜单,中间是一篇主要内容区域,右侧通常是侧边栏或者是广告位。下面是一个简单的HTML和CSS实现的三栏布局示例,假设这是一个愿望墙(Wall of Wishes):
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: flex; /* 使用Flexbox布局 */
justify-content: space-between; /* 左右两侧留空 */
background-color: #f0f0f0;
padding: 20px;
}
.left-column {
width: 25%;
background-color: lightblue;
padding: 10px;
}
.main-column {
flex-grow: 1; /* 主内容区域自动填充剩余空间 */
background-color: white;
padding: 10px;
}
.right-column {
width: 25%;
background-color: lightgreen;
padding: 10px;
}
.wish-card {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">愿望墙菜单</div>
<div class="main-column">
<h2>许愿墙</h2>
<!-- 假设每个愿望是一个卡片 -->
<div class="wish-card">
<h3>愿望1</h3>
<p>用户留言...</p>
</div>
<!-- 可以在这里添加更多愿望卡片 -->
</div>
<div class="right-column">相关公告</div>
</div>
</body>
</html>
```
在这个例子中,`.container`负责整体布局,`.left-column`, `.main-column`, 和 `.right-column` 分别代表三栏。`.wish-card` 类则用于样式化每个愿望卡片。