div css layout example Taobao analysis (3) (2)_html/css

div css layout example Taobao analysis (3) (2)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:31:27

Original

1000 people have browsed it

在第三节第一小节我们分析了淘宝网页的主体代码的左侧部分,今天我们来分析淘宝网页的主要内容的右侧部分,对于刚入门学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 < (760-260),所以不会发生重叠现象

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<380(ADlist宽度),所以列表在从左浮动排列两列后自动换行

如果愿意,你还可以定义列表的链接样式,可以这样定义
#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

The ul block has been defined in ADlist. The display method of the list is defined below
#ADListImg li{
float:left;
width:76px;
text-align:center;
}
Define the list width to be 76px, float from the left, and center-align the text. We see that 5 columns are arranged, 7*76=380 == 380px
Then define the image parameters in the list li
#ADListImg li img{
border:1px #ccc solid;
margin-bottom:5px;
display:block;
}
border:1px #ccc solid; As we can see , the border of the picture is a solid line of 1 pixel, the color is gray #ccc
border : border-width || border-style || border-color
You can define the width, style and color of the border

3. Now let’s analyze the container on the right (that is, the registration... block)
The definition of the entire container NewbieGuide has been mentioned before, let’s analyze the internal block 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;
}
This block defines the outer patch (top is 14px, right 8px, bottom, left outer patch is 0), the inner patch is 0, and the link style is none. In fact, I I thought list-style-type has been defined as None. It is unnecessary to define list-style as None, because when it is not defined, it is the default

Let’s take a look at the style of the list
#NewbieGuide ul li{
display:block;
width:100px;
height:34px;
margin:0 0 5px 4px!important;
margin:0 0 4px 4px;
}
Block display display: block; width 100px width: 100px, height 34px, 5px under the outer patch and 4px on the left

We looked at the picture and thought it was an arrangement of pictures, but in fact, there is text in the code, Taobao is How to achieve this effect?
The following is the HTML code

Free registration

Integrity and Security< /span>