首页div+css固定型页面布局代码

div+css固定型页面布局代码

时间: 2024-12-13 14:18:46 浏览: 4

在HTML中，`<div>`元素通常用于创建内容区域或容器，而CSS则是用来控制网页布局的语言。固定型页面布局，也称为栅格系统，是一种常见的网页设计模式，它将页面分为若干等宽的列，然后通过CSS设置`position`属性为`fixed`来让内容区域保持相对于浏览器窗口固定的宽度。以下是一个简单的固定布局示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { position: fixed; width: 100%; left: 0; top: 0; height: 100vh; /* viewport height */ background-color: #f0f0f0; } .column { float: left; width: calc(33.33% - 20px); /* 三列布局，每列减去间距 */ box-sizing: border-box; } /* 清除浮动，防止影响其他元素 */ .clearfix::after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="container clearfix"> <div class="column">栏目一</div> <div class="column">栏目二</div> <div class="column">栏目三</div> </div> </body> </html> ``` 在这个例子中，`.container`设置了固定的位置，并分配了全屏高度。`.column`负责创建等宽的列，并通过清除浮动来保证布局的稳定性。

阅读全文