圣杯布局

最新推荐文章于 2023-04-20 15:16:51 发布

鲁城铭

最新推荐文章于 2023-04-20 15:16:51 发布

阅读量171

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36476376/article/details/52953965

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<h1><pre name="code" class="html"><h1><span style="font-family:FangSong_GB2312;font-size:32px;"><strong><a target=_blank href="http://www.cnblogs.com/luchengming/p/5885941.html" target="_blank">圣杯布局</a></strong></span></h1><pre name="code" class="html">

关键词：

<margin>外边距<padding>内边距

<width>宽度<height>高度

<top>上<bottom>下<left>左<right>右

<position>位置<relative>相对<absolute>绝对<fixed>固定<float>浮动

<background>背景

方法：

<!doctype html>

<html> <head><title>圣杯布局</title><style>.shengbei{min-height:200px;margin:0 150px 0 300px;}.middle,.right,.left{min-height:200px;float:left;position:relative;}.middle{width:100%;min-height:200px;background:#ff0000;}.left{width: 300px;min-height: 200px;background: #0026ff;margin-left:-100%;position:relative;left:-300px; }.right{width:150px;min-height:200px;background:#00ff21;margin-left:-150px;position:relative;left:150px;}</style></head><body><div class="shengbei"><div class="middle">中</div><div class="left">左</div><div class="right">右</div></div> </body></html>

效果图