在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第一节,淘宝主体 内容的安排

还是来看看淘宝网站主体图片,由于内容太多,所以摒弃了很多重复或者不太重要的内容,使看起来更清晰
原图:

通过分割,我们把它分割成几个块,见图

从图片上我们看出,淘宝网页是通过分为左右两栏,通过容器嵌套再在栏里面分栏,达到类似表格的排版效果

1.分析第一层,看一下主体的代码
全部在一个大的主体容器Content里面,定义容器宽度为760px,上下补丁5px,左右自动(默认为0),文字居左排列,清除左右浮动
#Content{
    width:760px;
    margin:5px auto;
    text-align:left;
    clear:both;
}

再看一下两个大的主体容器一个
一个是主体main,另外一个是侧面SideBar
#Main{
    float:right;
    width:100%;
    margin:0 0 0 -190px;
}
这个Main容器是右边这块,写的时候写在前面,却排列在右边,这同我们的表格是有区别的,需要注意,定义的是右浮动,宽度占满容器,但下面又有一个定义就是距离容器左边190px,说明左边空余190px的空间,整个的意思就是占满除左边190px外的100%空间,为放置左边的SideBar提供了空间
#SideBar{
    float:left;
    width:180px;
}
宽度为180xp 的容器左浮动

但是在主容器Content设置了类的名称,所以L250的定义将起作用(<div id="Content" class="L250">)
所以起作用的将是下面这段,即左边SideBar宽260px,余下的为右边容器Main
div.L250 #Main{
    float:right;
    width:100%;
    margin:0 0 0 -260px;
}
div.L250 #Container{
    margin:0 0 0 260px;
}
div.L250 #SideBar{
    float:left;
    width:250px;
}

2.分析第二层,主体容器里面的容器
2.1.SideBar内的容器
<div id="SideBar">
  <div id="Vertical" class="StandardSidePanel2">
    <h3><a href="" style="color:#FFF;">导购中心</a></h3>
    <div class="Content">
      <ul>
        <li class="Man"><a href="">男  人</a></li>
        <li class="Digital"><a href="">手机数码</a></li>
        <li class="Lady"><a href="">女  人</a></li>
        <li class="Life"><a href="">家  居</a></li>
        <li class="Sports"><a href="">运  动</a></li>
        <li class="Game"><a href="">游  戏</a></li>
        <li class="Culture"><a href="">书籍音像</a></li>
        <li class="Baby"><a href="">母  婴</a></li>
        <li class="Gift"><a href="">礼  物</a></li>
      </ul>
      <div class="HackBox"></div> <!-- 清除浮动好继续块内排列 -->
    </div>
  </div>
  <div class="HackBox"></div>
  <!-- 公告栏 -->
  <div id="TaobaoBulletin" class="StandardSidePanel2">
    <h3><a href="">公告栏</a></h3>
    <div class="Content">
      <div class="PostCardStyle2">
        <div class="Paragraph">
          <ul>
            <li><a href="">马云出席达沃斯世界经济论坛</a></li>
            <li><a href="">淘宝全国热招，2月3日上海场</a></li>
            <li><a href="">电子客票订购平台正式发布</a></li>
            <li><a href="">支付宝获互联网成功企业称号</a></li>
          </ul>
        </div>
      </div>
    </div>
      </div><!-- 结束公告栏 -->
       
</div><!-- 结束Sidebar -->

这个容器SideBar里有两个主体容器Vertical(导购中心)TaobaoBulletin()淘宝公告栏(多于的被我删除了,^_^)由于两个容器并不需要并列,所以在排列完一个容器后直接用类 .HackBox清除就可以了

来看看Vertical的第一个元素h3
#Vertical h3{
    margin:0;
    padding:0 0 0 30px;
    height:22px;
    line-height:25px;
    overflow:hidden;
    color:#FFF;
    background:transparent url(images/home_title_bg_070118.gif) 0px 0px no-repeat;
    border-bottom:none;
}
这里一个奇怪的问题是定义了一个height,又定义了一个line-height,height是表示h3样式的高度,而line-height则表示行的高度

第二个愿书.Content,它给容器定义了高度为117px,背景色为#FB9300,超出的部分将隐藏(不显示出来)
#Vertical .Content{
    border-top:none;
    height:117px;
    background:#FB9300;
    overflow:hidden;
}

ul设置了外补丁,内补丁为0后又设置顶部补丁为2px,列表显示的样式为"无"
#Vertical .Content ul{
    margin:0;
    padding:0;
    margin-top:2px!important;
    margin-top:3px;
    list-style-type:none;
}

设置ul内的li
#Vertical .Content ul li{
    float:left;
    height:30px;
    width:77px;
    margin-left:4px!important;
    margin-left:3px;
    margin-top:6px!important; 
    background:url(images/home_070117_bg.gif) no-repeat;
    overflow:hidden;
}
从效果图上我们看到,列表是呈三列多行排列的,那么它是如何实现的呢?
这里使用的是左外补丁为4px,上外补丁为6px,这样这些列表之间就有了空隙,然后我们来计算一下 宽度77px+左外补丁4px=81*3=243px<250px,但余下的空间又不够77px,故从左排列三个列以后自动换行,而高度(30+ 6)*3=108<117,如果不觉得麻烦可以为每个列定义背景图片(通过class),然后在结束的时候使用.HackBox清除浮动,其实我以 为此处无需清除,因为不再够宽度,会自动换行,清除也好,呵呵

再看他们的链接样式
#Vertical .Content ul li a:link,#Vertical .Content ul li a:visited{
    color:#333;
    text-decoration:none;
}
#Vertical .Content ul li a:hover,#Vertical .Content ul li a:active{
    color:#FF5500;
    text-decoration:underline;
}
#Vertical .Content ul li a{
    display:block;
    height:30px;
    widows:77px;
    font-size:12px; 
    padding:9px 0 0 16px;
}

TaobaoBulletin似乎跟上面差不多,没有太多的好说,就不分析了

小结一下:

(1).看似很复杂的排版,其实我们可以通过容器的嵌套来完成,在大的容器里面在套小的容器...

(2).跟表格有些不同的是,可以通过浮动设置从右开始浮动,并代码写在前面可以达到,排列在右边,但是重点需要最新出现的效果

(3).通过定义容器的宽度,高度和列表的宽度,高度达到多行多列显示的效果,而不需要通过程序来控制显示

(4).一个容器可以拥有多种属性,可以是独特的,也可以是共有的

(5).大部分的图片使用背景形势呈现出来,这样的好处是修改样式时方便,而且对于浏览器或者其他浏览工具而言,这些不是重要的,只是相对于浏览者呈现出来的效果