商务网站规划与设计实训报告,定西seo霸屏推广,网站建设有那些,闵行交大网站建设大家看到好多电商网站都见过经典三列布局#xff0c;它也叫做圣杯布局 #xff0c;是Kevin Cornell在2006年提出的一个布局模型概念#xff0c;这个在国内最早是由淘宝UED的工程师传播开来#xff0c;在中国也有叫法是双飞翼布局#xff0c;它的布局要求有以下的几点… 大家看到好多电商网站都见过经典三列布局它也叫做圣杯布局 是Kevin Cornell在2006年提出的一个布局模型概念这个在国内最早是由淘宝UED的工程师传播开来在中国也有叫法是双飞翼布局它的布局要求有以下的几点 1、三列布局中间宽度就自适应目的都是左右两栏固定宽度 2、在执行代码时候代码是从上往下执行的。中间栏要在浏览器中优先展示渲染。中间往往是大家最关注的点。 3、允许任意列的高度最高4、要求只用一个额外的DIV标签 参考代码 !DOCTYPE html
htmlheadmeta charsetutf-8 /title双飞翼或圣杯布局/titlestyle*{margin: 0;padding: 0;}#continate{font:18px/30px 微软雅黑; /*第一个是字体大小 第二 是字体行高 第三 字体**/}/**全局定义三个div高度*/#conter,#left,#right{height: 300px;float: left;}#conter{background: sandybrown;width: 100%;}#left{background: lightblue;width: 30%;margin-left: -100%; /*往上100%就是回到最开始哪里*/}#right{background: cyan;width: 20%;margin-left: -20%;/*往上100%就是回到最开始哪里*/}header,footer{height: 100px;line-height: 100px;text-align: center;background: salmon;clear: both;/*清除浮动要不然里面的div无法进入 因为里面没有指定height*/}#yingca{padding: 0 20% 0 30%;/*去掉左右的距离把隐藏的内容显示出来**/}/*示例中增加一个#yingca的目的是因为当left上移时与center重叠了left覆盖了center通过yingca的padding将left占用的位置空出。* *//style/headbodyheaderone/headerdiv idcontinatediv idonediv idconterdiv idyingcaconter/div/divdiv idleftleft/divdiv idrightright/div/div/divfooterfooter/footer/body
/html View Code 菜鸟一枚 转载于:https://www.cnblogs.com/LCH-M/p/9336624.html
