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

• 在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学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).大部分的图片使用背景形势呈现出来,这样的好处是修改样式时方便,而且对于浏览器或者其他浏览工具而言,这些不是重要的,只是相对于浏览者呈现出来的效果
  
• 上一主题: QQ可以上,不能打开网页 下一主题: div+css布局实例淘宝分析(三)(2)
• 查找相关文章:div+css布局实例 css div+css布局入门 div+css布局教程 div+css示例