|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>css基本布局方法</title> <style type="text/css"> * { font-size:12px; font-family:verdana; margin:0px;/*--定义元素周围的空间*/ padding:0px;/*--定义元素边框与元素内容之间的空白*/ } #body { position:relative; width:85%; margin:3px auto;/*上下,左右,这里的左右就是居中*/ height:100%; } #sidebar /*左边*/ { position:absolute; left:0; top:0; width:200px; } #right { width:240px; position:absolute; right:0; top:0; } #center { margin:0 241px 0 201px;/*上右下左*/ } #header,#footer { width:85%; margin:0 auto;/*由浏览器设置*/ height:50px; } #sidebar,#right,#center,#header,#footer{border:solid 1px #000;} #sidebar,#right,#center{height:780px;} </style> </head> <body> <div id="header">head</div> <div id="body"> <div id="sidebar">left<br />left<br /></div> <div id="center">center</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html> |