动态网页简版

左中右都动

<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>

原文地址:https://www.cnblogs.com/weixiao/p/2242252.html