2.2 CSS Zen Garden Works Appreciation (ON)

Source: Internet
Author: User
Tags css zen garden

I. Country--Two-column layout

The two-column layout is the most common form of layout in all sites and is the most common in Zen garden works. This layout is clearly structured and has a very good guide to visitors. The country is a representative of this type of work, set by Mario Carboni, the Italian designer. In this work, the page is divided into reasonable, and color with peace and harmony, click on the following URL to view.

The site of the visit to this work is http://www.csszengarden.com/?cssfile=149/149.css, and the designer's personal site is http://www.mariocarboni.com/.

Two, pixel painting--three column layout

This is the No. 193th work, designed by British designer Jon Tan. This is a very typical three-column layout design, the designer specifically made a fine pixel painting, as the title image of the page, the effect is quite attractive.

The three-column layout is also a very common form of layout, usually a wide column to place the main content, two narrow columns to place navigation links and other content, access to the Crystal URL is http://www.csszengarden.com/?cssfile=193/193.css, The designer's personal website is http://www.gr0w.com/.

Three, Lily Pond--three-column layout variant

This is the number No. 201 work, as shown in Lake 2.8, designed by the Australian designer Rose Thorogood, which is a variant of the three-column layout, in the top and bottom, adjacent two columns are merged.

The site of the visit to this work is http://www.csszengarden.com/?cssfile=201/201.css, and the designer's personal site is http://tulips4rose.com.

Four, tulip-multi-column layout

Zen Garden Collection works require the use of fixed HTML, which allows most designs to use two or three columns of layout, but can actually produce a very good multi-column effect. In the collection of works, there are some very good multi-column layout works, No. 088 is a typical representative, by the American designer Eric Shepherd design. Lodidance.com

The site of the visit to this work is http://www.csszengarden.com/?cssfile=088/088.css, and the designer's personal site is http://arkitrave.com/log.

Five, day and night--design with rounded corners

CSS box model restrictions, so that in the early days of using CSS design pages, most of the works are square, lack of round and curve of the match, appear more rigid. In fact, CSS can also be used to design the perfect circular graphic elements of the work. The work shown here uses a design with rounded corners, designed by Belgian designer Colas Schretter.

The site of the visit to this work is http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight, and the designer's personal site is Http://homepages.vub.ac.be/~cschrett.

Vi. si6--contains a tilted design

Most of the layout of the Web page is horizontal and vertical, and Zen garden site can see some of the design of the tilted elements, not only did not destroy the overall balance of the page, but also added a unique temperament to the page, so that visitors feel a new ear. The more typical tilt design works are number No. 044, designed by American designer Shaun Inman.

The site of the visit to this work is HTTP://WWW.CSSZENGARDEN.COM/?CSSFILE=044/044.CSS, and the personal website of the juicer is http://www.shauninman.com.

Seven, the time of tea--decorative design

A good design can be too discounted if it ignores the certainty of detail. CSS can be used not only to layout, but also to add a lot of decorative elements of the page, so that the page look proud very refined, more prominent details. The 124th work presented here is designed by Austrian designer Michaela Maria Sampl, who uses a series of coordinated elements to make the page look good and harmonious. Fully embodies the feminine style of female designer works.

The site of the visit to this work is http://www.csszengarden.com/?cssfile=124/124.css, and the designer's personal site is http://www.frausampl.at.

Eight, the air of love--fluid layout

At present, most websites, especially formal commercial websites, use fixed-width layouts. The same is true of CSS Zen Garden works, but there are still a portion of works that fit into the width, or "fluid layout". For example, the 170th works presented here are designed by German designer Nele Goetz, and the pages are divided into two columns. The total width will fill the entire page, the left column width will vary with the width of the browser, the right column width fixed.

The site of the visit to this work is http://www.csszengarden.com/?cssfile=170/170.css, and the designer's personal site is http://www.april-design.de.

Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network
This address: http://www.lodidance.com/css/jc/662.html

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.