• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

半度微笑

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

动态网页简版

左中右都动

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

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

 margin-left:210px;
 
 overflow:hidden;
 }
#left{
 width: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{
 width:80%;
 height:30px;
 background-color:#ccc;
 border:1px #9CC solid;
 margin:10px auto;}
#content{
 height:500px;}
#left{
 height:500px;
 width: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;
 width:218px;
 border:1px solid #FC3;
 background-color:#6FF;

 float:left;}

#right{
 height:500px;
 width: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>

 

posted on 2011-11-09 11:23  半度微笑  阅读(177)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3