DIV+CSS布局

x放羊的星星

浏览: 36668 次
性别:
来自: 上海

最近访客更多访客>>

jin_config

gxlwl

dbwfncxz

小动力2014

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>DIV+CSS布局多行多列</title>
<style type="text/css">
<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #000000;
}
#head {
	margin-right:auto;
	margin-left:auto;
	width:770px;
	height:80px;
	background:#A66300;
}
.nav {
	clear:both;
	margin-right:auto;
	margin-left:auto;
	width:770px;
	height:25px;
	line-height:25px;
	background:#415800;
}
#main_box {
	/*正文区大容器*/
width:770px;
	margin-right:auto;
	margin-left:auto;
	background:#EFEFEF;
}
.row {
	/*定义每行*/
width:100%;
	clear:both;
}
.left, .right {
	float:left;
	width:150px;
	background:#A6A6A6;
}
.right {
	float:right;
}
.left2 {
	/*用在四列布局上*/
float:left;
	width:235px;
	background:#333;
	color:#FFF;
}
.left3 {
	/*用在五列布局上*/
border-right:1px solid #FFF;
	width:153px;
	background:#888;
	float:left;
}
.middle {
	width:470px;
	background:#6699CC;
	float:left;
}
#foot {
	margin-right:auto;
	margin-left:auto;
	width:770px;
	background:#A66300;
	clear:both;
}
-->
</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>
<!--End-->
</body>
</html>

http://item.taobao.com/item.htm?id=16283195800&

分享到：