CSS网页布局
经典三列布局：
1.通过 display: inline-block 实现：
例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置视口，适配移动端 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>经典三列布局：通过display改变元素性质来实现</title> <style> /* 全局初始化，清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部导航栏样式 */ #navigator { width: 100%; /* 宽度占满整个屏幕 */ height: 30px; /* 导航栏高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ } /* 中间内容区域总容器 */ #content { /* 宽度占满整个屏幕 */ width: 100%; /* 内容区域高度 */ height: 800px; } /* 左侧红色栏 */ #div1 { width: 10%; /* 宽度占父容器的10% */ height: 100%; /* 高度占父容器的100% */ background-color: red; /* 背景颜色：红色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 中间绿色栏（核心） */ #div2 { /* 重要说明： 正常三列总和应为 10% + 80% + 10% = 100% 但是 display: inline-block 元素(行内块元素)之间， 默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙 所以必须把宽度从 80% 缩小为 79%，腾出空间给这个空白间隙 否则三列总宽度会超出100%，导致第三列被挤到下一行 */ width: 80%; /* 宽度占父容器的80% */ height: 100%; /* 高度占父容器的100% */ background-color: green; /* 背景颜色：绿色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 右侧蓝色栏 */ #div3 { width: 10%; /* 宽度占父容器的10% */ height: 100%; /* 高度占父容器的100% */ background-color: blue; /* 背景颜色：蓝色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 底部页脚样式 */ #footer { width: 100%; /* 宽度占满整个屏幕 */ height: 30px; /* 页脚高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ } </style> </head> <body> <!-- 顶部导航栏 --> <div id="navigator">网页导航栏</div> <!-- 中间三列内容区域 --> <div id="content"> <div id="div1">左侧栏</div> <div id="div2">中间内容区</div> <div id="div3">右侧栏</div> </div> <!-- 底部页脚 --> <div id="footer">网页页脚</div> </body> </html>！注意：
正常三列总和应为 10% + 80% + 10% = 100%
但是display: inline-block元素(行内块元素)之间， 默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙，所以必须把宽度从 80%缩小为 79%，腾出空间给这个空白间隙，否则三列总宽度会超出100%，导致第三列被挤到下一行（如上图所示）
例2：（正确做法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置视口，适配移动端 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>经典三列布局：通过display改变元素性质来实现</title> <style> /* 全局初始化，清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部导航栏样式 */ #navigator { width: 100%; /* 宽度占满整个屏幕 */ height: 30px; /* 导航栏高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ } /* 中间内容区域总容器 */ #content { /* 宽度占满整个屏幕 */ width: 100%; /* 内容区域高度 */ height: 800px; } /* 左侧红色栏 */ #div1 { width: 10%; /* 宽度占父容器的10% */ height: 100%; /* 高度占父容器的100% */ background-color: red; /* 背景颜色：红色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 中间绿色栏（核心） */ #div2 { width: 79%; /* 宽度占父容器的79% */ height: 100%; /* 高度占父容器的100% */ background-color: green; /* 背景颜色：绿色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 右侧蓝色栏 */ #div3 { width: 10%; /* 宽度占父容器的10% */ height: 100%; /* 高度占父容器的100% */ background-color: blue; /* 背景颜色：蓝色 */ display: inline-block; /* 将块级元素转为行内块元素，实现横向并排 */ } /* 底部页脚样式 */ #footer { width: 100%; /* 宽度占满整个屏幕 */ height: 30px; /* 页脚高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ } </style> </head> <body> <!-- 顶部导航栏 --> <div id="navigator">网页导航栏</div> <!-- 中间三列内容区域 --> <div id="content"> <div id="div1">左侧栏</div> <div id="div2">中间内容区</div> <div id="div3">右侧栏</div> </div> <!-- 底部页脚 --> <div id="footer">网页页脚</div> </body> </html>通过我的测试，这里将中间绿色栏设置宽度（width: ; ）占父容器的79%~79.4%都可以达到上图效果。
2.通过 position 定位实现：
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>经典三列布局：position定位实现</title> <style> /* 全局初始化，清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部网页导航栏 */ #navigator { width: 100%; height: 30px; background-color: orange; text-align: center; } #content { width: 100%; height: 800px; /* 父容器设置相对定位，作为子元素绝对定位的参考基准 */ position: relative; } /* 左 */ #div1 { width: 10%; height: 100%; background-color: red; /* 设置绝对定位，固定在父容器左侧 */ position: absolute; left: 0; /* 距离父容器左侧0像素 */ top: 0; /* 距离父容器顶部0像素 */ } /* 中间 */ #div2 { width: 80%; height: 100%; background-color: green; /* 设置绝对定位，位于左侧栏右边 */ position: absolute; left: 10%; /* 距离父容器左侧10%（刚好在左侧栏后面） */ top: 0; /* 距离父容器顶部0像素 */ } /* 右 */ #div3 { width: 10%; height: 100%; background-color: blue; /* 设置绝对定位，固定在父容器右侧 */ position: absolute; right: 0; /* 距离父容器右侧0像素 */ /* 或者可以设置成 left: 90%; 即：距离父容器左侧90像素 */ top: 0; /* 距离父容器顶部0像素 */ } /* 底部网页页脚 */ #footer { width: 100%; height: 30px; background-color: orange; text-align: center; } </style> </head> <body> <div id="navigator">网页导航栏</div> <div id="content"> <div id="div1">左</div> <div id="div2">中</div> <div id="div3">右</div> </div> <div id="footer">网页页脚</div> </body> </html>3.通过 display: flex 实现：
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex实现三列布局</title> <style> /* 全局初始化，清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器：Flex布局核心 */ #content { width: 100%; min-height: 500px; display: flex; /* 开启Flex布局 */ } /* 左侧栏 */ #div1 { background-color: red; width: 10%; /* 电脑端宽度 */ } p { width: 10%; height: 30px; border: 2px black solid; margin-right: 15px; margin-bottom: 15px; } /* 中间内容栏 */ #div2 { background-color: green; width: 80%; /* 电脑端宽度 */ display: flex; flex-wrap: wrap; /* 允许弹性盒内部的项目自动换行 */ align-content: flex-start; /* 弹性盒内部的项目按行向交叉轴起点对齐 */ } /* 右侧栏 */ #div3 { background-color: blue; width: 10%; /* 电脑端宽度 */ } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } </style> </head> <body> <div id="navigator">网页导航栏</div> <div id="content"> <div id="div1">左侧栏</div> <div id="div2"> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> <p>11</p> </div> <div id="div3">右侧栏</div> </div> <div id="footer">网页页脚</div> </body> </html>flex针对不同设备的响应式布局：
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> <style> /* 全局初始化，清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器：Flex布局核心 */ #content { width: 100%; min-height: 500px; display: flex; /* 开启Flex布局 */ flex-wrap: wrap; /* 允许自动换行，响应式必备 */ } /* 左侧栏 */ #div1 { background-color: red; width: 10%; /* 电脑端宽度 */ } /* 中间内容栏 */ #div2 { background-color: green; width: 80%; /* 电脑端宽度 */ } /* 右侧栏 */ #div3 { background-color: blue; width: 10%; /* 电脑端宽度 */ } /* ==================== 响应式区间 ==================== */ /* 平板端：宽度≤768px，不改变顺序，左右自动并排 */ @media (max-width: 768px) { /* 左侧占一半宽度 */ #div1 { width: 50%; } /* 中间占满整行，自动换行 */ #div2 { width: 100%; } /* 右侧占一半宽度，自动跟上一行剩余位置 */ #div3 { width: 50%; } } /* 手机端：宽度≤480px，全部单列 */ @media (max-width: 480px) { #div1,#div2,#div3 { width: 100%; } } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } </style> </head> <body> <div id="navigator">网页导航栏</div> <div id="content"> <div id="div1">左侧栏</div> <div id="div2">中间内容</div> <div id="div3">右侧栏</div> </div> <div id="footer">网页页脚</div> </body> </html>根据上面的知识练习制作一个网页:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习</title> <style> /* 全局初始化，清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 顶1*/ #navigator1 { width: 100%; /* 宽度占满整个屏幕 */ height: 160px; /* 导航栏高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ display: flex; } /* 顶2 */ #navigator2 { width: 100%; /* 宽度占满整个屏幕 */ height: 40px; /* 导航栏高度 */ background-color: orange; /* 背景颜色：橙色 */ text-align: center; /* 文字水平居中 */ display: flex; /* 开启Flex布局 */ line-height: 40px; /*整行高度固定 40px，文字上下居中*/ } /* 内容容器：Flex布局核心 */ #content { width: 100%; min-height: 500px; display: flex; /* 开启Flex布局 */ } /* 左侧栏 */ #div1 { background-color: green; width: 10%; /* 电脑端宽度 */ } /* 中间内容栏 */ #div2 { background-color: blue; width: 80%; /* 电脑端宽度 */ flex-wrap: wrap; /* 允许弹性盒内部的项目自动换行 */ align-content: flex-start; /* 弹性盒内部的项目按行向交叉轴起点对齐 */ display: grid; grid-template-columns: repeat(4, 2fr); /* 4列，每列宽度 1fr（均分剩余空间） */ gap: 10px; /* 列之间间距 */ } img { width: 100%; height: 100%; object-fit: cover; /* 等比例填充，裁剪边缘 */ background: white } #img1{ border:gold 6px solid; padding: 10px; border-radius: 17px; /* 圆角边框 */ justify-content: space-evenly; /*justify-content: space-evenly 项目在容器中均匀分布*/ } /* 右侧栏 */ #div3 { background-color: red; width: 10%; /* 电脑端宽度 */ right: 0; /* 距离父容器右侧0像素 */ } #img2 { position: fixed; background-color: peachpuff; position: fixed; /* 设置固定定位，固定在父容器右侧 */ right: 3px; /* 距离窗口左侧3px */ top: 400px; /* 距离窗口顶部400px */ border-radius: 17px; /* 圆角边框 */ padding: 10px; /* 内边距，上下左右四个方向统一设置为10px */ } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; display: flex; } </style> </head> <body> <!--顶1--> <div id="navigator1"> <img src="./时代峰峻.jpg" alt=""> <img src="./TFAMILY.jpg" alt=""> <img src="./合照.jpg" alt=""> </div> <!--顶2--> <div id="navigator2" style="justify-content: space-evenly;"> <div>活动公告</div> <div>艺人动态</div> <div>媒体馆</div> <div>商城</div> </div> <!--内容--> <div id="content"> <!--左边--> <div id="div1" align="center">左侧栏</div> <!--中间--> <div id="div2"> <div><img src="./For you.jpg" alt="" id="img1"></div> <div><img src="./16.jpg" alt="" id="img1"></div> <div><img src="./尾号6208.jpg" alt="" id="img1"></div> <div><img src="./Y.jpg" alt="" id="img1"></div> <div><img src="./Right Track.jpg" alt="" id="img1"></div> <div><img src="./H.jpg" alt="" id="img1"></div> <div><img src="./No Complaints.jpg" alt="" id="img1"></div> <div><img src="./sm1.jpg" alt="" id="img1"></div> <div><img src="./sm2.jpg" alt="" id="img1"></div> <div><img src="./SHAKE.jpg" alt="" id="img1"></div> <div><img src="./fly.jpg" alt="" id="img1"></div> <div><img src="./someone to love.jpg" alt="" id="img1"></div> </div> <!--右边--> <div id="div3" align="center">右侧栏 <div id="img2"> <h3 align="center">登录</h3> <input type="text" placeholder="请输入姓名" ><br> <input type="text" placeholder="请输入密码"><br> <input type="submit"> <!--配置input为提交按钮--> <input type="reset"> <!--配置input为重置按钮--> </div> </div> </div> <!--底--> <div id="footer" style="justify-content: space-evenly;" > <div>首页</div> <div>家族</div> <div>商城</div> <div>我的</div> </div> <footer align="center"> 版权所有@Serena </footer> </body> </html>因为设置了一个固定定位，所以无论怎么滚动鼠标滑轮，那个“登录”的框框位置都不会动。（演示实例在下一个文章中，如果感兴趣请看下一个文章。）