一个简单的手机端页面的布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="box">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
css
@import url("m_reset.css");
.wh(@w,@h){
width:@w;
height:@h;
}
.box{
.wh(100%,100%);
.b(green);
display:-webkit-box;/*定义一个弹性盒*/
-webkit-box-orient:vertical;/*将弹性盒设置为垂直*/}
.header{
.wh(100%,43px);.b(yellow);
}
.main{
-webkit-box-flex:1;/*内容总体分为一份*/
overflow:scroll;/*滚动条*/
.b(blue);
}
.footer{
.wh(100%,43px);.b(red)
}
浙公网安备 33010602011771号