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

Earlier we analyzed the top code of Taobao webpage. This time we will analyze the navigation bar of Taobao webpage. For those who have just started learning DIV and CSS layout, I don’t know where to start. I thought I would start by analyzing excellent websites. It is a good way to learn div and css layout from the source code. This div css layout tutorial is summarized by myself while analyzing and learning. If you want to reprint, please indicate the source. In addition, I specially declare: this tutorial I just analyze the HTML and CSS source code of the Taobao website as a tutorial example to achieve the effect of learning DIV CSS layout. Please do not imitate Taobao or make websites imitating Taobao. Any disputes and liabilities arising therefrom are at your own risk. Thank you. This is the second chapter. Part 2, Taobao navigation bar layout

Let’s take a look at the actual style of the web page first


Let’s divide it into two blocks (actually three blocks)


The following is a screenshot of the source code, still using the Head container. For the convenience of viewing, I have omitted many irrelevant codes

Analysis of div and css in the html source code

1 .#Head has already mentioned in the previous section that text-align:center; is the center alignment of text
#Head{
text-align:center;
}

2.# ChannelMenu defines a width of 760px, outer patches top and bottom, left and right are 0px, text is centered and aligned
#Head #ChannelMenu{
width:760px;
margin:0 auto;
text-align:center ;
}

3. The #ChannelMenuItems container is in #ChannelMenu, but #ChannelMenu has no restrictions, so it is the same if it is written directly under the container #Head. Of course, you can also write #Head #ChannelMenu # ChannelMenuItems {}The effect is the same,
#Head #ChannelMenuItems{
width:520px;
height:33px;
margin:0 auto;
}
What is defined here is the width 520px, height 33px, outer patch 0px

4.ul is the same as #ChannelMenuItems. Although it is in those containers, they do not limit ul, so it can be written directly under #Head, or you can even put the previous #Head removes
#Head ul{
list-style-type:none;
margin:0;
padding:0;
}
Here the list style is set to none, That is, it is not displayed, the outer patch and the inner patch are 0px

5. Set li, the style in the specific container #Head #ChannelMenuItems
#Head #ChannelMenuItems li{
float:left;
height:33px;
margin-right:1px;
}
floats from the left, with a height of 33px and a right patch of 1px

6. Set the link style
#Head #ChannelMenuItems a{
display:block;
float:left;
height:33px;
background:transparent url(images/cm_l.gif) left top no-repeat;
text-decoration:none;
}
Displayed in block mode, left floating, height 33px, background arranged on the upper left, no repetition, this setting applies to a:link, a:visited, a:hover below , a:active all work

7. By adding the span attribute, it is used to display the image background on the right
#Head #ChannelMenuItems a span{
display:block;
float:left;
height:33px!important;
height: 22px;
height /*ie55*/: 33px;
padding:11px 12px 0;
background:transparent url(images/cm_r.gif ) right top no-repeat;
text-align:center;
color:#000;
font-size: 14px;
}
Display in block mode, left floating, height is 33px (I'm a little confused, why three heights?), when padding has three parameters, let's recall: the first parameter is up, the second parameter is left and right, and the third parameter is down, indicating that the top is within The patch is 11px, the left and right patches are 12px, the background is arranged in the upper right without repeating, the text is centered with the color #000, and the size is 14px
Let’s take a look at the background image on the left and the background image on the right
Left:
Right:
The advantage of the above is that the two background images can adapt to menu lists of different widths, because the left side has an appropriate length

8. Style when activated
#Head #ChannelMenuItems a:hover {
background:transparent url(images/cm_hov_l.gif) left -3px no-repeat;
}
In order to achieve the effect when the mouse is placed, move the left background image 3px to the right (a difference of three Pixel width, left aligned), and the background image is transparent and does not repeat
#Head #ChannelMenuItems a:hover span{
background:transparent url(images/cm_hov_r.gif) right -3px no-repeat;
}

9. When the list has set ID, the last set id shall prevail
body.CurHome ul#ChannelMenuItems li#MenuHome a, body.CurHome ul#ChannelMenuItems li#MenuHome a:hover{
background:url(http://pics.taobao.com/bao/album/sys/misc/cm_act_l.gif) left top no-repeat;
}
body.CurHome ul#ChannelMenuItems li#MenuHome a span , body.CurHome ul#ChannelMenuItems li#MenuHome a:hover span{
background:transparent url(http://pics.taobao.com/bao/album/sys/misc/cm_act_r.gif) right top no-repeat ;
font-weight:bold;
color:#FFF;
}

10. #SearchBox
#Head #SearchBox{
text-align:left;
height:58px;
background:transparent url(images/searchbox_tab_left.gif) 0 0 no-repeat;
background-color:#FF9000;
}

11.#Head #SearchBoxTop
#Head #SearchBoxTop{
width: 740px;
float: left;
height:34px;
overflow: hidden;
}
overflow : visible | auto | hidden | scroll
Value:
visible :? Default value. Does not cut content or add scrollbars. If this default value is explicitly declared, the object will be clipped to the dimensions of the containing window or frame. And the clip attribute setting will be invalid
auto :? The object content will be cropped or the scroll bar will be displayed when necessary
hidden :? Content exceeding the object size will not be displayed
scroll :? The scroll bar will always be displayed

12. #SearchForm
#Head #SearchForm{
float:left;
width:740px;
height:34px;
}

13 .
#Head #HotKeywords{
float:left;
text-indent:8px;
width:752px;
height:24px;
margin-left:3px;
overflow:hidden;
background:transparent url(images/searchbox_tab_center.gif) 0 0 repeat-x;
}

The remaining forms will not be analyzed, they are basically the same

To summarize:

1. You can use two background images to combine into a background through a span

2. Use relative positions to overlap layers, such as

Information

This section is over, you still need to be familiar with the specific knowledge and parameters