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

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

2012年12月12日 ⁄ 综合 ⁄ 共 3862字 ⁄ 字号 评论关闭
  • 在第三节第二小节我们分析了淘宝网页的主体代码的右侧上部分,今天我们来分析淘宝网页的主要内容的右侧下部分,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+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的边框来定义

  • 抱歉!评论已关闭.