div+css布局实例淘宝分析(五) |
|
| 作者：中企在线 时间：2009-6-6 14:08:20 |
|
|
在第四节我们分析了淘宝网页的主体代码的右侧上部分,今天我们来分析淘宝网页的主要内容的右侧下部分,对于刚入门学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代码
<divid=CategoryTitle>
<h3><span>宝贝类目</span></h3>
<divid=CategoryLinkSecondhand><ahref=>集市</a></div>
<divid=CategoryLinkGroup><ahref=>商城</a></div>
<divid=CategoryLinkShop><ahref=>二手</a></div>
<divid=CategoryLinkBU><ahref=>店铺</a></div>
<divid=CategoryLinkOffer><ahref=>发布求购</a></div>
</div>
#CategoryTitle{
position:relative;
}
定义容器不可层叠
#CategoryTitleh3span{
font-size:14px;
}
定义h3内文字大小为14px,其颜色在
其文字颜色在Catagory的类TabPanelStyle1有定义
div.TabPanelStyle1h3{
margin:0;
padding:0;
background:none;
border:none;
border-bottom:3pxsolid#FF9000;
height:19px!important;
height/**/:22px;
background:transparenturl(images/category_tab_title01.gif)lefttopno-repeat;
}
div.TabPanelStyle1h3span{
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:transparenturl(images/category_tab_title02.gif)00no-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:transparenturl(images/hit.gif)0%50%no-repeat;
}
在这里淘宝使用了相对位置定义,(我对此不是很赞成)但这也是一个排列的方法
3.CategoryList(<divid=CategoryListclass=ContentCol2>)
#CategoryList{
padding-top:15px;
}
设置该容器的顶部内补丁为15px
#Col2Left,#Col2Right
#CategoryListdiv.Col2Left,#CategoryListdiv.Col2Right{
margin:0005px;
width:240px;
}
定义两个容器的宽度240px以及左边距5px(240+5)*2<500px
关于class
可以为对象的class属性(特性)指定多于一个值(className)，其方法是指定用空格隔开的一组样式表的类名。例如：<divclass=class1class2>。
(<divid=CategoryListclass=ContentCol2>)
这里CategoryList就拥有两个类Content和Col2,他们中间用一个空格分开
div.Col2{
width:100%;
}
div.Col2div.Col2Left{
width:49.5%;
float:left;
}
div.Col2div.Col2Right{
width:49.5%;
float:right;
}
定义CategoryList总的宽度为100%,左边的容器Col2Left宽度为49.5%,左浮动,右边的容器Col2Right宽度为49.5%,右浮动
定义<h3class=TvButton01>
#CategoryListh3{
height:20px;
margin:0;
padding-left:13px;
| |
