您的位置：首页 > Web前端

百度前端技术学院 任务八：响应式网格（栅格化）布局

2016-03-16 12:43 369 查看

响应式网格（栅格化）布局

作者：梁远超

页面展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<div id="Frame">
<div class="col-sm-4 col-md-6" >
<div class="box"></div>
</div>
<div class="col-sm-4 col-md-6">
<div class="box"></div>
</div>
<div class="col-sm-4 col-md-12">
<div class="box"></div>
</div>
<div class="col-sm-3 col-md-3">
<div class="box"></div>
</div>
<div class="col-sm-6 col-md-6">
<div class="box"></div>
</div>
<div class="col-sm-3 col-md-3">
<div class="box"></div>
</div>
<div class="col-sm-1 col-md-2">
<div class="box"></div>
</div>
<div class="col-sm-1 col-md-2">
<div class="box"></div>
</div>
<div class="col-sm-2 col-md-8">
<div class="box"></div>
</div>
<div class="col-sm-2 col-md-3">
<div class="box"></div>
</div>
<div class="col-sm-6 col-md-3">
<div class="box"></div>
</div>
</div>
</body>
</html>


body{
margin: 0px;
width: 100%;
}
#Frame{
padding: 10px;/*使内部方块与浏览器之间的距离为20px*/
}
[class*="col-"]{
box-sizing: border-box;
padding: 10px;/*使内部方块之间的距离为20px*/
float: left;

}
.box{
background-color: #eee;
border: 1px solid #999;
height: 48px;
}

/*width大于768px时*/
@media only screen and (min-width: 769px){
.col-sm-6{
width:50%;
}
.col-sm-4{
width:33.33%;
}

.col-sm-3{
width: 25%;
}
.col-sm-2{
width: 16.66%;
}
.col-sm-1{
width: 8.33%;
}
}

/*width大于768px时*/
@media only screen and (max-width: 768px){
.col-md-12{
width: 100%;
}
.col-md-8{
width: 66.66%;
}
.col-md-6{
width:50%;
}
.col-md-3{
width: 25%;
}
.col-md-2{
width: 16.66%;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航