关于布局的思考总结

实现一列布局

HTML:


CSS: .top{ height:100px; background:#7FF; } .main{ width: 800px; height: 300px; background:#2dd; margin: 0 auto; } .footer{ width: 800px; height: 100px; background: #900; margin: 0 auto; }

效果图:

关于布局的思考总结_第1张图片
oneColumn.png

实现两列自适应布局

HTML:


CSS: .left{ width: 20%; height: 500px; float: left; background: #3aa; } .right{ width: 80%; height: 500px; float: right; background: #900; }

效果图:


关于布局的思考总结_第2张图片
twoColumnAdaptive.png

固定宽度两列布局

HTML:
 

CSS: .main{ width: 800px; margin: 0 auto; } .left{ width:220px; height: 500px; float: left; background: #3aa; } .right{ width:580px; height: 500px; float: right; background: #900; }

效果图:

columnTwoFixed01.png

三列自适应布局

HTML:


CSS: .left{ width: 33.33%; height:500px; float: left; background:#7FF; } .middle{ width: 33.33%; height:500px; float: left; background:#2dd; } .right{ width: 33.33%; height:500px; float: right; background: #900; }

效果图:

threeColumn.png

三列布局之左右固定中间自适应

HTML:


200px
左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;
300px
CSS: .left{ width: 200px; height:500px; background:#7FF; position: absolute; left: 0; top:0; } .middle{ height:500px; background:#ddd; margin: 0 300px 0 200px; } .right{ width:300px; height:500px; background: #9dd; position: absolute; right: 0; top: 0; }

效果图:

关于布局的思考总结_第3张图片
threeColumnFixed01.png

混合布局(一)

HTML:


CSS: .top{ height:100px; background:#7FF; } .main{ width: 800px; height: 400px; background:#2dd; margin: 0 auto; } .left{ width: 200px; height: 400px; background: blue; float: left; } .right{ width: 600px; height: 400px; background: yellow; float: right; } .footer{ width: 800px; height: 100px; background: #900; margin: 0 auto; }

效果图:

关于布局的思考总结_第4张图片
Hybrid01.png

混合布局02

HTML:


CSS: .top{ height:100px; background:#7FF; } .main{ width: 800px; height: 400px; background:#2dd; margin: 0 auto; } .left{ width: 200px; height: 400px; background: blue; float: left; } .right{ width: 600px; height: 400px; background: yellow; float: right; } .sub_l{ width: 400px; height: 400px; background: green; float: left; } .sub_r{ width: 200px; height: 400px; background: purple; float: right; } .footer{ width: 800px; height: 100px; background: #900; margin: 0 auto; }

效果图:

关于布局的思考总结_第5张图片
Hybrid02.png

混合布局03

HTML:


CSS: .top { height: 100px; background: #7FF; } .head { height: 100px; width: 800px; background: pink; margin: 0 auto; } .main { width: 800px; height: 400px; background: #2dd; margin: 0 auto; } .left { width: 200px; height: 400px; background: blue; float: left; } .right { width: 600px; height: 400px; background: yellow; float: right; } .sub_l { width: 400px; height: 400px; background: green; float: left; } .sub_r { width: 200px; height: 400px; background: purple; float: right; } .footer { width: 800px; height: 100px; background: #900; margin: 0 auto; }

效果图:

关于布局的思考总结_第6张图片
Hybrid03.png

需要源码的小伙伴可在我的github上查看或下载

你可能感兴趣的:(关于布局的思考总结)