CSS布局常用的方法3
[color=#000][font=Verdana][size=9.5pt]一列[/size][/font][/color][color=#000][font=Verdana][size=9.5pt]单行一列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]body { margin: 0px; padding: 0px; text-align: center; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]两行一列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]body { margin: 0px; padding: 0px; text-align: center;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]三行一列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]body { margin: 0px; padding: 0px; text-align: center; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]两列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]单行两列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv1 {float: left;width: 280px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv2 {float: right;width: 410px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]两行两列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv1 { float: left; width: 280px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv2 { float: right;width: 410px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]三行两列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#header{ width: 700px;margin-right: auto; margin-left: auto; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv1 { float: left;width: 280px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#bodycenter #dv2 { float: right; width: 410px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]三列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]单行三列[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]绝对定位[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#left { position: absolute; top: 0px; left: 0px; width: 120px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#middle {margin: 20px 190px 20px 190px; }[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#right {position: absolute;top: 0px; right: 0px; width: 120px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]float[font=宋体]定位[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]xhtml:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="warp">[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column">[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column1">[font=宋体]这里是第一列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column2">[font=宋体]这里是第二列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div class="clear"></div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]</div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column3">[font=宋体]这里是第三列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div class="clear"></div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]</div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]CSS:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#wrap{ width:100%; height:auto;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column{ float:left; width:60%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column1{ float:left; width:30%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column2{ float:right; width:30%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column3{ float:right; width:40%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt].clear{ clear:both;} [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]float[font=宋体]定位二[/font][/size][/font][/color]
页:
[1]