div布局
<html>
<head>
<title>div布局 </title>
<meta charset="utf-8">
<style>
.toubu {100%;height:100px;background:aqua;}
.zhuti {80%;height:600px;background:red;float:left;}
.left {20%;height:600px;background:green;float:left}
.dibu {100%;height:200px;background:blue;clear:both}
</style>
</head>
<body style=margin:0px;>
<div class="toubu">头部</div>
<div class="left">左边</div>
<div class="zhuti">主题部分</div>
<div class="dibu">底部</div>
</body>
</html>
解释:
1.div标签属于块级元素,自己会独占一行,要想让多个div从左到右排列,需要用到 "浮动"属性。
2.最后一个div需要清除左浮动效果
clear:both;
属性意思为:不允许有浮动对象
3.设置div头部的时候,头部会离浏览器最上边默认或有8px的间距。我们可以通过外边距标签,将8px的空白缝隙取消。
style=margin:0px;