zoukankan      html  css  js  c++  java
  • 动态网页简版

    左中右都动

    <style type="text/css">
    #header,#content,#footer{
     80%;
     height:30px;
     background-color:#ccc;
     border:1px #9CC solid;
     margin:10px auto;}
    #content{
     height:500px;}
    #left{
     height:500px;
     29%;
     border:1px solid #99F;
     background-color:#CCF;
     float:left;}
    #zhong{
     height:500px;
     50%;
     border:1px solid #9CF;
     background-color:#09F;
     float:left;
     }
    #right{
     height:500px;
     20%;
     border:1px solid #F9F;
     background-color:#FCF;
     float:right;}
    </style>
    </head>

    <body>
    <div id="header"></div>
    <div id="content">
      <div id="left"></div>
        <div id="zhong"></div>
          <div id="right"></div>
    </div>
    <div id="footer"></div>
    </body>

    左右动,中间不动

    <style type="text/css">
    #header,#conten,#footer{
     background-color:#CCC;
     border:1px solid #0ca;
     height:30px;
     80%;
     margin:10px auto;}
    #conten{
     height:500px;}

    #right{ 
        100px;
     float:right;
        height:500px;
     border:1px green solid;
     background-color:#66C;
     margin:0;
     }
    #zhong{ 
        float:left;  
     100%;
     margin-left:-210px;
    }
    #varzhong{
     height:500px;

     margin-left:210px;
     
     overflow:hidden;
     }
    #left{
     100px;
      height:500px;
     border:1px green solid;
     background-color:#ac0;
     margin:0;
     float:left;}

    </style>
    </head>

    <body>
    <div id="header"></div>
    <div id="conten">
    <div id="left">独守空及代闺独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费</div>
    <div id="zhong"> <div id="varzhong">闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管</div></div>
    <div id="right"> 独守空及代闺独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规;</div>

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

    中间动,左右不动

    <style type="text/css">
    #header,#content,#footer{
     80%;
     height:30px;
     background-color:#ccc;
     border:1px #9CC solid;
     margin:10px auto;}
    #content{
     height:500px;}
    #left{
     height:500px;
     49%;
     border:1px solid #99F;
     background-color:#CCF;
     margin-left:-220px;
     float:left;
    }
     
    #left1{
     height:500px;
     border:1px solid #99F;
     background-color:#CCF;
     margin-left:110px;
     float:left;
     }
    #zhong{
     height:500px;
     218px;
     border:1px solid #FC3;
     background-color:#6FF;

     float:left;}

    #right{
     height:500px;
     50%;
     border:1px solid #F9F;
     background-color:#FCF;
     margin-right:-105px;
     float:right;
     overflow:hidden;}
    #right1{
     height:500px;
     border:1px solid #F9F;
     background-color:#FCF;
     margin-right:105px;
     float:right;
     overflow:hidden;}
    </style>
    </head>

    <body>
    <div id="header"></div>
    <div id="content">
      <div id="left"><div id="left1">独守空及代闺独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费</div></div>
         <div id="zhong">独守空及代闺独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费</div>
          <div id="right"><div id="right1">独守空及代闺独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费的空间管理的法规及代独守空闺;来分散开个头法律和顾客分开管理离开飞机失控了浪费</div></div>
    </div>
    <div id="footer"></div>
    </body>

  • 相关阅读:
    excel上传和下载
    SublimeText快捷键大全(附GIF演示图)
    JS求多个数组的重复数据
    js各种宽高(3)
    js各种宽高(2)
    js各种宽高(1)
    echarts简单使用案例
    js小技巧
    原生jdbc执行存储过程
    Cron和Spring定时任务
  • 原文地址:https://www.cnblogs.com/weixiao/p/2242252.html
Copyright © 2011-2022 走看看