<!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页面布局练习</title> <!--<link rel="stylesheet" href="index1.css" type="text/css" />--> <style type="text/css"> *{margin:0px; padding:0px;} #top,#nav,#mid,#footer{ width:500px; margin:0PX auto;} #top{height:80px; background-color:#F0F;} #nav{height:25px; background-color:#0FF;} #mid{height:300px;} #left{width:98px; height:298px; border:1px solid #FF0; background-color:#00F; float:left;} #right{ height:298px; background-color:#900;} .content{width:98px; height:148px; background-color:#030; border:1px solid #300; float:left;} #content2{background-color:#30F;} #footer{height:80px; background-color:#669;} </style> </head> <body> <div id="top">顶部广告区</div> <div id="nav">导航区</div> <div id="mid"> <div id="left">纵向导航区</div> <div id="right"> <div class="content">内容a</div> <div class="content" id="content2">内容b</div> <div class="content">内容c</div> <div class="content" id="content2">内容d</div> <div class="content" id="content2">内容e</div> <div class="content">内容f</div> <div class="content" id="content2">内容g</div> <div class="content">内容h</div> </div> </div> <div id="footer">底部版权区</div> </body> </html>
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>