DIV+CSS常用的Html网页布局代码
封面图
•
2025-11-08
•
Html/Css
164
0
0
0
在使用 **HTML + CSS** 进行网页布局时,`DIV` 是常用的容器元素,配合 `CSS` 可以实现各种布局方式。以下是一些常见的 **DIV+CSS 布局代码示例**,适用于不同的布局需求: --- ## 一、基本结构 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>网页布局示例</title> <style> body { margin: 0; padding: 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } header, footer { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav { background-color: #444; padding: 10px; } main { display: flex; flex-wrap: wrap; } aside { width: 25%; background-color: #f0f0f0; padding: 10px; } article { width: 75%; padding: 10px; } </style> </head> <body> <div class="container"> <header> <h1>网站标题</h1> </header> <nav> <ul style="list-style: none; padding: 0; margin: 0;"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <aside> <h2>侧边栏</h2> <p>这里是侧边栏内容。</p> </aside> <article> <h2>文章标题</h2> <p>这里是主要内容区域。</p> </article> </main> <footer> <p>© 2025 网站名称</p> </footer> </div> </body> </html> ``` --- ## 二、常见布局类型 ### 1. **两列布局(左侧固定宽度,右侧自适应)** ```html <style> .left { width: 200px; float: left; background: #eee; } .right { margin-left: 200px; background: #fff; } </style> <div class="left">左侧内容</div> <div class="right">右侧内容</div> ``` --- ### 2. **三列布局(左右固定,中间自适应)** ```html <style> .left { width: 200px; float: left; background: #eee; } .center { margin: 0 200px; background: #fff; } .right { width: 200px; float: right; background: #eee; } </style> <div class="left">左栏</div> <div class="center">中间内容</div> <div class="right">右栏</div> ``` --- ### 3. **Flexbox 布局(现代推荐)** ```html <style> .flex-container { display: flex; justify-content: space-between; } .flex-item { flex: 1; padding: 10px; border: 1px solid #ccc; } </style> <div class="flex-container"> <div class="flex-item">左侧</div> <div class="flex-item">中间</div> <div class="flex-item">右侧</div> </div> ``` --- ### 4. **Grid 布局(适合复杂页面)** ```html <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .grid-item { background: #f0f0f0; padding: 10px; } </style> <div class="grid-container"> <div class="grid-item">项目 1</div> <div class="grid-item">项目 2</div> <div class="grid-item">项目 3</div> <div class="grid-item">项目 4</div> </div> ``` --- ## 三、常用 CSS 属性说明 | 属性 | 说明 | |------|------| | `display: flex` | 启用 Flexbox 布局 | | `display: grid` | 启用 Grid 布局 | | `float` | 浮动布局(传统方法) | | `position: absolute` | 绝对定位 | | `margin`, `padding` | 控制间距 | | `width`, `height` | 控制大小 | | `background-color` | 设置背景色 | --- ## 四、注意事项 - 使用 `display: flex` 或 `display: grid` 更加现代、灵活。 - 避免过多嵌套的 `div`,保持结构清晰。 - 使用 `flex-wrap: wrap` 实现响应式布局。 - 响应式设计可结合媒体查询 `@media`。 --- 如需特定布局(如顶部导航栏、底部固定栏、响应式布局等),可以告诉我具体需求,我可以为你提供更详细的代码示例。
上一篇:
最常用的12种CSSBUG解决方法与技巧
下一篇:
Css中的filter常用滤镜属性及语句大全
DIV+CSS常用的Html网页布局代码
标题录入,一次不能超过6条
留言
评论