两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • CSS实现页面两列布局与三列布局的方法示例

    DIV+CSS教程2018年05月30日关键词:

    1. 使用BFC的原理实现
    BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现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)让主列外面添加一个wrap,主列wrap,以及2子列都左浮动。
    (2)设置主列wrap宽度为100%,将子列的margin-left设置为负值,让子列能够排列在左右两侧。
    (3)这是主列的margin-left与margin-right比左右两列的宽度大一点,则可以设置出来主列与子列之间的间隙。
    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: -100%;   
    28. }   
    29. .rightright {   
    30.   floatleft;   
    31.   width100px;   
    32.   height100px;   
    33.   background-color: orange;   
    34.   margin-left: –100px;   
    35. }  

    3.圣杯布局
    圣杯布局在结构上要简单一点,也能够让主列优先加载。
    实现原理:
    (1)添加一个包裹框,设置padding-leftpadding-right值,比子列宽度大一个空隙的宽度。
    (2)主列,子列都设置为float: left 左子列margin-left设置为-100%,并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
    (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: -100%;   
    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. }  

    下面再给出一个高度占满全屏的例子:

    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-8" />     
    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.             /*两种方式均可(一)margin(二)margin-left、margin-right*/     
    47.             /*(一)、用这种方式上面的left和right中的width是百分比或者像素值都可以*/     
    48.             marginauto;         
    49.             /*(二)、这里是百分比或者像素值,对应上面的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>    
    其他网友正在看:
    前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。1.css的transition。语法:transition: property duration timing-func···

    2018-05-30关键词:

    CSS性能优化提高css性能的方法

    不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。css匹配原理在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。我们可能会这样写上一行代码CSS Code复制内容到剪贴···

    2018-05-30关键词:

    IE8的css hack \9 使用说明

    首先感谢“丸子”提供的这个IE8的css hack; 关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack: .test{ color:#000000; /* FF,OP支持 */ color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和&l···

    2018-05-30关键词:

    css小技巧汇总

    1、去除input记住密码后自动填充表单的黄色背景input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }//其中#fff是背景颜色值2、IE8不支持opacity:0属性,可以加上下面属性:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);3、IE···

    2018-05-30关键词:

    纯CSS3代码实现switch滑动开关按钮效果

    html结构XML/HTML Code复制内容到剪贴板<div class="container">          <div class="bg_con">           &n···

    2018-05-30关键词:

    css让容器水平垂直居中的7种方式

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。这种方法比较多,本文只总结其中的几种,以便加深印象。效果图都为这个:方法一:position加marginXML/HTML Code复制内容到剪贴板<div class="wrap">···

    2018-05-30关键词: