html+经典布局案例,HTML + CSS 经典布局(示例代码)

/*@base-width 容器宽度 可以为 px 或 百分比*/@base-width: 100%;/** @fix-width-l 左侧固定宽度 可以为 px 或 百分比

* @fix-width-r 右侧固定宽度 可以为 px 或 百分比*/@fix-width-l: 300px;

@fix-width-r: 300px;

@bg-color1: blue;

@bg-color2: red;

@bg-color3: green;

.i-box{width:@base-width;margin:10px auto;

}// 左侧定宽, 右侧自适应

.layt1(@f-width,@color1,@color2){> .i-left {

float:left;width:@f-width;background-color:@color1;

}> .i-right{overflow:auto;background-color:@color2;

}}

// 右侧定宽, 左侧自适应

.layt2(@f-width,@color1,@color2){> .i-right {

float:right;width:@f-width;background-color:@color1;

}> .i-left{overflow:auto;background-color:@color2;

}}

// 右侧定宽, 左侧定宽

.layt3(@f-width-l,@f-width-r,@color1,@color2){> .i-left {

float:left;width:@f-width-l;background-color:@color1;

}> .i-right{float:right;width:@f-width-r;background-color:@color2;

}}

// 左右定宽中间自适应

.layt-thr-1(@fix-width-l,@fix-width-r,@color1,@color2,@color3){.i-left{

float:left;width:@fix-width-l;background-color:@color1;

}.i-mid{margin-left:@fix-width-r + 10px;margin-right:@fix-width-l + 10px;background-color:@color2;overflow:auto;

}.i-right{float:right;width:@fix-width-r;background-color:@color3;

}}

.layt-thr-2(@fix-width1,@fix-width2,@color1,@color2,@color3){.i-left{

float:left;width:@fix-width1;background-color:@color1;

}.i-mid{float:left;width:@fix-width2;background-color:@color2;

}.i-right{margin-left:@fix-width1 + @fix-width2;background-color:@color3;

}}

.layt-thr-3(@fix-width1,@fix-width2,@color1,@color2,@color3){.i-left{

margin-right:@fix-width1 + @fix-width2;background-color:@color3;

}.i-mid{float:right;width:@fix-width2;background-color:@color2;

}.i-right{float:right;width:@fix-width1;background-color:@color1;

}}

.layout-l{color:white;line-height:30px;.layt1(@fix-width-l,@bg-color1,@bg-color2);}.layout-r{color:white;line-height:30px;.layt2(@fix-width-r,@bg-color1,@bg-color2);}.layout-both{color:white;line-height:30px;.layt3(500px,700px,@bg-color1,@bg-color2);}.layout-three{color:white;line-height:30px;.layt-thr-1(@fix-width-l,@fix-width-r,@bg-color1,@bg-color2,@bg-color3);}.layout-three-ll{color:white;line-height:30px;.layt-thr-2(200px,200px,@bg-color1,@bg-color2,@bg-color3);}.layout-three-rr{color:white;line-height:30px;.layt-thr-3(200px,200px,@bg-color1,@bg-color2,@bg-color3);}