zoukankan      html  css  js  c++  java
  • (5)经典三栏式布局

    html部分:

    <body>
            <div id='main'><div id='middle'></div></div>
        <div id='left'></div>
        <div id='right'></div>
    
    </body>   

    css部分:

    
    
    
    
    <style type='text/css'>
    html,body{
                      margin:0;
                      height:100%;
                }
     #main{
                      height:100%;
                      width:100%;
                      background:red;
                      float:left;
                }
    #middle{
                        height:100%;
                        margin:0 210px;
                    }
    
    #left,#right{    float:left;
                        height:100%;
                        width:200px;
                        background-color:green;
         }
    #left{
                    margin-left:-100%;
            }
    #right{
                    margin-left:-200px;
        }   
    </style>          
    
    
    
    
    
    
    
    
    首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
  • 相关阅读:
    三层架构补充
    复习三层架构
    复习DOM、JQuery
    复习HTML CSS JavaScript
    Git在新电脑拉github 上的项目
    超全的IE兼容性问题及解决方案
    JS操作iframe
    attachEvent和addEventListener
    HTTP 方法:GET 对比 POST
    原生JS+ CSS3创建loading加载动画;
  • 原文地址:https://www.cnblogs.com/koutuzai/p/6718908.html
Copyright © 2011-2022 走看看