CSS+div经典布局之（三） 

<!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>上机16.1</title>
<style type="text/css">
#top{
    border:1px #F00 solid;
    position:relative;
    width:600px;
    margin:auto;
    text-align:center;
    height:28px;
    }
#center{
    border:1px #F00 solid;
    position:relative;
    width:600px;
    margin:5px auto;
    height:240px;
    }
#main{
    border:1px #F00 solid;
    position:relative;
    width:600px;
    height:250px;
    margin:auto;
    }
#mainleft{
    border:1px #F00 solid;
    position:absolute;
    left:0px;
    bottom:0px;
    width:360px;
    height:200px;
    }
#mainright{
    border:1px #F00 solid;
    position:absolute;
    right:0px;
    bottom:0px;
    width:220px;
    height:150px;
    }
</style>    
</head>

<body>
<div id="top"></div>
<div id="center"></div>
<div id="main">
  <div id="mainleft"></div>
  <div id="mainright"></div>
</div>
</body>
</html>

posted on 2017-10-17 15:21  迪迪菜源  阅读(168)  评论(0)    收藏  举报

导航