当前位置：首页 > news >正文

html + css 自适应首页布局案例

news 2025/7/4 14:08:41

文章目录

前言
一、组成
二、代码
- 1. css 样式
- 2. body 内容
- 3.全部整体
三、效果

前言

一个自适应的html布局

一、组成

整体居中，宽度1200px，小屏幕宽度100%

二、代码

1. css 样式

代码如下（示例）：

<style>* {box-sizing: border-box;}body {margin: 0;font-family: Arial, sans-serif;}.header {background-color: #f1f1f1;padding: 10px;text-align: center;margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.content {display: flex;flex-wrap: wrap;/* 允许子元素换行 */margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.left,.right {padding: 20px;min-height: 300px;/* 可以根据需要调整高度 */}.left {background-color: #ccc;flex: 1;/* 默认占据剩余空间 */}.right {background-color: #ddd;flex: 1;/* 默认占据剩余空间 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */}}

该处使用的css布局。

2. body 内容

代码如下（示例）：

<body><div class="header"><h1>导航栏</h1></div><div class="content"><div class="left"><h2>左侧内容</h2><p>这里是左侧的内容区域。</p></div><div class="right"><h2>右侧内容</h2><p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p></div></div></body>

该处使用div组成。

3.全部整体

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局示例</title><style>* {box-sizing: border-box;}body {margin: 0;font-family: Arial, sans-serif;}.header {background-color: #f1f1f1;padding: 10px;text-align: center;margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.content {display: flex;flex-wrap: wrap;/* 允许子元素换行 */margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.left,.right {padding: 20px;min-height: 300px;/* 可以根据需要调整高度 */}.left {background-color: #ccc;flex: 1;/* 默认占据剩余空间 */}.right {background-color: #ddd;flex: 1;/* 默认占据剩余空间 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */}}</style></head><body><div class="header"><h1>导航栏</h1></div><div class="content"><div class="left"><h2>左侧内容</h2><p>这里是左侧的内容区域。</p></div><div class="right"><h2>右侧内容</h2><p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p></div></div></body>
</html>