div+css各种常见布局,(及布局技巧).doc

下面列举了各种常见的css+div布局》》》》》 完全按%布局。 完全固定布局。 左侧按%变动，右侧固定布局。 右侧按%变动，左侧固定布局。 两侧按%变动，中间固定布局。 中间按%变动，两侧固定布局 完全按%布局。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title /head!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title /head style type=text/css html,body{ padding:0px; margin:0px; text-align:center; } #top{ margin:10px auto; border:#333 1px solid; width:85%; height:150px;} #main{ margin:10px auto; width:85%; height:auto; border:#F00 1px solid; } #main #left{ border: #FF0 1px solid; margin:1px; float:left; width:40%; height:300px; margin:1px;} #main #right{ float: right; border:#0F0 1px solid; width:58%; height:600px;} #bottom{ margin:10px auto; border:#333 1px solid; width:85%; height:150px;} .clear{ border:0px; clear:both; visibility: hidden; height:0px;} /style body div id=toptop部分/div div id=main div id=left 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变 /div !--右侧变动内容（start）-- div id=right 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 /div !--右侧变动内容end）-- div class= clear/div!--去除浮动！-- /div div id=bottombottom部分/div /body /html 完全固定布局。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title /head style type=text/css html,body{ padding:0px; margin:0px; text-align:center; } #top{ margin:10px auto; border:#333 1px solid; width:760px; height:150px;} #main{ margin:10px auto; width:760px; height:auto; border:#F00 1px solid; } #main #left{ border: #FF0 1px solid; margin:1px; float:left; width:2