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

Javascript强制设为首页的网页代码

CSS制作网页实例-用CSS控制li标记样式

大 | 中 | 小

[2007/09/11 21:38 | 分类: Html技术 | by gdgzboy ]

[此文来源于互联网，牛C网只负责收集整理]
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>

评论(0) | 引用(0) | 阅读(161)

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

快速链接

分类

其他

统计

链接

PageRank