一个极简单极常用的div+css页面布局

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <title>html的文本格式化</title>
       <style type="text/css">
             body{margin:0px;}
             div#container{width:100%;
                                     height:950px;
                                     background-color:darkgray ;
                                 }
             div#heading{width:100%;
                                   height:10%;
                                    background-color: aqua;
                                }
             div#content_menu{width:30%;
                                             height: 80%;
                                              background-color: aquamarine;
                                              float:left;}
             div#content_body{width:70%;
                                            height:80%;
                                            background-color: green;
                                            float:left;}
             div#footing{width:100%;
                                    height:10%;
                                    background-color: black;
                                    color:white;
                                   clear:both;}  <!--记住浮动一定一定要清除-->
               div#footing:hover{width:100%;
                                              height:10%;
                                              background-color: white;
                                              color:black;
                                              clear:both;}
       </style>
</head>
<body >
  <div id="container">
   <div id="heading">this is heading</div>
   <div id="content_menu">this is content_menu</div>
   <div id="content_body">this is content_body</div>
   <div id="footing">this is footer</div>
  </div>
</body>
</html>


你可能感兴趣的:(一个极简单极常用的div+css页面布局)