div+css布局实例

最新推荐文章于 2024-07-25 11:52:08 发布

xwkp2008

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： div css float xhtml html 图形

本文链接：https://blog.csdn.net/xwkp2008/article/details/986525

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
   <head>
       <meta http-equiv="content-type" content="text/html;charset=gb2312" />
       <base href="<%=basePath%>" />
       <title>调查问卷图形分析</title>
       <style>
           body{
               text-align: center;
           }
           #container{margin: 0px outo;
               background: #ffffff no-repeat;
               padding:10px 10px 10px 10px;
               boarder-right: #cccccc 1px solid;
               boarder-left: #cccccc 1px solid;
               boarder-buttom: #cccccc 1px solid;
               boarder-top: #cccccc 1px solid;
               width: 85%;
               height: 100%;
               text-align:center;
           }
           #headcon{margin:0px outo;
               background: #cccccc;
               padding: 10px 10px 10px 10px;
               text-align:left;
           }
           #bodycon{margin:0px outo;
               height:100px;
               background: #909090;
           }
           #bodyleft{
               float: left;
               width: 20%;
               background: navy;
               color: blue;
           }
           #bodycenter{
               float: left;
               width: 60%;
               background: lime;
               color: green;
           }
           #bodyright{
               float: left;
               width: 20%;
               background: aqua;
               color: black;
           }
           #footcon{margin:0px outo;
               background: #cccccc;
               text-shadow: #000000;
               color: #080;
               height: 40%;
           }
         </style>
   </head>

   <body>
       <div id="container">
           <div id="headcon">
               head
           </div>
           <div id="bodycon">
               body
               <div id="bodyleft">
                   bodylef
               </div>
               <div id="bodycenter">
                   bodycenter
               </div>
               <div id="bodyright">
                   bodyright
               </div>
           </div>
           <div id="footcon">
               foot
           </div>
       </div>
   </body>
</html>

布局css模型