您的位置：首页 > Web前端 > CSS

Web_CSS经典浮动布局

2013-07-22 14:45 323 查看
 


=>代码
<!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">

  #out{

   width: 90%;

   min-width: 764px;

   margin: auto; /*使out居中*/

  }

 

  #header{

   height: 120px;

   background-color:#669966;

  }

  

  #left_menu{

   float: left;

   height: 380px;

   width: 20%;

   background-color:#CCCCCC;

  }

  

  #right_main{

   float: right;

   height: 380px;

   width: 80%;

   background-color:#CCCCFF;

  }

  

  #footer{

   height: 80px;

   clear: all; /*清除左右两边浮动*/

   background-color:#666666;

  }

 </style>

</head>
<body>

 <div id="out">

     <div id="header">

         头部

        </div>

        <div id="left_menu">

         左边菜单

        </div>

        <div id="right_main">

         主体内容

        </div>

        <div id="footer">

         尾部

        </div>

    </div>

</body>

</html>

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航