导航栏悬浮左侧和圣杯布局(兼容ie8)

作者: 好奇的猫猫猫 | 来源:发表于2020-01-11 22:10 被阅读0次

导航栏悬浮左侧和圣杯布局(兼容ie8)
CSS布局的一般步骤
vue bootstarp 左侧导航栏可收缩，移动端适配成滑入画
导航栏布局和flex+auto margins(梁王的开发笔记)
swift-导航栏
CSS布局知识点
CSS布局分类
入门任务11
入门任务11
CSS布局


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>测试</title>
  <script type="text/javascript"src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <style type="text/css">
    #all {
      width: 100%;
      height: 100vh;
      background: red;
      margin: auto;
      position: relative;
    }
    #title{
      width:100%;
      height:50px;
      background: yellow;
      text-align: center;
    }
    #left {
      width: 20%;
      display: inline;
      float: left;
      background: #8a2be2;
      position: absolute;
      left:0px;
      top:50px;
      height:auto!important;
      height:800px;
      min-height:800px; 
      z-index: 999;
    }
    #right {
      background: #e6e6e6;
      position: relative;
      height: 100%;
      /* width:80%; */

    }
    #right2{
        /* height: 100%; */
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        background-color: blue; 
        height:auto!important;
        height:800px;
        min-height:800px;
        /* 默认还是整行 */
    }
    #right21{
      /* height: 50%; */
      background: green;
      height:auto!important;
      height:800px;
      min-height:800px; 
      margin: 0 210px;
    /* 中间模块空出左右距离，设置浮动 */

    }

    #right1{
        width: 210px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        min-height: 100%; 
        background-color: orange; 
    }
    #right11{
      height: 50%;
      background: pink;
      height:auto!important;
      height:400px;
      min-height:400px;   
    }
    #right12{
      height: 50%;
      background: blue;
      height:auto!important;
      height:400px;
      min-height:400px; 
    }

    #right3{
      float: left; 
      width: 210px; 
      min-height: 100%; 
      margin-left: -210px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
      background-color: orange; 
    }
    #right31{
      height: 50%;
      background: pink;
      height:auto!important;
      height:400px;
      min-height:400px; 
    }
    #right32{
      height: 50%;
      background: blue;
      height:auto!important;
      height:400px;
      min-height:400px; 
    }
    #btn{
      position: fixed;
      z-index: 999;
      width: 60px;
      height: 40px;
      top: 50%;
      left:9px;
    }
  </style>
</head>
<body>
<div id="all">
  <div id="title">我是title</div>
  <div id="left">我是left</div>
  <div id="right">
    <div id="right2">
        <div id="right21">2</div>
    </div>
    <div id="right1">
      <div id="right11">11</div>
      <div id="right12">12</div>
    </div>
    
    <div id="right3">
      <div id="right31">31</div>
      <div id="right32">32</div>
    </div>

  </divid="right2">
  <button id="btn">隐藏</button>
</div>
</body>
<script type="text/javascript">
var aa=0;
  $("#btn").click(function() {
    if(aa){
      $("#left").show();
      $("#btn").text('隐藏')
      aa=0;
    }else{
      $("#left").hide();
      $("#btn").text('显示')
      aa=1;
    }
    
  });
</script>
</html>

效果图：