中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

在我的前一篇教程《牢不可破的九宮格布局》中，我介紹了一種比較完美的九宮格布局方法，它能完全彈性地調(diào)整自己的寬高，從而實(shí)現(xiàn)比較靈活的布局風(fēng)格。

然而為了彈性功能完美地體現(xiàn)出來，所付出的代價(jià)還是很沉重的，從結(jié)構(gòu)上看，其結(jié)構(gòu)是比較臃腫的，但是每個(gè)節(jié)點(diǎn)又是必不可少的，無法精簡(jiǎn)，否則會(huì)導(dǎo)致其靈活性不夠。

在實(shí)戰(zhàn)運(yùn)用中，可能好多設(shè)計(jì)師并不喜歡這種布局結(jié)構(gòu)，嫌其結(jié)構(gòu)冗余。

一個(gè)完美的九宮格設(shè)計(jì)應(yīng)該是一種三層分離的結(jié)構(gòu)，我想達(dá)到的理想的九宮格應(yīng)該是這樣的：

1. 只需要應(yīng)用一個(gè)class樣式給想應(yīng)用九宮格布局的容器，就能自動(dòng)創(chuàng)建這種布局。結(jié)構(gòu)應(yīng)該足夠精簡(jiǎn)，只用很少的結(jié)構(gòu)就能實(shí)現(xiàn)豐富的顏色風(fēng)格。
2. 能夠?qū)⑦@種布局樣式應(yīng)用于一個(gè)頁面的多個(gè)容器中。
3. 三層分離的設(shè)計(jì)，能提供豐富的顏色皮膚方案，便于將不同的樣式應(yīng)用于多個(gè)風(fēng)格迥異的盒子上。
4. 要足夠健壯，能兼容大多數(shù)瀏覽器。

因此，在這一篇文章中，我會(huì)將這種布局盡量向著這種理想化的境界靠近，讓它更宜于應(yīng)用在各個(gè)方面。

對(duì)于一、二點(diǎn)，又想要保持其靈活性，又想要達(dá)到精簡(jiǎn)的效果，就是說想“魚和熊掌兼得”，除了應(yīng)用js封裝外，并無其它的辦法。你可以說這是一種“掩耳盜鈴”的做法，是的，我不得不承認(rèn)，這種用JS封裝的辦法，從本質(zhì)上說并沒有精簡(jiǎn)其結(jié)構(gòu)，只不過將其結(jié)構(gòu)都用動(dòng)態(tài)的方式來創(chuàng)建，但對(duì)冗余的html結(jié)構(gòu)確實(shí)有立竿見影的效果，一下子就將所有冗余的結(jié)構(gòu)化于無形之中。

我們還是從三層分離的做法中了解如何改進(jìn)我們的九宮格吧。

結(jié)構(gòu)層：

這是我們要盡量精簡(jiǎn)的重點(diǎn)區(qū)域，我們用js的方式來動(dòng)態(tài)創(chuàng)建其結(jié)構(gòu)，所以現(xiàn)在的結(jié)構(gòu)應(yīng)該是如下的最最原始的結(jié)構(gòu)了：

<div class="box">第一個(gè)九宮格盒子</div>
<div class="box" id=“one”>第二個(gè)九宮格盒子</div>
<div class="box" id=“two”>第三個(gè)九宮格盒子</div>

我唯一作了一點(diǎn)修改的是，將每一個(gè)盒子加了一個(gè)不同的ID，這為以后創(chuàng)建不同的顏色方式留下一個(gè)供樣式表調(diào)用的鉤子。通過這個(gè)ID在樣式表中創(chuàng)建不同的圖片或顏色風(fēng)格。

我們應(yīng)該只需要給div容器添加一個(gè)class=”box”，就會(huì)將九宮格布局成功地創(chuàng)建出來。這樣是夠簡(jiǎn)潔的了吧！

樣式層：

剛才在結(jié)構(gòu)層中我們埋下了定制樣式的突破點(diǎn)（那個(gè)不同的id），那么在寫樣式時(shí)就顯得得心應(yīng)手了。我們將所有的九個(gè)需要改變風(fēng)格的地方的樣式進(jìn)行覆蓋性重置，就能得到不同的風(fēng)格樣式。

   /*顏色方案一*/
   #one .t_l{background:blue;}
   #one .t_r{background:blue;}
   #one .t_m{background:orange;}
   #one .m_l{background:orange;}
   #one .m_r{background:orange;}
   #one .b_l{background:blue;}
   #one .b_r{background:blue;}
   #one .b_m span{background:orange;}
   #one .context{background:#666;}  

   /*顏色方案二*/
   #two .t_l{background:red;}
   #two .t_r{background:red;}
   #two .t_m{background:black;}
   #two .m_l{background:black;}
   #two .m_r{background:black;}
   #two .b_l{background:red;}
   #two .b_r{background:red;}
   #two .b_m span{background:black;}
   #two .context{background:#999;}

當(dāng)然你可以將不同的圖片應(yīng)用于background上作為其背景，我只是為了演示方便而調(diào)用了顏色值而已，具體的界面風(fēng)格就看你的設(shè)計(jì)功夫了。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 下一頁 三層分離的完美九宮格 [2]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。