Taobao static pages (four) - the head of the search navigation bar +

day3
approaching the 3.8 Women's Day. Taobao pages may well be changed, so you have to speed up a little speed up!

1. Search on the head part, which is actually a three-column layout application, press the left and right in order of arrangement, a left float, a floating right.

2. In other words is the attempt to add a background image, the word moved to an exaggerated position, there are several implementations textIndex: -9999px; overflow: hidden;
   the Cursor: pointer; the mouse to move him a little hand;

3. Locating stacked
   position: absolute:
   relative to its nearest parent attribute comprises a block having a positioning absolute positioning, if not then be positioned relative to the document, from the original position to locate, went on one
   position: relative;
   retain the original position to position, can not let other elements of the occupation, but also went on to level the
   phase to the original position relative positioning itself

4. border-radius: 6px 6px 0 0; sequence plus a rounded lower left upper right lower right upper left

5. Gradient effect is provided in two ways, filter filters for compatibility ie9 the
   background-image: linear-gradient ( to right, # ff9000, # ff5000); first default parameter down
   filter: progid: DXImageTransform.Microsoft. gradient (startColorstr = '# ffff9000' , endColorstr = '# ffff5000', GradientType = 1);

6. Both sides of the float, img text wrapping effect, height is easy to follow the float next to go, so give him a height;
   Outline: none; outline elimination

7. / * In order to be able to see behind the text * /
   background-Color: transparent; transparent property
   vertical-align: 1px; aligned generally small icon and text for adjusting the
   final attach codes:
   
   
   
   
   
   
   
   the navigation is relatively simple, but when the comparison reptiles important, so do not put him inside the fold content. Wherein issues related to bfc the need to consolidate, as well as unknown width Seeking width: calc - longitudinal (100% 190px) operation symbol space must IE9 + support
   margin-left: 190px;
   overflow: hidden trigger bfc height one has, the background came out
   Code: