圣杯布局 封装获取url的key值 两栏式布局 绝对居中

封装获取url的key值

• 传入url返回一个对象

  // xxx？k0=0&k1=1
   function param(url){
        var list = url.split("?")[1].split("&");
        var data={}
        for(var i=0;i<list.length;i++){
            data[list[i].split("=")[0]] = list[i].split("=")[1]
        }
        return data;
    }
  

圣杯布局

<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

同效果

两栏式布局

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
</div>

<style>
    .left{
        width: 200px;
        float: left;
        height: 100%;
        background: #f1c237;
    }
    .main{
        overflow: hidden;
        height: 200px;
        }
    .center{
        height: 100%;
        background: #0086B3;
    }
</style>

绝对居中

适用不设置宽度高度

• ps: body,html的宽高100%不设置也可居中