一个简单的实例(类似一淘网etao.com),版面包含头部、尾部,中间分为3个部分。随着宽度的缩小,一次隐藏中间right的部分,再缩小把right放在中间部分的下面。
包含2个文件:index.html 和 style.css
index.html:
index.html.png
style.css:
/* 初始化---begin */
*{
margin: 0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;// 上下10px,左右自适应
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,
.right,
.main{
background-color: cornflowerblue;
}
.footing{
height: 100px;
background-color: blue;
}
/* 初始化---end */
/* 自适应---begin */
/*屏幕宽度大于960*/
@media