目标:实现三栏布局,且要求最先渲染主体内容
实现步骤:
- 主体内容在左右侧边栏之上
- 三个部分向左浮动
- 左边栏的margin-left: -100%;
- 右边栏的margin-left: - 右边栏的宽度
- 设置父元素的padding-left: 左边栏的宽度
- 设置父元素的padding-right:右边栏的宽度
- 设置左右边栏为相对定位
- 设置左边栏的left值为 - 左边栏的宽度
- 设置右边栏的right值为 - 右边栏的宽度
执行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 100px;
background-color: purple;
font-size: 50px;
/* 文字水平居中 */
text-align: center;
/* 字体颜色 */
color: white;
/* 字体垂直居中 */
line-height: 100px;
min-width: 650px;
}
.main {
/* 解决父元素的高度塌陷 */
overflow: hidden;
/* 设置的值为左边栏的宽度 */
padding-left: 200px;
/* 设置的值为右边栏的宽度 */
padding-right: 250px;
min-width: 200px;
}
.left {
width: 200px;
height: 400px;
background-color: rgb(190, 147, 66);
font-size: 30px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 250px;
height: 400px;
background-color: rgb(17, 153, 153);
font-size: 30px;
text-align: center;
float: left;
margin-left: -250px;
position: relative;
right: -250px;
}
.content {
background-color: pink;
color: blue;
/* 向左浮动 */
float: left;
}
</style>
</head>
<body>
<div class="header">网站头部</div>
<div class="main">
<!-- 三栏布局:固比固 -->
<div class="content">
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
网站的主体内容
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
<div class="footer">网站底部</div>
</body>
</html>