Go语言视频零基础入门到精通

javalearner

这一类上部为形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。我们今天来说说用DIV+CSS三列式布局的实现方法。

首先我们构勒一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：





这样的结构与两列式的布局是非常类似的，区别就是多了一列。（好象是废话，别扔臭鸡蛋！）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。看下面的图片：





我们根据上面的图片，整理出各个div的id以及他们的关系：




   Example Source Code
  [www.52css.com]
  

   顶部：header；
  
中部三列的容器：divall；
  
左侧：sider_a；
  
主内容区：main；
  
右侧：sider_b；
  
底部：footer
  

他们的嵌套关系如下图：





我们整理出HTML代码：




   Example Source Code
  [www.52css.com]
  

  <div id="header">header</div>
  
<div id="divall">   
  
     <div id="sider_a">sider_a</div>
  
     <div id="main">main</div>
  
     <div id="sider_b">sider_b</div>
  
</div>
  
<div id="footer">footer</div>
  

我们开始编写CSS进行布局：




   Example Source Code
  [www.52css.com]
  

  * {
  
     margin:0;
  
     padding:0;
  
     font-size:1em;
  
}
  

整体局布声明：消除边距，设置文字大小。
如果不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。




   Example Source Code
  [www.52css.com]
  

  #header {
  
     width:1002px;
  
     height:100px;
  
     margin:0 auto;
  
     background:#06f;
  
}
  
#divall {
  
     width:1002px;
  
     margin:0 auto;
  
     background:#fff;
  
}
  
#footer {
  
     width:1002px;
  
     height:60px;
  
     margin:0 auto;
  
     background:#999;
  
}
  

顶部：宽度高度设置，水平居中对齐，背景色为#06f；
中部三列的容器：宽度设置，水平居中对齐，背景色为白色；
底部：宽度高度设置，水平居中对齐，背景色为#999。




   Example Source Code
  [www.52css.com]
  

  #sider_a {
  
     width:220px;
  
     float:left;
  
     background:#f93;
  
}
  
#main {
  
     width:580px;
  
     float:left;
  
     margin-left:6px;
  
     background:#dceafc;
  
}
  
#sider_b {
  
     width:190px;
  
     float:right;
  
     background:#ccc;
  
}
  

左侧（sider_a）：宽度设置，向左浮动，背景色为#f93；
主内容区（main）：宽度设置，向左浮动，左边距为6px，背景色为#dceafc；
右侧（sider_b）：宽度设置，向右浮动，背景色为#ccc；
为什么主内容区左边距为6px呢？我们是这样计算的：
1002-220-580-190=12px
12/2=6px; 实现中间两条空白分割线相等，均为6px。

写到这里，我们布局应该算是完成了，且慢，让我们看看IE与FF这两个让我们抓狂的东东中，显示效果是不是一样。



在IE环境中，一切正常，没有任何问题了。但在FF中footer和我们玩起了捉迷藏，跑到上面去了。这是由于未清除浮动而引发的后果，l 我们在divall容器的最下面清除一下浮动就可以了。如代码：<br style="clear:both;" />。





  
  
   
   

     
   

     
   
  

复制代码

源码下载：http://file.javaxxz.com/2014/11/2/235522093.zip