CSS简单实现圣杯布局和双飞翼布局 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


CSS简单实现圣杯布局和双飞翼布局

2020-2-19 释然 前端及开发文章及欣赏


一、你能学到什么?
①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性

css变量设置(两个布局都有的部分)
:root{
    /* 左边栏宽度 */
    --lw:300px;
    /*负左边栏宽度*/
    --lwf:-300px;
    /* 右边栏宽度 */
    --rw:400px;
    /*负左边栏宽度*/
    --rwf:-400px;
    /* 高度 */
    --height:300px;
}

二、圣杯布局的html和css代码
html部分
  <div class="holyGrail">
    <div class="hg_main">main</div>
    <div class="hg_left">left</div>
    <div class="hg_right">right</div>
  </div>

css 实现对应的四个class
.holyGrail {
    height: var(--height);
    /* 留出左右两栏的布局 为了字体不被覆盖*/
    padding-left: var(--lw);
    padding-right: var(--rw);
}
.hg_main{
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.hg_left{
    position: relative;
    left: var(--lwf);
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.hg_right{
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    height: var(--height);
    background-color: brown;
}


三、双飞翼布局的html和css代码
html部分
<div class="doubleWing">
    <div class="dw_main">
      <div class="dw_con">main</div>
    </div>
    <div class="dw_left">left</div>
    <div class="dw_right">right</div>
  </div>

css 实现对应的五个class
.doubleWing{
    padding-right: var(--rw);
}
.dw_left{
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.dw_main{
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    background-color: brown;
    height: var(--height); 
}

四、学会两个布局的注意点
圣杯布局
在最外边的类(holyGrail)左右要留出左栏和右栏的宽度(使用padding-left,padding-right)
中间的div.hg_main放在最上面,优先渲染,中间div自适应,width为100%
左中右栏的div都设置浮动,左栏通过margin-left:-100%移动到和中间的div同一起点,然后通过position: relative;
left: -(左栏的宽度);会移动到最外层div的左内边距的区域(中间div的左边)
右栏可以通过margin-right:-(右栏的宽度);移动到最外层div的右内边距的区域(中间div的右边)
双飞翼布局
在中栏的div再加一个div,设置margin-left:左栏的宽度,这样可以省略左栏的div使用postion和left的属性移动
最外层的div可以不用预留左栏的位置了
五、两个布局的对比的优缺点
布局 优点 缺点
圣杯 无多余dom 当中间的宽度小于左右的宽度时,结构混乱
双飞翼 可以支持各种宽度,通用性强较强 需要多加一层dom
代码下载地址
记得一定要自己去实现一下

标签: CSS简单实现圣杯布局和双飞翼布局 « html内联元素和块级元素的基本概念及使用示例 | html+css基础教程入门篇之css选择器详细解读»


蓝蓝 http://www.bjhbys.com

  1. 2020年3月(29)
  2. 2020年2月(60)
  3. 2020年1月(32)
  4. 2019年12月(50)
  5. 2019年11月(61)
  6. 2019年10月(49)
  7. 2019年9月(48)
  8. 2019年8月(58)
  9. 2019年7月(58)
  10. 2019年6月(58)
  11. 2019年5月(31)
  12. 2019年4月(37)
  13. 2019年3月(43)
  14. 2019年2月(25)
  15. 2019年1月(45)
  16. 帝皇彩票官网2018年12月(41)
  17. 2018年11月(40)
  18. 2018年10月(29)
  19. 2018年9月(40)
  20. 2018年8月(87)
  21. 2018年7月(107)
  22. 帝皇彩票官网2018年6月(86)
  23. 2018年5月(110)
  24. 2018年4月(40)
  25. 2018年3月(35)
  26. 2017年8月(35)
  27. 2017年7月(45)
  28. 2017年6月(7)
  29. 2017年5月(27)
  30. 2017年4月(51)
  31. 2017年3月(70)
  32. 2017年2月(65)
  33. 2017年1月(69)
  34. 2016年12月(55)
  35. 2016年11月(111)
  36. 帝皇彩票官网2016年10月(92)
  37. 2016年9月(53)
  38. 2016年8月(9)
  39. 2016年7月(4)
  40. 2016年6月(9)
  41. 2016年3月(19)
  42. 2016年2月(26)
  43. 2016年1月(30)
  44. 2015年12月(33)
  45. 2015年11月(35)
  46. 2015年10月(46)
  47. 2015年9月(43)
  48. 2015年8月(40)
  49. 2015年7月(33)
  50. 2015年6月(46)
  51. 2015年5月(58)
  52. 2015年4月(70)
  53. 2015年3月(55)
  54. 2015年2月(17)
  55. 2015年1月(33)
  56. 帝皇彩票官网2014年12月(21)
  57. 2014年11月(84)
  58. 帝皇彩票官网2014年10月(94)
  59. 2014年9月(6)
  60. 2014年8月(1)
  61. 2014年7月(13)
  62. 2014年6月(66)
  63. 2014年5月(99)
  64. 2014年4月(88)
  65. 2014年3月(102)
  66. 2014年2月(68)
  67. 帝皇彩票官网2014年1月(83)
  68. 2013年12月(106)
  69. 2013年11月(112)
  70. 帝皇彩票官网2013年10月(61)
  71. 2013年9月(20)
  72. 2013年7月(13)
  73. 2013年6月(27)
  74. 2013年5月(48)
  75. 2013年4月(39)
  76. 2013年3月(8)
  77. 2013年2月(20)
  78. 2013年1月(31)
  79. 帝皇彩票官网2012年12月(33)
  80. 帝皇彩票官网2012年11月(31)
  81. 帝皇彩票官网2012年10月(23)
  82. 2012年9月(8)
  83. 2012年7月(14)
  84. 2012年6月(15)
  85. 2012年5月(31)
  86. 2012年4月(24)
  87. 2012年2月(4)
  88. 2012年1月(8)
  89. 2011年12月(35)
  90. 2011年11月(32)
  91. 2011年10月(13)
  92. 2011年8月(1)
  93. 2011年6月(1)
订阅Rss
博发彩票开奖 贵州快3走势 河北快3代理 迪士尼彩乐园 吉利彩票开奖 大象彩票登入 博发彩票登陆 桔子彩票开奖 帝皇彩票平台 桔子彩票平台