第一期 柵格

　　我們先來(lái)看一下shopping.naver的首頁(yè)

　　從上面可以看出來(lái)，naver是按照一個(gè)固定的柵格來(lái)進(jìn)行擴(kuò)展的，那么他的區(qū)塊為多大呢?

　　對(duì)各個(gè)區(qū)塊進(jìn)行測(cè)量：

　　從上面測(cè)量出來(lái)的區(qū)塊大小來(lái)看，他都是按照一個(gè)210x290為標(biāo)準(zhǔn)的柵格塊來(lái)對(duì)各個(gè)版塊進(jìn)行區(qū)分

　　分為塊狀結(jié)構(gòu)后，不僅使整個(gè)頁(yè)面的區(qū)塊更加明顯，內(nèi)容更有條理和清晰外，同時(shí)還平衡了每塊內(nèi)容區(qū)的比重，無(wú)論在哪一屏，都擁有了強(qiáng)烈的一致性，同時(shí)，還有一個(gè)非常明顯的好處 ，那就是～～

　　我們來(lái)看一下小的分辨率下頁(yè)面的布局吧

　　是不是，感覺(jué)非常靈活和自然，無(wú)論是在哪種屏幕分辨率下，他都進(jìn)行了自然的重組和排序，而且對(duì)于內(nèi)容上也沒(méi)有絲毫的影響，不必考慮太多對(duì)于響應(yīng)式實(shí)現(xiàn)的過(guò)多準(zhǔn)備，表現(xiàn)非常棒!!

　　看完了shopping.naver的柵格，想必大家現(xiàn)在第一反應(yīng)就是想到了我們一淘的網(wǎng)站，目前一淘網(wǎng)站特別是首頁(yè)，的確是沒(méi)有應(yīng)于任何柵格，只做了一些基準(zhǔn)的對(duì)齊和小范圍的柵格。通過(guò)對(duì)shopping.naver的柵格分析，我對(duì)一淘的網(wǎng)站柵格也做了shopping.naver同樣的標(biāo)準(zhǔn)化柵格實(shí)驗(yàn)。

　　按照目前寬度為990的話，通過(guò)計(jì)算，會(huì)發(fā)現(xiàn)，190也同樣是一個(gè)神奇的數(shù)字，在990下，我們以naver寬度比例來(lái)假定一淘網(wǎng)站的柵格比例

　　以190x270為一個(gè)基本柵格單元格

　　我們先按照shopping.naver的版式，以990的寬度對(duì)etao.com進(jìn)行柵格劃分

　　可以看到，我們的網(wǎng)站也可以像naver一樣進(jìn)行完美柵格劃分

　　那么～～～

　　是不是同樣的說(shuō)，我們也可以像naver一樣對(duì)版塊進(jìn)行流暢移動(dòng)，處理不同屏幕分辨率下網(wǎng)站的顯示結(jié)構(gòu)

上一篇：北京網(wǎng)站建設(shè)一開(kāi)始就對(duì)網(wǎng)站設(shè)計(jì)和布局進(jìn)行了SEO優(yōu)化的考慮 對(duì)后期搜索引擎優(yōu)化有很好的幫助

下一篇：PC網(wǎng)站、手機(jī)網(wǎng)站、微網(wǎng)站、APP網(wǎng)站、分別有哪些區(qū)別？