收藏
批改状态：合格
老师批语：缺少的作业尽快补齐哦！20号就要继续上课了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{margin: 0px;padding: 0px;}
.header{width: 1200px;height: 60px;background: lightgray;margin: 0 auto;line-height: 60px;text-align: center;}
.content{width: 800px;margin: 5px auto;background: lightgray;min-height: 600px;padding-left: 200px;padding-right: 200px;}
.main{min-height: 600px;background: lightsteelblue;width:inherit;}
.left{min-height: 600px;width: 200px;background: lightyellow;margin-left: -100%;position: relative;left: -200px;}
.right{min-height: 600px;width: 200px;background: lightsalmon;margin-left: -200px;position: relative;left: 200px;}
.main,.left,.right{float: left;}
.footer{width: 1200px;height: 60px;background: lightslategray;margin: 0 auto;line-height: 60px;text-align: center;}
</style>
</head>
<body>
<div class="header"><h2>网站头部</h2></div>
<div class="content">
<div class="main">网站主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer"><h2>网站底部</h2></div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
