还是来看看分拆图片效果
今天我们要分析的是右下这一块(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;
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;
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;
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{
100%;
}
div.Col2 div.Col2Left{
49.5%;
float:left;
}
div.Col2 div.Col2Right{
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的边框来定义