内容区域
内容区域一般有三种形式:
1 列:一般用于移动端
2 列:一般用于平板设备
3 列:一般用于 PC 桌面设备
我们将创建一个 3 列布局,在小的屏幕上将会变成 1 列布局(响应式):
CSS3 实例
/* 创建三个相等的列 */
.column {
float: left;
width: 33.33%;
}
/* 列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
Tag:
网页
内容