NAVER (네이버) is the NHN company under the famous South Korea portal/Search engine website, its logo for a straw hat, in June 1999 officially put into use.
http://shopping.naver.com/in front of the page as a whole has been revised, after the revision of the page than before the more tidy, increased the level of sense, edging have degrees, the overall quality of the page is also greatly enhanced, starting from this period, We will be some of the details of Korean Web site research and learning, but also as a discussion with you, hope to be able to work together from the site's own visual details to do more research, in the design, can make the page more rhythmic
Read the full text
First phase grid
Let's take a look at Shopping.naver's first page.
As can be seen from the above, the Naver is extended according to a fixed grid, so how big is his block?
To measure each block:
Judging from the size of the blocks measured above, he is using a 210x290 as a standard grid block to distinguish between the various plates
Divided into block structure, not only make the whole page of the block more obvious, more organized and clear content, but also balance the proportion of each piece of content, regardless of which screen, have a strong consistency, at the same time, there is a very obvious advantage, that is ~ ~
Let's take a look at the small resolution of the layout of the page
is not, feel very flexible and natural, regardless of which screen resolution, he has a natural reorganization and sorting, and for the content of the slightest impact, do not have to consider too much for the response to achieve too much preparation, performance is very good!!
After reading the shopping.naver grid, presumably everyone is now the first reaction is to think of our site, the current one Amoy site, especially the first page, is indeed not in any grid, only to do some datum alignment and a small range of grids. Through the grid analysis of Shopping.naver, I have done the same standard grid experiment on the website grid of Amoy Shopping.naver.
According to the current width of 990, by calculation, it will be found that 190 is also a magic number, in 990, we use the Naver width ratio to assume a Amoy site grid ratio
To 190x270 as a basic grid cell
Let's start with the Shopping.naver layout, and etao.com the grid by 990 width.
As you can see, our site can be perfectly grid-partitioned like Naver.
So ~ ~ ~ ~
is not the same, we can also like Naver to the section of the smooth movement, processing different screen resolution of the site's display structure
OK, this article is just a grid from the Naver structure of the translation, source files stored in etaoux\etaoued \j_ June mo \ personal Sharing Korean website details Experience Grid article, if there is any idea, we can discuss
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.