html前段效果图,html前端三列布局

三列布局

初衷这得从去年我12月毕业去面试说起，学了三年前端，终于可以出山了。怀着无比激动投了上百份简历，命中率60%。虽说战果还是可以的，但是在近百场面试中，确实让我收获颇多，此文写于对前端的面试中发现自己的不足，查漏补缺，更加让自己的技术更加成熟，发现自己不足，从中明白自己的缺失。同时也希望也能帮助各位江湖中人解惑。

序言这里所要介绍的布局知识主要是在解决三列布局模式而出现的几种布局解法，其中包含了经典的圣杯布局，双飞翼布局，绝对定位的布局方式，还包含2009年W3C所提出的Flex布局方式和以CSS3所带来的calc计算函数来解决三列布局的方式

三列布局解决方法

圣杯布局由来：2006 年 Matthew Levine 在 《A LIST APART》 > 上发表了一篇名为 《In Search of the Holy Grail》的文章，提出了 圣杯布局 的思路。利用 负外边距 来实现我们需要的效果，充分体现了 CSS的艺术 与 负外边距 的强大。

原理: 利用float浮动和定位、负边框，实现两边固定，中间自适应的三栏布局

具体实现(采用html5和css3的语义化实现)

header

main

left

right

footer

/* header */

header{

height: 200px;

width: 100%;

background: #5dbb79;

display: flex;

justify-content: center;

align-items: center;

}

/* main */

main{

padding: 0 200px;

}

main .main{

float: left;

width: 100%;

height:400px;

background: rgb(73, 182, 176);

display: flex;

justify-content: center;

align-items: center;

}

main .left{

float: left;

width: 200px;

height: 400px;

margin-left: -100%;

position: relative;

left: -200px;