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


在第三节第二小节我们分析了淘宝网页的主体代码的右侧上部分,今天我们来分析淘宝网页的主要内容的右侧下部分,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第三节,淘宝主体内容右侧下部分分析
在第三节第二小节我们分析了淘宝网页的主体代码的右侧上部分,今天我们来分析淘宝网页的主要内容的右侧下部分,对于刚入门学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的边框来定义