float/position.layout网页布局
float/position.layout网页布局
index.html和index.css如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>posfloat</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<!--页头 -->
<header>
<div class="logo">logo</div>
<nav>nav</nav>
</header>
<!-- 页面主体 -->
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
<!-- 页脚 -->
<footer>footer</footer>
</div>
</body>
</html>
/*reset*/
html,body,.container{
height: 100%;
width: 100%;
padding: 0;
margin:0;
text-decoration: none;
}
header,nav,section,footer,div{
box-sizing: border-box;
}
header,section,footer{float:left;}
header{border:10px dashed #f00;height: 75px;width:100%;}
header .logo{float:left;height: 100%;width: 20%;background-color: #f00;}
header nav{float:left;width:80%;height: 100%;background-color: #f00;}
section{padding-top: 75px;padding-bottom: 50px;margin-top:-75px;height: 100%;border:10px dashed #00f;width:100%;}
footer{border:10px dashed #0f0;width: 100%;height:50px;margin-top:-50px;}
