CSS完成网页页面多列合理布局与3列合理布局的方

2021-01-20 18:56 jianzhan
1. 应用BFC的基本原理完成
BFC的标准之1,便是BFC地区,不容易与float box重合,因而大家能够运用这1点来完成3列合理布局。
html编码以下
XML/HTML Code拷贝內容到剪贴板
  1. <div class="left"></div>  
  2. <div class="right"></div>  
  3. <div class="main"></div>  
css编码以下
CSS Code拷贝內容到剪贴板
  1. .left {   
  2.   floatleft;   
  3.   margin-right10px;   
  4.   width100px;   
  5.   height100px;   
  6.   background-color: orange;   
  7. }   
  8. .rightright {   
  9.   floatrightright;   
  10.   margin-left10px;   
  11.   width100px;   
  12.   height100px;   
  13.   background-color: orange;   
  14. }   
  15. .main {   
  16.   height100px;   
  17.   background-colorgreen;   
  18.   overflowhidden;   
  19. }  
2.双飞翼合理布局
这类合理布局计划方案最开始由淘宝提出,关键以便主列可以被最开始载入。
完成基本原理:
(1)让主例外面加上1个wrap,主列wrap,和2子列都左波动。
(2)设定主列wrap宽度为100%,将子列的margin-left设定为负值,让子列可以排序在上下两边。
(3)这是主列的margin-left与margin-right比上下多列的宽度大1点,则能够设定出来主列与子列之间的空隙。
html编码以下
XML/HTML Code拷贝內容到剪贴板
  1. <div class="wrap">  
  2.   <div class="main-content">  
  3.     <div class="main"></div>  
  4.   </div>  
  5.   <div class="left"></div>  
  6.   <div class="right"></div>  
  7. </div>  
css编码以下
CSS Code拷贝內容到剪贴板
  1. .wrap {   
  2.   width: 100%;   
  3. }   
  4. .wrap::after {   
  5.   displayblock;   
  6.   content'';   
  7.   font-size: 0;   
  8.   height: 0;   
  9.   clearboth;   
  10.   zoom: 1;   
  11. }   
  12. .main-content {   
  13.   floatleft;   
  14.   width: 100%;   
  15. }   
  16. .main {   
  17.   height100px;   
  18.   background-colorgreen;   
  19.   margin-left110px;   
  20.   margin-right110px;   
  21. }   
  22. .left {   
  23.   floatleft;   
  24.   width100px;   
  25.   height100px;   
  26.   background-color: orange;   
  27.   margin-left: ⑴00%;   
  28. }   
  29. .rightright {   
  30.   floatleft;   
  31.   width100px;   
  32.   height100px;   
  33.   background-color: orange;   
  34.   margin-left: -100px;   
  35. }  
3.圣杯合理布局
圣杯合理布局在构造上要简易1点,也可以让主列优先选择载入。
完成基本原理:
(1)加上1个包裹框,设定padding-leftpadding-right值,比子列宽度大1个间隙的宽度。
(2)主列,子列都设定为float: left 左子列margin-left设定为⑴00%,而且设定为position:relative; left: ⑴10px将左子列置放到左边。右子列同理。
(3)主列只需设定宽度为100%便可。包裹框的宽度不必设定为100%,自融入便可。
html编码以下
XML/HTML Code拷贝內容到剪贴板
  1. <div class="wrapper">  
  2.   <div class="main"></div>  
  3.   <div class="left"></div>  
  4.   <div class="right"></div>  
  5. </div>  
css编码以下
CSS Code拷贝內容到剪贴板
  1. .wrapper {   
  2.   padding-left110px;   
  3.   padding-right110px;   
  4.   overflowhidden;   
  5. }   
  6. .main {   
  7.   floatleft;   
  8.   width: 100%;   
  9.   height100px;   
  10.   background-color#ccc;   
  11. }   
  12. .left {   
  13.   floatleft;   
  14.   width100px;   
  15.   height100px;   
  16.   margin-left: ⑴00%;   
  17.   positionrelative;   
  18.   left: -110px;   
  19.   _left: 0;   
  20.   background-color: orange;   
  21. }   
  22. .rightright {   
  23.   floatleft;   
  24.   width100px;   
  25.   height100px;   
  26.   background-color: orange;   
  27.   margin-left: -100px;   
  28.   positionrelative;   
  29.   rightright: -110px;   
  30. }  
下面再得出1个高宽比占满全屏的事例:
CSS Code拷贝內容到剪贴板
  1. <p><!DOCTYPE html>     
  2. <html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">     
  3. <head runat="server">     
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />     
  5.     <title></title>     
  6.     <style type="text/css">     
  7.         body, html {     
  8.             margin0px;     
  9.         }     
  10.         #header {     
  11.             backgroundblue;     
  12.             height100px;     
  13.             width: 100%;     
  14.             positionrelative/*父div的部位设定成相对性的*/     
  15.             top: 0;     
  16.         }     
  17.             #header #h_menu {     
  18.                 position:absolute;     
  19.                 bottombottom:0;     
  20.                 background:yellow;     
  21.                 width:100%;     
  22.                 height:50px;     
  23.             }     
  24.         #middle {     
  25.             position:absolute;     
  26.             width:100%;     
  27.             height:auto;     
  28.             top100px;     
  29.             bottombottom:50px;                       
  30.         }     
  31.         .left {     
  32.             width: 15%;    /*这里是百分比或像素值,对应下面的center便是百分比或像素值*/     
  33.             backgroundred;     
  34.             floatleft;     
  35.             height:100%;     
  36.         }     
  37.         .rightright {     
  38.             width: 15%;  /*这里是百分比或像素值,对应下面的center便是百分比或像素值*/     
  39.             height: 100%;     
  40.             background: pink;     
  41.             floatrightright;     
  42.         }     
  43.         .center {     
  44.             height: 100%;     
  45.             backgroundgreen;     
  46.             /*两种方法都可(1)margin(2)margin-left、margin-right*/     
  47.             /*(1)、用这类方法上面的left和right中的width是百分比或像素值都可以以*/     
  48.             marginauto;         
  49.             /*(2)、这里是百分比或像素值,对应上面的left、right中的width便是百分比或像素值*/     
  50.             /*margin-left:15%;        
  51.             margin-right:15%;*/     
  52.         }     
  53.         #footer {     
  54.             backgroundblue;     
  55.             height50px;     
  56.             width: 100%;     
  57.             positionabsolute;     
  58.             bottombottom: 0;     
  59.         }     
  60.     </style>     
  61. </head>     
  62. <body>     
  63.     <form id="form1" runat="server">     
  64.         <div>     
  65.             <div id="header">     
  66.                 上       
  67.                 <div id="h_menu">     
  68.                     上_底     
  69.                 </div>                  
  70.             </div>     
  71.             <div id="middle">     
  72.                 <div class="left">     
  73.                     中左     
  74.                 </div>     
  75.                 <div class="right">     
  76.                     中右     
  77.                 </div>     
  78.                 <div class="center">     
  79.                     正中间     
  80.                 </div>     
  81.             </div>     
  82.             <div id="footer">     
  83.                 下     
  84.             </div>     
  85.         </div>     
  86.     </form>     
  87. </body>     
  88. </html>     
  89. </p>