div+css布局实例淘宝分析(三)(3)

• 在第三节第二小节我们分析了淘宝网页的主体代码的右侧上部分,今天我们来分析淘宝网页的主要内容的右侧下部分,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第三节,淘宝主体 内容右侧下部分分析
  
  还是来看看分拆图片效果
  
  
  今天我们要分析的是右下这一块(Category宝贝类目这块)这块是淘宝代码最复杂的,但分拆后也是挺清晰的了
  其下又分成2个容器CategoryTitle,CategoryList
  CategoryList再细分为两个容器Col2Left,Col2Right
  然后再下面的就是块ul和列表li的定义和显示了
  
  1.先来看看大容器Category
  #Category{
      clear:both;
      border-top-width:3px;
  }
  定义了容器#Category顶部边框宽为3px,清除左右浮动
  
  2.CategoryTitle
  HTML代码
        <div id="CategoryTitle">
          <h3><span>宝贝类目</span></h3>
          <div id="CategoryLinkSecondhand"><a href="">集市</a></div>
          <div id="CategoryLinkGroup"><a href="">商城</a></div>
          <div id="CategoryLinkShop"><a href="">二手</a></div>
          <div id="CategoryLinkBU"><a href="">店铺</a></div>
          <div id="CategoryLinkOffer"><a href="">发布求购</a></div>
        </div>
  #CategoryTitle{
      position:relative;
  }
  定义容器不可层叠
  
  #CategoryTitle h3 span{
      font-size:14px;
  }
  定义h3内文字大小为14px,其颜色在
  其文字颜色在Catagory的类TabPanelStyle1有定义
  div.TabPanelStyle1 h3{
      margin:0;
      padding:0;
      background:none;
      border:none;
      border-bottom:3px solid #FF9000;
      height:19px !important;
      height /**/:22px;
      background:transparent url(images/category_tab_title01.gif) left top no-repeat;
  }
  
  div.TabPanelStyle1 h3 span{
      display:block;
      top:0;
      left:0;
      width:100px;
      margin-top:3px;
      text-align:center;
      font-weight:bold;
      font-size:13px;
      color:#FFF;
  }
  
  然后每一个标题是通过id来控制的
  #CategoryLinkShop,#CategoryLinkBU,#CategoryLinkSecondhand,#CategoryLinkGroup{
      position:absolute;
      top:0;
      left:259px;
      width:75px;
      height:19px;
      background:transparent url(images/category_tab_title02.gif) 0 0 no-repeat;
      text-align:center;   
  }
  #CategoryLinkBU{
      left:337px;
  }
  #CategoryLinkSecondhand{
      left:103px;
  }
  #CategoryLinkGroup{
      left:181px;
  }
  #CategoryLinkOffer{
      position:absolute;
      top:0;
      left:420px;
      padding-left:20px;
      height:19px;
      line-height:19px;
      font-weight:bold;
      background:transparent url(images/hit.gif) 0% 50% no-repeat;
  }
  在这里淘宝使用了相对位置定义,(我对此不是很赞成)但这也是一个排列的方法
  
  3.CategoryList(<div id="CategoryList" class="Content Col2">)
  #CategoryList{
      padding-top:15px;
  }
  设置该容器的顶部内补丁为15px
  
  #Col2Left,#Col2Right
  #CategoryList div.Col2Left,#CategoryList div.Col2Right{
      margin:0 0 0 5px;
      width:240px;
  }
  定义两个容器的宽度240px以及左边距5px (240+5)*2<500px
  
  关于class
  可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class="class1 class2">。
  (<div id="CategoryList" class="Content Col2">)
  这里CategoryList就拥有两个类 Content和Col2,他们中间用一个空格分开
  
  div.Col2{
      width:100%;
  }
  div.Col2 div.Col2Left{
      width:49.5%;
      float:left;
  }
  div.Col2 div.Col2Right{
      width:49.5%;
      float:right;
  }
  定义CategoryList总的宽度为100%,左边的容器Col2Left宽度为49.5%,左浮动,右边的容器Col2Right宽度为49.5%,右浮动
  
  定义<h3 class="TvButton01">
  #CategoryList h3{
      height:20px;
      margin:0;
      padding-left:13px;
      border:0;
      background:transparent url(images/icon_arrow_r.gif) left top no-repeat;
      font-size:14px;
  }
  定义h3高度为20px,外补丁为0,左内补丁为13px(空余用来显示背景图),背景图左上对齐不重复,文字大小为14px
  #Category h3 a{
      color:#0044DD;
  }
  定义h3内链接文字颜色为#0044DD
  
  块的定义,左外补丁为10px
  #Category ul.CategoryListInlineSepLevel1{
      margin:0 0 0 10px;
  }
  
  #Category ul.CategoryListInlineSepLevel1 li{
      display:inline;
      /*prevent inheriting*/
      font-weight:normal;
      font-size:15px;
  }
  #Category ul.CategoryListInlineSepLevel1 li/**/{
  /*Overload for None-IE5 browsers*/
      display:block;
      float:left;   
      margin:0 0px 5px 0 !important;
      margin:0 0px 3px 0;
      margin /**/ :0 0px 2px 0;
      padding:0 5px 0;
      border-right:1px solid #CCC;
      white-space:nowrap;
      word-break:keep-all;
      font-size:12px
  }
  块状显示,左浮动上外补丁为5px,左右内补丁为5px,右边框为象素1px颜色#CCC的实线,文字不允许断开,字体大小为12px
  
  .CategoryListInlineSepLevel1 li a:link,.CategoryListInlineSepLevel1 li a:visited{
      color:#5D89DF;
  }
  .CategoryListInlineSepLevel1 li a:hover,.CategoryListInlineSepLevel1 li a:active{
      color:#FF5500;
  }
  
  块完成时再<div class="HackBox"></div>清除浮动
  下面以及右边的排版也跟这个类似,就不再分析了
  
  小节:
  
  1.一些看起来复杂的块,也是一些简单的块组合起来的
  
  2.熟悉那些容器需要嵌套,那些不用
  
  3.一个容器可以拥有多个属性
  
  4.左边的分割线可以用li的边框来定义
• 上一主题: div+css布局实例淘宝分析(三)(2) 下一主题: css2.0中文手册以及淘宝分析源码
• 查找相关文章:div+css布局实例 css div+css布局入门 div+css布局教程 div+css示例