DIV+CSS经典布局

发布时间:2014-10-25 2:20:37
来源:分享查询网

    <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV+CSS经典布局(经测试支持IE6/IE7/IE8/Opera/Safari/Netscape/火狐/谷歌等主流浏览器)</title></head><style type="text/css">body,div /*css 复位*/ { padding:0;margin:0;}#content {width:960px;margin:10px auto;background-color:#FFFF00;padding-bottom:2px;} #head{width:900px;margin:10px auto;background-color:#808000;padding-bottom:2px;} #head_menu{width:860px;margin:10px auto;background-color:#804000;height:30px} #head_statusbar{width:860px;margin:10px auto;background-color:#800000;height:30px} #body {width:900px;margin:10px auto;background-color:#FF0080;border:1px solid black;} #sidemenu{width:200px;margin:10px 9px 10px 10px;background-color:#80FFFF;float:left;display:inline;/*解决 IE6因浮动后采用margin出现双倍距离的BUG*/} #right_main{width:670px;margin:10px 0;background-color:#008080;float:left;} #foot{width:900px;margin:10px auto;background-color:#0080FF;height:50px;}p{line-height:80px;} .clear{clear:both;}</style><div id="content">   container   <div id="head">    header    <div id="head_menu">     menu    </div>    <div id="head_statusbar">     menu    </div>   </div>     <div id="body">    <div id="sidemenu">     sidemenu     <p>      skijsdfsfssdfsdfsd<br />      sfsfsfs<br />      skijsdfsfssdfsdfsd<br />      skijsdfsfssdfsdfsd     </p>    </div>    <div id="right_main">     content     <p>      skijsdfsfssdfsdfsd<br />      sfsfsfs<br />      skijsdfsfssdfsdfsd<br />      skijsdfsfssdfsdfsd     </p>    </div>    <div class="clear"></div>   </div>     <div id="foot">footer</div></div><body></body></html>

返回顶部
查看电脑版