两千人站长交流群: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>    
    其他网友正在看:
    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    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,js)

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

    2018-05-30关键词:

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却···

    2018-05-30关键词:

    CSS实现鼠标滑过鼠标点击代码写法

    鼠标滑过元素,使得元素的样式发生改变我们定义一个按钮标签复制代码代码如下:<button class=”px-button”>BUTTON</button>我们首先设置按钮的背景颜色为灰色:复制代码代码如下:.px-button{background-color: grey;}我们要使得鼠标滑过···

    2018-05-30关键词: