本文通过一个类似一淘网etao.com的实例，展示了如何使用HTML5和CSS实现响应式布局。页面包含头部、中部（分为左、中、右三部分）和底部，随着屏幕宽度变化，右部分会依次隐藏或调整位置，以适应不同设备。通过CSS的媒体查询@media，实现了在不同屏幕尺寸下，元素宽度、高度和显示方式的动态调整。
一个简单的实例(类似一淘网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
最低0.47元/天 解锁文章
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
