PC实现三栏布局
三栏布局实现大体可以分为两种布局：
1.1圣杯布局
圣杯布局：
1.设置好大体标签布局。
<body>
<header>header</header>
<div class="clearfix">
<div class="content">内容</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<footer>footer</footer>
</body>
2.设置好通用的样式
3.将<header>与<footer>样式设置好，然后开始着手内容部分。
4.设置<left> <right>宽高为固定值，<center>宽为100%，高为固定值。
5.将<left> <right><center>都进行浮动，然后将父标签清除浮动。
6.然后将<left>的margin-left值设置 -100%，<right>margin-left值设置为负的自己本身的宽度.
7.此时会发现<left> <right>标签其实是遮盖<content>标签上，我们需要给父标签加上一个padding左右值是
<lef> <right>本身宽度的内边距。
8.我们将<left> <right>标签进行相对定位，<left> left：负自身的宽度，<right>right：负自身的宽度。
9.将我们的body设置上最小的宽度，防止缩放的时候，排版出现乱版现象。
<!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;
}
body{
text-align: center;
min-width: 620px;
font-size: 50px;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.clearfix{
padding: 0 200px;
}
.left,.right,.content{
float: left;
height: 300px;
}
.content{
width: 100%;
background-color: cornflowerblue;
}
.left{
width: 200px;
background-color: cyan;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
background-color: darkgreen;
margin-left: -200px;
position: relative;
right: -200px;
}
header{
width: 100%;
height: 100px;
background-color: 
最低0.47元/天 解锁文章
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
