zoukankan      html  css  js  c++  java
  • 131可以变化宽度的简单布局

    这里面我们要做的就是,当浏览器变化时,布局也同时跟着变化。

    实现这一简单效果,代码如下:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #header,#content,#footer{
     background-color:#ccc;
     border:1px solid #00C;
     height:50px;
     80%;
     margin:10px auto;
    }
    #content{
     height:500px;
    }
    #left{
     height:500px;
     30%;
     float:left;
     background-color:#C90;
    }
    #right{
     height:500px;
     49.5%;
     float:right;
     border:solid 1px #060;
     background-color:#c96;

    }
    #cont{
     height:500px;
     border:1px red solid;
     20%;
     float:left;
     background-color:#960;
    }
    </style>
    </head>

    <body>
    <div id="header"><h3>1-3-1(1)</h3></div>

    <div id="content">
        <div id="left">
        <div id="varleft"></div>
        </div>
         <div id="cont"></div>
        <div id="right">
     sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs
        </div>
    </div>

    <div id="footer"></div>
    </body>
    </html>

    主要是将原来的固定宽度,改变成为百分比。这样就可以实现浏览器变化窗口也随之变化了

  • 相关阅读:
    javaweb登录验证码的实现
    jQuery Ajax 简单的实现跨域请求
    Java Socket长连接示例代码
    Java socket长连接代码实现
    带日期的bean转为json(bean->JSON)
    函数迭代器、生成器、递归
    闭包函数和装饰器
    函数名称空间与作用域
    函数基础
    基本的文件操作
  • 原文地址:https://www.cnblogs.com/zfang/p/2248055.html
Copyright © 2011-2022 走看看