css div layout,CSS Layout - 如何基于div的列布局

#header {

height: 120px;

background-color: #cccccc;

padding: 10px;

}

#navigation {

height: 40px;

line-height: 40px;

background-color: #efefef;

padding: 10px;

}

.column1of3, .column2of3, .column3of3 {

float: left;

width: 280px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of3, .column2of3, .columns1and2of3 {

margin-right: 20px;

}

.columns1and2of3, .columns2and3of3 {

float: left;

width: 600px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of4, .column2of4, .column3of4, .column4of4 {

float: left;

width: 200px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of4, .column2of4, .column3of4 {

margin-right: 20px;

}

.columns2and3and4of4 {

float: left;

width: 680px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of6, .column2of6, .column3of6, .column4of6, .column5of6,

.column6of6 {

float: left;

width: 120px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of6, .column2of6, .column3of6, .column4of6, .column5of6 {

margin-right: 20px;

}

.column1of3, .column1of4, .column1of6 {

clear: both;

}

#footer {

height: 40px;

clear: both;

border-top: 20px solid #ffffff;

padding: 10px;

background-color: #cccccc;

}

#page {

padding: 0px 10px 10px 10px;

width: 940px;

background-color: #ffffff;

}

#frame {

margin-left: auto;

margin-right: auto;

width: 960px;

background-color: #ffffff;

}

body {

background-color: #efefef;

margin: 0px;

}

column 1 of 3
column 2 of 3
column 3 of 3
column 1 of 3
columns 2 and 3 of 3
columns 1 and 2 of 3
column 3 of 3
column 1 of 4
column 2 of 4
column 3 of 4
column 4 of 4
column 1 of 4
columns 2 and 3 and 4 of 4
column 1 of 6
column 2 of 6
column 3 of 6
column 4 of 6
column 5 of 6
column 6 of 6
column 1 of 3
column 2 of 3
column 5 of 6
column 6 of 6
columns 1 and 2 of 3
column 5 of 6
column 6 of 6
  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值