<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单页面布局</title>
<style type="text/css">
*{/*脱离系统默认样式*/
margin: 0; /*外边距*/
padding: 0;/*内边距*/
}
.top{
width: 1000px;
height: 100px;
background-color: blanchedalmond;
margin: 0 auto;/*居中*/
}
.centre{
width: 1000px;
height:350px;
margin: 10px auto;
}
.left{
width: 200px;
height: 100%;
background-color: darkgray;
float: left;/*设置左浮*/
}
.middle{
width: 580px;
height: 100%;
background-color: cornflowerblue;
margin: 0 10px;
float: left;
}
.right{
width: 200px;
height: 100%;
background-color: darkturquoise;
float: left;
}
.bottom{
width: 1000px;
height: 100px;
background-color: forestgreen;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="centre">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>注：不同显示器效果不同
4081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
