首页 > > 网页制作 > css >

CSS实战：利用CSS相对定位进行多行多列布局

2008-02-23 08:46:19来源：互联网阅读 ()

CSS制作网页的实例，利用CSS相对定位进行多行多列布局。

<!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>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="head"></div> <div class="nav">nav</div>  <div id="main_box">  <div class="row"> <div class="left"> <p>.left{<br /> float:left;<br /> width:150px;<br /> background:#A6A6A6;<br /> }</p> </div> <div class="middle"> <p>.middle{<br /> width:470px;<br /> background:#6699CC;<br /> float:left;<br /> }</p> </div> <div class="right"> <p>.right{ <br /> float:right;<br /> width:150px;<br /> background:#999;<br /> } </p> </div> </div>  <div class="nav">nav</div>  <div class="row"> <div class="left2"> <p>四列的第一列</p> <p> </p> </div> <div class="left"> <p>四列的第二列</p> <p> </p> </div> <div class="left2"> <p>四列的第三列</p> <p> </p> </div> <div class="right"> <p>四列的第四列</p> <p> </p> </div> </div>  <div class="nav">nav</div>  <div class="row"> <div class="left3"> <p>这是五列的第一列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第二列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第三列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第四列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第五列</p> <p> </p> <p> </p> </div> </div> </div>  <div id="foot"> #foot{<br /> margin-right:auto;<br /> margin-left:auto;<br /> width:770px; <br /> background:#A66300;<br /> clear:both;<br /> } </div>  </body> </html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有