Zhengchun's CSS notes (1)

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.

1, between the class of eyes Heng Vertical Bar

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

1. Background map
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
Fill with the "" symbol between each a label.
Disadvantage: HTML files become larger, file maintenance becomes cumbersome, and meaningless in HTML.

3, a label on the right side of the boder.
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.

Well, hopefully this article is a good start. Another, there are 72 hours, I have been in Taobao for 3 years, the town of South King has become Ali people.