美文网首页
圣杯布局 封装获取url的key值 两栏式布局 绝对居中

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

作者: 前端雨 | 来源:发表于2018-08-21 21:20 被阅读0次

封装获取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%不设置也可居中

相关文章

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

    封装获取url的key值 传入url返回一个对象// xxx?k0=0&k1=1 function param(u...

  • 实现三栏布局的六种方式

    六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...

  • 「CSS」常见布局样例

    自动居中一列布局 横向两列布局 绝对定位的横向两列布局 自动居中一列布局 所需知识: 标准文档流 块级元素 mar...

  • CSS经典布局整理

    三栏式布局 涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子...

  • CSS布局分类

    两栏布局 三栏布局 双飞翼布局 圣杯布局

  • 布局

    1.实现单栏式布局 一栏布局 一栏式布局(优化) 一栏式布局(通栏) 小BUG解决办法:1. 给body或者是通栏...

  • 实现两边定宽,中间自适应

    标签(空格分隔): css 圣杯布局和双飞翼布局、flex布局 定义 圣杯布局(双飞翼布局):两边定宽,中间宽度自...

  • 特殊布局方法

    关于圣杯布局和双飞翼布局:CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...

  • CSS边用边学(一):一站式各种布局实践

    目录 布局相关属性displaypositionfloat 各种布局两栏布局三栏布局水平居中垂直居中 总结 概述 ...

  • css-grid布局

    css布局是前端页面无法避免的一个问题,经典的圣杯布局,水平/垂直居中问题等,我们以前用到的tabel布局,浮动布...

网友评论

      本文标题:圣杯布局 封装获取url的key值 两栏式布局 绝对居中

      本文链接:https://www.haomeiwen.com/subject/qalsiftx.html