zoukankan      html  css  js  c++  java
  • 管理后台上左右式HTML框架搭建

      CSS:

      

    <style>
    .frame-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 11;
    min- 960px;
    height: 38px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #3B3B3B;
    _position: absolute;
    _ 100%;
    }
    .frame-side {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    z-index: 2;
     200px;
    border-left: 1px solid #DBDBDB;
    background: #F9F9F9;
    box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.05);
    _height: 100%;
    }
    .frame-contents {
    position: absolute;
    top: 40px;
    right: 201px;
    bottom: 0;
    left: 0;
    min- 760px;
    }
    .frame-contents iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
     100%;
    height: 100%;
    }
    </style>
    

      

      HTML:

    <div class="frame-header">I'm the header.</div>
    <div class="frame-side">I'm the right-side.</div>
    <div class="frame-contents">
    <iframe src="http://www.baidu.com" frameborder="0" ></iframe>
    </div>
    

      主体 frame-contents内容自适应高宽,超出部分滚动显示。

  • 相关阅读:
    react-webpack-express
    React总结和遇到的坑
    vue+node+mongodb实现的功能
    webpack整体了解
    webpack踩坑
    深入了解MongoDB
    实现pdf word在线浏览和下载
    node实现爬虫
    火客声音分析
    抖音二婷衣橱分析
  • 原文地址:https://www.cnblogs.com/wangtuda/p/2891397.html
Copyright © 2011-2022 走看看