<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局测试</title>
<link rel="stylesheet" type="text/css" href="layout2.css">
<script src="layout2.js"></script>
</head>
<body>
<div>
<div id="top">这是头部</div>
<div id="middle">
<div id="left">这是身体左边</div>
<div id="right">这是身体右边</div>
<div class="clear"></div>
</div>
<div id="bottom">这是底部</div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
html{
background-color:pink;
background-image:url('layout2.jpg');
}
body{
border:20px solid brown;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-bottom:10px;
background-color:gold;
}
#top{
height:50px;
background-color:gray;
}
#middle{
height:300px;
background-color:black;
}
#left{
float:left;
30%;
height:100%;
background-color:red;
}
#right{
float:right;
69%;
height:100%;
background-color:green;
}
#bottom{
height:50px;
background-color:yellow;
border:10px solid blue;
}
.clear{
clear:both;
}