三栏布局许愿墙编程代码
时间: 2024-09-28 18:08:21 浏览: 36
互联网免费许愿墙源代码
三栏布局的许愿墙通常是指将页面分为左侧导航、中部内容区域和右侧侧边栏的设计。在编程中,特别是前端Web开发中,HTML和CSS可以很好地实现这种布局。这里是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
height: 100vh; /* 设置满屏高度 */
}
.left-column {
width: 25%;
background-color: #f1f1f1;
}
.main-column {
flex: 1;
background-color: #fff;
}
.right-column {
width: 25%;
background-color: #eaeaea;
}
.wish-wall {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<!-- 左侧导航栏代码 -->
</div>
<div class="main-column">
<div class="wish-wall">
<!-- 许愿墙主要内容如文本输入框或列表等 -->
<h2>许愿墙</h2>
<form>
<input type="text" placeholder="写下你的愿望...">
<button type="submit">提交</button>
</form>
</div>
</div>
<div class="right-column">
<!-- 右侧侧边栏代码 -->
</div>
</div>
</body>
</html>
```
在这个例子中,`.left-column`, `.main-column`, 和 `.right-column` 分别代表左、中、右三栏。`.wish-wall` 区域用于放置许愿墙的内容。你可以根据实际需求添加更多元素和交互。
阅读全文