<!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>
博客列表 >圣杯布局_0115
圣杯布局_0115
- 小孔的博客原创转载
- 2019年02月13日 11:43:49726浏览
上一条：JS运动原理下一条：评论功能练习（0124 作业）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议