圣杯布局
基本代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
display:flex;
flex-direction:column;
}
header{
width:100%;
height:80px;
background:#f00;
}
section{
padding:10px 0;
flex:1;
display:flex;
}
footer{
width:100%;
height:100px;
background:#00f;
}
.left{
background:#ff0;
width:200px;
}
.center{
background:#0ff;
flex:1;
margin:0 10px;
}
.right{
background:#f0f;
width:180px;
}
</style>
</head>
<body>
<header>
header
</header>
<section>
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer>
footer
</footer>
</body>
</html>
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
