上海微信网站设计制作,聚名网域名注册,建筑材料东莞网站建设,北京最新楼盘广告文章目录 前言一、组成二、代码1. css 样式2. body 内容3.全部整体 三、效果 前言
一个自适应的html布局 一、组成
整体居中#xff0c;宽度1200px#xff0c;小屏幕宽度100%
二、代码
1. css 样式
代码如下#xff08;示例#xff09;#xff1a;
style* {… 文章目录 前言一、组成二、代码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 内容
代码如下示例
bodydiv classheaderh1导航栏/h1/divdiv classcontentdiv classlefth2左侧内容/h2p这里是左侧的内容区域。/p/divdiv classrighth2右侧内容/h2p这里是右侧的内容区域。当屏幕尺寸变小时我会移动到左下方。/p/div/div/body该处使用div组成。
3.全部整体
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title响应式布局示例/titlestyle* {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/headbodydiv classheaderh1导航栏/h1/divdiv classcontentdiv classlefth2左侧内容/h2p这里是左侧的内容区域。/p/divdiv classrighth2右侧内容/h2p这里是右侧的内容区域。当屏幕尺寸变小时我会移动到左下方。/p/div/div/body
/html三、效果
