Ul list tag design webpage multi-column layout _ HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
I suddenly thought of this method when I wrote three columns of layout with CSS for a few days. I think this idea is crazy. If there is anything wrong with it, please kindly advise. When writing a three-column layout, I usually choose to use the following DIV Layout Method: This method suddenly came into mind when I wrote three-column layout with CSS for a few days, I think this idea is crazy. If there is anything wrong with it, please kindly advise.
When you need to write a three-column layout, I usually choose to use the following DIV layout method:
DIV Layout
Using this nesting method can undoubtedly reduce the probability of code errors, but the layout is also slightly complicated, and it is slightly inconvenient for later maintenance. We often use a method for layout navigation, that is, using the ul list for layout, and navigation can be described as a multi-column layout, then we can use ul to layout multiple columns on the page.
DIV Layout
This is a fixed-width layout, that is to say, the mobility is not strong. The liquidity layout has not been tested yet. If you have time, try again. The following is the layout code:





Use UL for multi-Column Layout




This is the header




  • This is left



    • This is the middle top

    • This is the middle bottom



  • This is the right side



This is the bottom





This code can be normally displayed in IE7 and FF3, and is not tested in other browsers. If you have a better method, try again.

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.