老师，请检查一下我的圣杯布局
来源：3-2 圣杯布局案例（了解即可）
慕村6371425
2020-06-29 19:53:37
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
* {margin:0; padding:0; color:#fff; font-size:16px;}
/* 设置最小页面宽度，值必须 >= 2x+y (x为左宽，y为右宽)*/
body {min-width: 750px;}
.footer,
.header {
width:100%;
background:#333;
height:100px;
line-height:100px;
text-align:center;
}
.content {
padding: 0 250px;
overflow:hidden;
height:800px;
text-align:center;
}
.left,.middle,.right {
float:left;
position:relative;
height:100%;
min-height:200px;
}
.left {
background:#f00;
width:250px;
margin-left:-100%;
left:-250px;
}
.right {
background:#30a457;
width:250px;
margin-left:-250px;
right:-250px;
}
/* 中间宽度自适应*/
.middle {
width:100%;
background:#1a5acd;
}
</style>
</head>
<body>
<div class="header">header</div>
<!-- 三列布局，中间宽度自适应，两边定宽-->
<div class="content">
<!-- 中间栏要优先渲染，先写middle-->
<div class="middle">
<h1>中间主要内容自适应</h1>
<p>这里是主要内容</p>
</div>
<div class="left">
<h1>左边内容定宽</h1>
<p>这里是左边内容</p>
</div>
<div class="right">
<h1>右边内容定宽</h1>
<p>这里是右边内容</p>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
1回答
-
好帮手慕星星
2020-06-30
同学你好，代码布局以及实现效果没有问题，很棒。继续加油，祝学习愉快！
0
相似问题