css-双飞翼布局+圣杯布局+侧边栏固定布局

最新推荐文章于 2024-07-12 08:49:29 发布

原创

最新推荐文章于 2024-07-12 08:49:29 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了三种常见的CSS布局模式：双飞翼布局，圣杯布局以及侧边栏固定布局。双飞翼布局具有良好的兼容性和优先加载主要内容的特点；圣杯布局通过定位和偏移避免了元素叠加；侧边栏固定布局涵盖了两栏和三栏布局的各种组合，包括固定和自适应宽度的侧边栏。

文章目录

网站开发策略：先整体再局部，至顶向下，逐步细化。

1. 双飞翼布局

由三列组成，两端固定，中间自适应。
两边叠加在了中间的上面
双飞翼布局的优点：
（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。
（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
在这里插入图片描述

 <div class="container">
	 <div class="conculor content"></div>
	 <div class="conculor left"></div>
	 <div class="conculor right"></div>
 </div>

<style type="text/css">
	.container{
		width: 100%;
		overflow: hidden;
	}
	.conculor{/* 公共样式，让列开始浮动 */
		float: left;
		height: 200px;
		
	}
	.content{
		width: 100%;/* 此时，content已经占据了父元素的整个宽度，并且这个宽度是自适应的 */
		background-color: #5F9EA0;
	}
	/* 开始实现左右列固定，采用margin赋负值的方法 */
	.left{
		width: 300px;
		background-color: #BC8F8F;
		margin-left: -100%;/* 固定列宽为300px，当margin-left: -100%;时，左边列会脱离自己所在的行，向上一行浮动 */
	}
	.right{
		width: 300px;
		background-color: #FFFF00;
		margin-left: -300px;/* 相同的原理实现右列固定 */
	}
</style>

2. 圣杯布局

由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
先用双飞翼将三块放在同一行，然后再将左边的向左移，右边的向右移，不会产生叠加现象
布局时与双飞翼比增加了定位和偏移设置。
在这里插入图片描述

<!-- 一个网页通常由上中下三部分组成 -->
<!-- 1.header头部 -->
<div class="header">#header</div>
<!-- 2.content主体内容区 -->
<di

最低0.47元/天解锁文章