金華電子商務(wù)網(wǎng)站建設(shè)百度怎么做廣告推廣
文章目錄
- 前言
- 一、組成
- 二、代碼
- 1. css 樣式
- 2. body 內(nèi)容
- 3.全部整體
- 三、效果
前言
一個自適應(yīng)的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;/* 可以根據(jù)需要調(diào)整高度 */}.left {background-color: #ccc;flex: 1;/* 默認占據(jù)剩余空間 */}.right {background-color: #ddd;flex: 1;/* 默認占據(jù)剩余空間 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 當(dāng)屏幕寬度小于1200px時，左右兩側(cè)各占100%寬度 */}}
該處使用的css布局。
2. body 內(nèi)容
代碼如下（示例）：
<body><div class="header"><h1>導(dǎo)航欄</h1></div><div class="content"><div class="left"><h2>左側(cè)內(nèi)容</h2><p>這里是左側(cè)的內(nèi)容區(qū)域。</p></div><div class="right"><h2>右側(cè)內(nèi)容</h2><p>這里是右側(cè)的內(nèi)容區(qū)域。當(dāng)屏幕尺寸變小時，我會移動到左下方。</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>響應(yīng)式布局示例</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;/* 可以根據(jù)需要調(diào)整高度 */}.left {background-color: #ccc;flex: 1;/* 默認占據(jù)剩余空間 */}.right {background-color: #ddd;flex: 1;/* 默認占據(jù)剩余空間 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 當(dāng)屏幕寬度小于1200px時，左右兩側(cè)各占100%寬度 */}}</style></head><body><div class="header"><h1>導(dǎo)航欄</h1></div><div class="content"><div class="left"><h2>左側(cè)內(nèi)容</h2><p>這里是左側(cè)的內(nèi)容區(qū)域。</p></div><div class="right"><h2>右側(cè)內(nèi)容</h2><p>這里是右側(cè)的內(nèi)容區(qū)域。當(dāng)屏幕尺寸變小時，我會移動到左下方。</p></div></div></body>
</html>
三、效果
