当前位置：首页 >> 网站建设 >> 正文

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

文章来自:互联网 | 发表时间:2007-9-24 20:46:37

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

Source Code to Run

<!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>

<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 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

相关文章

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

版权隐私 免责声明 友情链接 学院地图 关于设计学院

版权隐私　　免责声明　　友情链接　　学院地图　　关于设计学院