div+css布局实例淘宝分析(三)(2)_html/css_WEB-ITnose

在第三节第一小节我们分析了淘宝网页的主体代码的左侧部分,今天我们来分析淘宝网页的主要内容的右侧部分,对于刚入门学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 #B2D3FF solid;
background:#E4EFFE url(images/home_login_bg.gif) 3px 3px no-repeat!important;;
height:189px;
}
定义了容器的宽度width:108px !important;高度height:189px,底部外补丁margin-bottom:10px;,背景色为#E4EFFE,背景图片,浮动方式 为右浮动 float:right, 380+108=498px
2.分析ADlist容器,该容器包含两个容器#ADListText,#ADListImg
#ADListText,#ADListImg{
margin-top:6px;
}
定义了顶部外补丁为6px

容器ADlist的上部分容器#ADListText
#ADList ul{
margin:0;
padding:0;
list-style-type:none;
}
定义块ul外补丁0,内补丁0,列表样式为无
其中该块ul又在ADlistText内,所以依据最近原则,那么下面的定义是生效的,即左外补丁为10px
#ADListText ul {
margin-left:10px;
}

#ADListText ul li{
float:left;
line-height:16px;
line-height:20px;
padding:0;
margin:0;
width:170px;
display:block;
padding-left:12px;
background:transparent url(images/top_icon.gif) 3px 7px no-repeat;
}
定义了块ul内的列表样式,左浮动float:left;行高line-height:20px;,当有两个重复定义时,最后一个将起作用,内补丁,外补 丁为0,但后面又设置了左内补丁padding-left:12px,说明左内补丁是12px,以块状方式显示display:block;背景图片透 明,距离列表左边的距离是3px,距离列表上边距为7px,不重复,我们看到列表是以2列多行排列的, (170+12)*2=364
如果愿意,你还可以定义列表的链接样式,可以这样定义
#ADListText a{
display:block;
}
定义链接以及访问后的颜色
#ADListText a:link,#ADListText a:visited {
color:#008200;
text-decoration:none;
}
#ADListText a:hover,#ADListText a:active {
color:#002800;
text-decoration:underline;
}

清除这个容器的浮动以后继续排列下面的容器#ADListImg

其中ul块已经在ADlist定义了,下面定义列表的显示方式
#ADListImg li{
float:left;
width:76px;
text-align:center;
}
定义列表宽度为76px,从左开始浮动,文本居中对齐,我们看到排列了5列 7*76=380 == 380px
然后定义了列表li内的图片参数
#ADListImg li img{
border:1px #ccc solid;
margin-bottom:5px;
display:block;
}
border:1px #ccc solid;正如我们看到的,图片的边框是1个象素的实线,颜色为灰色#ccc
border : border-width || border-style || border-color
可以定义边框的宽度,样式,颜色

3.现在我们来分析右边的容器(就是注册...那个块)
整个容器NewbieGuide的定义在前面已经说了,我们来分析内部块ul
#NewbieGuide ul{
margin:14px 8px 0 0 !important;
margin:14px 4px 0 0;
padding:0;
list-style:none;
text-align:center;
list-style-type:none;
}
该块定义了外补丁(上为14px,右8px,下,左外补丁为0),内补丁为0,链接样式为无,其实我以为list-style-type已经定义为无了 list-style定义为无可以不必要了,因为没有定义的时候,本来就是默认的

再来看看列表的样式
#NewbieGuide ul li{
display:block;
width:100px;
height:34px;
margin:0 0 5px 4px!important;
margin:0 0 4px 4px;
}
块状显示display:block;宽度100px width:100px,高度34px,外补丁下5px 左4px

我们看图片以为是图片排列的,可实际上,代码里面是文字,淘宝是如何实现这个效果的呢?
下面是HTML代码

• 免费注册


• 视频聊天


• 诚信安全


• 支付宝??购物无风险

我们看到每个列表都有定义id,背景图片就是通过这个定义的
#NewbieGuide ul li a{
display:block;
width:100px;
height:34px;
text-decoration:none;
}
定义列表以块状显示(display:block),宽度100px,高度34px,文本样式为无
文字链接时不显示是通过定义 span来实现的
#NewbieGuide ul li a span{
display:none;
}

#NewbieGuide ul li#NGRegister a{
background:transparent url(images/mfzc_index070105.gif) 0 0 no-repeat;
}
#NewbieGuide ul li#NGOpenShop a{
background:transparent url(images/splt_index070105.gif) 0 0 no-repeat;
}
#NewbieGuide ul li#NGTrust a{
background:transparent url(images/cxaq_index070105.gif) 0 0 no-repeat;
}
#NewbieGuide ul li#NGAlipay a{
background:transparent url(images/zfb_index070105.gif) 0 0 no-repeat;
}

暂时先分析到这一块,小结一下:

1.有多个容器时,我们可以通过浮动float来设置排列,并且通过宽度,高度等来控制排列显示的方式

2.除与前面内容相同的外,我想这节比较特殊的就是,以块状显示链接,并且隐藏文字,达到貌似图片的链接效果

3.具体的容器嵌套,参数以及缩进等需要熟悉并具体应用,比如背景图片的缩进,排列