39,084
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html>
<head>
<title>纯布局练习</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="buju2.css">
</head>
<body>
<div id="all">
<div class="row">
<header>头部</header>
<div id="chongshu1"></div>
</div>
<div class="row">
<div id="side">左边</div>
<div id="main">主体</div>
</div>
<div class="row">
<footer>底部</footer>
<div id="chongshu2"></div>
</div>
</div>
</body>
</html>
body{
margin:0px;
}
#all{
width:100%;
height:1000px;
display:table;
}
.row{
display:table-row;
}
header,#chongshu1{
display:table-cell;
background-color:pink;
width:50%;
height:10%;
}
#side{
display:table-cell;
width:30%;
height:80%;
background-color:green;
}
#main{
display:table-cell;
width:70%;
height:80%;
background-color:grey;
}
footer,#chongshu2{
display:table-cell;
width:50%;
height:10%;
background-color:yellow;
}