现在的位置: 首页 > 综合 > 正文

学习DIV+CSS一个最简单的布局一行三列DIV代码!

2013年03月05日 ⁄ 综合 ⁄ 共 828字 ⁄ 字号 评论关闭

CSS代码如下:

 body{
  text-align:center;
  margin:0px;
  padding:0px;
 
  }
  #father
  {
  position:relative;
  width:750px;
  text-align:center;
  }
   #banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;}
   #b-left{width:159px;margin:0px;padding:0px;float:left;}
   #b-center{margin:0px;float:left;}
   #b-right{
   text-align:left;
   marign:0px;
   padding:0px;
   width:108px;
   background-color:#00ffff;
      height:96px;
   float:right;
}
 HTML代码如下:

  <div id=banner>
    <div id=b-left> <img src="images/51.gif" /> </div>
    <div id=b-center><img  src="images/tupian26.gif" /></div>
    <div id=b-right>
      <ul style="list-style-type:none;">
        <br />
        <li>设为首页</li>
        <li>加入收藏</li>
        <li>联系我们</li>
      </ul>
    </div>
  </div>

 

现在总结一下:

一行三列的布局有以下几种 思想:

第一都做成绝对的布局,设定每一个块和周围的距离

第二就是利用嵌套的方法,把任意两个先当成一个,然后再把他们和第三个一起设!不过我这里好像直接把三个块都是分开设的,好像也没有问题!呵呵!

抱歉!评论已关闭.