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

Source: Internet
Author: User

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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.