div+css布局实例淘宝分析(三) |
|
| 作者：中企在线 时间：2009-6-6 14:08:15 |
|
|
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第一节,淘宝主体内容的安排
还是来看看淘宝网站主体图片,由于内容太多,所以摒弃了很多重复或者不太重要的内容,使看起来更清晰
原图:
通过分割,我们把它分割成几个块,见图
从图片上我们看出,淘宝网页是通过分为左右两栏,通过容器嵌套再在栏里面分栏,达到类似表格的排版效果
1.分析第一层,看一下主体的代码
全部在一个大的主体容器Content里面,定义容器宽度为760px,上下补丁5px,左右自动(默认为0),文字居左排列,清除左右浮动
#Content{
width:760px;
margin:5pxauto;
text-align:left;
clear:both;
}
再看一下两个大的主体容器一个
一个是主体main,另外一个是侧面SideBar
#Main{
float:right;
width:100%;
margin:000-190px;
}
这个Main容器是右边这块,写的时候写在前面,却排列在右边,这同我们的表格是有区别的,需要注意,定义的是右浮动,宽度占满容器,但下面又有一个定义就是距离容器左边190px,说明左边空余190px的空间,整个的意思就是占满除左边190px外的100%空间,为放置左边的SideBar提供了空间
#SideBar{
float:left;
width:180px;
}
宽度为180xp的容器左浮动
但是在主容器Content设置了类的名称,所以L250的定义将起作用(<divid=Contentclass=L250>)
所以起作用的将是下面这段,即左边SideBar宽260px,余下的为右边容器Main
div.L250#Main{
float:right;
width:100%;
margin:000-260px;
}
div.L250#Container{
margin:000260px;
}
div.L250#SideBar{
float:left;
width:250px;
}
2.分析第二层,主体容器里面的容器
2.1.SideBar内的容器
<divid=SideBar>
<divid=Verticalclass=StandardSidePanel2>
<h3><ahref=style=color:#FFF;>导购中心</a></h3>
<divclass=Content>
<ul>
<liclass=Man><ahref=>男 人</a></li>
<liclass=Digital><ahref=>手机数码</a></li>
<liclass=Lady><ahref=>女 人</a></li>
<liclass=Life><ahref=>家 居</a></li>
<liclass=Sports><ahref=>运 动</a></li>
<liclass=Game><ahref=>游 戏</a></li>
<liclass=Culture><ahref=>书籍音像</a></li>
<liclass=Baby><ahref=>母 婴</a></li>
<liclass=Gift><ahref=>礼 物</a></li>
</ul>
<divclass=HackBox></div><!--清除浮动好继续块内排列-->
</div>
</div>
<divclass=HackBox></div>
<!--公告栏-->
<divid=TaobaoBulletinclass=StandardSidePanel2>
<h3><ahref=>公告栏</a></h3>
<divclass=Content>
<divclass=PostCardStyle2>
<divclass=Paragraph>
<ul>
<li><ahref=>马云出席达沃斯世界经济论坛</a></li>
<li><ahref=>淘宝全国热招，2月3日上海场</a></li>
<li><ahref=>电子客票订购平台正式发布</a></li>
<li><ahref=>支付宝获互联网成功企业称号</a></li>
</ul>
| |
