css页面中常见左中右分栏布局的两种实现方式
站长资源 2025-05-31 23:06www.dzhlxh.cnseo优化
让我们设想一个古典的网页布局,以中华传统色彩为基调。整个页面布局采用居中对齐的方式,上方是醒目的导航栏,下方是主体内容区域,左右两侧各有装饰性的绿色板块。中间主体部分以黄色为背景,突出显示主要内容。底部是粉色的页脚区域。
HTML代码如下:
```html
.page_center {
width: 100%;
text-align: center; / 增加文本居中对齐样式 /
}
nav {
background-color: red; / 导航栏背景色为红色 /
height: 30px; / 调整导航栏高度 /
}
left, right { / 左右板块样式整合 /
width: 120px; / 保持宽度不变 /
background-color: green; / 背景色仍为绿色 /
position: absolute; / 保持绝对定位 /
}
middle { / 中间主体部分样式调整 /
background-color: yellow; / 背景色为黄色 /
padding: 20px 0; / 增加内边距,使内容更加突出 /
}
foot { / 页脚区域样式调整 /
background-color: pink; / 背景色仍为粉色 /
padding: 20px; / 增加内边距,使页脚区域更加舒适 /
}
左侧板块
主要内容
右侧板块
页脚