您的位置：首页 > 其它

学习手机页面制作5

2015-02-11 00:03 127 查看

使用padding-bottom 实现高度自适应

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>height auto</title>
<!-- 加入meta viewport -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
padding:0;
margin:0;
}
#box{
height:45px;
width:100%;
background: #f30;
display:-webkit-box;
position:relative;
}
#logo{
width:100px;
background: #f00;
height:45px;
display:block;

}
#nav{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
}
#btn{
width:50px;
background: blue;
}
.list{
width:100%;

}
.list ul{
display:-webkit-box;
list-style-type: none;
}
.list li{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
background: #eee;
width:30%;
margin-right:3%;
/*设置高度为0 padding-bottom:30% 参考的也是父亲的高度*/
height:0;
/*width/height*区域的图片高度*/
padding-top:30%;
}
</style>
</head>
<body>
<!-- h1里面写文字 用text-indent 利用seo -->
<div id="box">
<dix id="logo">logo</dix>
<div id="nav"></div>
<div id="btn"></div>
</div>
<div class="list">
<ul>
<li><img src="" alt=""></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航