返回顶部

收藏

并列与嵌套div结构

更多
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>并列与嵌套div结构</title>
  <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        background:blue;
    }
    #header{
        margin:0 auto;
        height:200px;
        background:red;
    }
    #center{
        margin:0 auto;
        height:500px;
        background:yellow;
    }
    #footer{
        margin:0 auto;
        height:200px;
        background:pink;
    }
    #left #right{

    }
    #left{
        background:green;
        float:left;
        height:500px;
        width:50%;
        margin-left:0px;
    }
    #right{
        background:black;
        float:left;
        height:500px;
        width:50%;
        margin-right:0px;
    }
  </style>
 </head>
 <body>
    <div id="header">头部</div>
    <div id="center">
        <div id="left">左分栏</div>
        <div id="right">右分栏</div>
    </div>
    <div id="footer">底部</div>
 </body>
</html>

标签:html

收藏

0人收藏

支持

0

反对

0

发表评论