首页div+css的传统方式布局代码怎么打

div+css的传统方式布局代码怎么打

时间: 2024-09-24 22:18:04 浏览: 41

传统的Div+CSS布局通常是通过HTML创建结构，使用div元素作为容器，并利用CSS控制其位置、大小和样式。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>传统布局示例</title> <style> /* CSS样式 */ .container { width: 600px; margin: auto; /* 居中 */ } .header { background-color: #f1f1f1; padding: 10px; text-align: center; } .content { display: flex; /* 使用Flexbox布局 */ flex-wrap: wrap; /* 如果内容太多会换行 */ } .item { width: calc(50% - 20px); /* 容器宽度除以2减去间距 */ height: 200px; background-color: lightblue; margin: 10px; } </style> </head> <body> <div class="container"> <div class="header">头部标题</div> <div class="content">  <div class="item">内容块1</div> <div class="item">内容块2</div> <div class="item">内容块3</div>  </div> </div> </body> </html> ``` 在这个例子中，`.container`负责整体布局，`.header`用于定义头部区域，`.content`使用了Flexbox布局管理内容区块`.item`。你可以根据需要替换 `.item` 中的内容。

阅读全文