div+css布局实例淘宝分析(四) |
|
| 作者：中企在线 时间：2009-6-6 14:08:18 |
|
|
在第三节第一小节我们分析了淘宝网页的主体代码的左侧部分,今天我们来分析淘宝网页的主要内容的右侧部分,对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第二节,淘宝主体内容右侧分析 还是来看看框架分拆图片
从分拆我们看到,右侧部分被裁成了上下两大块,然后再进行拆分,先分析上部分
1.上部分又分为左(ADList)右(NewbieGuide)两个块
#ADList{
float:left;
width:380px;
height:191px;
}
定义了该容器ADlist的宽度(380px)高度(191px)以及浮动方式(左浮动)
#NewbieGuide{
margin-bottom:10px;
width:108px!important;
width:100px;
float:right;
background-color:#EBEBEB;
border:1px#B2D3FFsolid;
background:#E4EFFEurl(images/home_login_bg.gif)3px3pxno-repeat!important;;
height:189px;
}
定义了容器的宽度width:108px!important;高度height:189px,底部外补丁margin-bottom:10px;,背景色为#E4EFFE,背景图片,浮动方式为右浮动float:right,380+108=498px<(760-260),所以不会发生重叠现象
2.分析ADlist容器,该容器包含两个容器#ADListText,#ADListImg
#ADListText,#ADListImg{
margin-top:6px;
}
定义了顶部外补丁为6px
容器ADlist的上部分容器#ADListText
#ADListul{
margin:0;
padding:0;
list-style-type:none;
}
定义块ul外补丁0,内补丁0,列表样式为无
其中该块ul又在ADlistText内,所以依据最近原则,那么下面的定义是生效的,即左外补丁为10px
#ADListTextul{
margin-left:10px;
}
#ADListTextulli{
float:left;
line-height:16px;
line-height:20px;
padding:0;
margin:0;
width:170px;
display:block;
padding-left:12px;
background:transparenturl(images/top_icon.gif)3px7pxno-repeat;
}
定义了块ul内的列表样式,左浮动float:left;行高line-height:20px;,当有两个重复定义时,最后一个将起作用,内补丁,外补丁为0,但后面又设置了左内补丁padding-left:12px,说明左内补丁是12px,以块状方式显示display:block;背景图片透明,距离列表左边的距离是3px,距离列表上边距为7px,不重复,我们看到列表是以2列多行排列的,(170+12)*2=364<380(ADlist宽度),所以列表在从左浮动排列两列后自动换行
如果愿意,你还可以定义列表的链接样式,可以这样定义
#ADListTexta{
display:block;
}
定义链接以及访问后的颜色
#ADListTexta:link,#ADListTexta:visited{
color:#008200;
text-decoration:none;
}
#ADListTexta:hover,#ADListTexta:active{
color:#002800;
text-decoration:underline;
}
清除这个容器的浮动以后继续排列下面的容器#ADListImg
<divclass=HackBox></div>
其中ul块已经在ADlist定义了,下面定义列表的显示方式
#ADListImgli{
float:left;
width:76px;
text-align:center;
}
定义列表宽度为76px,从左开始浮动,文本居中对齐,我们看到排列了5列7*76=380==380px
然后定义了列表li内的图片参数
#ADListImgliimg{
border:1px#cccsolid;
margin-bottom:5px;
display:block;
}
border:1px#cccsolid;正如我们看到的,图片的边框是1个象素的实线,颜色为灰色#ccc
border:border-width||border-style||border-color
可以定义边框的宽度,样式,颜色
3.现在我们来分析右边的容器(就是注册...那个块)
整个容器NewbieGuide的定义在前面已经说了,我们来分析内部块ul
#NewbieGuideul{
margin:14px8px00!important;
margin:14px4px00;
padding:0;
list-style:none;
text-align:center;
list-style-type:none;
}
该块定义了外补丁(上为14px,右8px,下,左外补丁为0),内补丁为0,链接样式为无,其实我以为list-style-type已经定义为无了list-style定义为无可以不必要了,因为没有定义的时候,本来就是默认的
再来看看列表的样式
#NewbieGuideulli{
display:block;
width:100px;
height:34px;
margin:005px4px!important;
margin:004px4px;
}
块状显示display:block;宽度100pxwidth:100px,高度34px,外补丁下5px左4px
我们看图片以为是图片排列的,可实际上,代码里面是文字,淘宝是如何实现这个效果的呢?
下面是HTML代码
<divid=NewbieGuide>
<ul>
<liid=NGRegister><ahref=><span>免费注册</span></a></li>
<liid=NGOpenShop><ahref=><span>视频聊天</span></a></li>
<liid=NGTrust><ahref=><span>诚信安全</span></a></li>
<liid=NGAlipay><ahref=><span>支付宝——购物无风险</span></a></li> | |
