-
分栏又称为分列 一列布局 两列布局 三列布局 混合布局查看全部
-
头部 内容主题部分 底部查看全部
-
两列布局类别： 1.两列都固定宽度； 2.两列都自适应宽度； 3.一列固定一列自适应。（既可用float也可用绝对定位实现，float实现注意：自适应宽度的这一列无需设置浮动和宽度，且需要设置margin，以为固定宽度的那一栏预留宽度）查看全部
-
当左边标签设定为宽度之后，右边标签设定margin值就可以自适应宽度查看全部
-
自适应宽度：用浮动不可以实现，用定位方法，position absolute查看全部
-
要浮动 底部变为混合查看全部
-
混合布局 加：子div 并且定义查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:absolute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:absolute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
三列特殊左右侧固定，中间自适应宽度。查看全部
-
自适应三列布局查看全部
-
固定宽度两列布局查看全部
-
2列自适应查看全部
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto} .top{height:100px;background-color: blue} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
clear: both;清除浮动 浮动：float:left/right查看全部
举报
0/150
提交
取消