zoukankan      html  css  js  c++  java
  • 自适应宽度,左右两栏固定宽度,中间栏优先加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        
        .content{
            width:100%;
            height:100%;
            position:relative;
            background:#000 url(background.jpg) no-repeat;
            overflow:hidden;
        }
    
        .left{
            width:200px;
            height:100%;
            background:#8CCA12;
            position:absolute;
            z-index:3;
            top:0;
            left:0;
        }
        
        .center-ct{
            height:100%;
            background:#CCCCCC;
            position:absolute;
            z-index:1;
            top:0;
            left:0;
            margin:0;
            width:100%;
        }
    
        .center{
            margin:0 200px;
        }
        .right{
            width:200px;
            height:100%;
            background:#6600FF;
            position:absolute;
            z-index:2;
            right:0;
            top:0;}
        </style>
    </head>
        <body>
            <div class="content">
                <div class="center-ct">
                        <div class="center">
                            center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
                     </div>
                </div>
                <div class="left">left</div>
                <div class="right">right</div>
            </div>
        </body>
    </html>
  • 相关阅读:
    41、XAML text editing
    使用JavaScript和DOM动态创建和修改表格(转)
    ThinkPHP入门
    PHP字符串
    sicily 6773. 用指针交换两个矩阵
    sicily 6572. partial sum
    sicily 1934. 移动小球
    sicily 1323. Switch text
    sicily 6766. tmp
    sicily 1293. 3n+1数链问题
  • 原文地址:https://www.cnblogs.com/yingsmirk/p/2461087.html
Copyright © 2011-2022 走看看