<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0px auto;
}
#all{
text-align: center;
}
div.logo {
100%;
height:60px;
background-color: yellow;
}
div.copyright {
100%;
height:60px;
background-color: goldenrod;
}
div.middle {
100%;
height: 500px;
}
div.menu {
15%;
height: 500px;
background-color: #E4393C;
/*菜单左浮动*/
float:left;
}
div.main {
85%;
height: 500px;
background-color: #bad0ef;
/*主题右浮动*/
float:right;
/*左浮动、右浮动都可以*/
float:left;
}
</style>
</head>
<body>
<div id="all">
<div class="logo">
logo
</div>
<div class="middle">
<div class="menu">
menu
</div>
<div class="main">
网站的主体内容
</div>
</div>
<div class="copyright">
bottom
</div>
</div>
</body>
</html>
![](https://img2018.cnblogs.com/blog/1220447/201907/1220447-20190704190917266-1166857477.png)