Taobao Zhengchun's CSS notes Daquan 1th/4 Page _ Experience Exchange

Just think of these years of writing CSS and XHTML experience, summed up into a "Chiven" to share. Helpless I have been high, really a bit powerless. Then on second thought, you can use the form of notes to show, so you do not have to worry about writing out.

Now it's a little trick on Taobao home page.

The line between the categories

From a long time ago, there are only three kinds of vertical lines between the categories.

1. Background image
   In a tab, set a padding to position to the right with a background image of wide 1px height.
   Disadvantage: The last one or to use class to hide the background.
2. Symbol
   Between each a label with "|" Symbols to fill.
   Disadvantage: HTML files become larger, file maintenance becomes cumbersome, and meaningless in HTML.
3. A boder on the right side of a label.
   As with the background image, it is simply using Border-right instead. The disadvantages are ditto.

See here, may already have someone to open Taobao home page with Firebug to see how the source is done.

In fact, the existing is to use the Overflow:hidden of the UL again Li's margin-left:-1px practice made out. This approach can avoid the above shortcomings at the same time.
Why have not done so before, I do not know. Am I the first to discover such a thing?
Whoever did this before used this method to achieve the vertical line between the classes.
However, Taobao home on the line soon after the Web site in the home page revision also used such a method.
The website is not worth looking at. Class is really written a bit more. Loading HTML will become much more.
Anyway a homepage needs to load 1.17m of Web page my brain will automatically block.

Current 1/4 page 1234 Next read the full text