close

無標題文件

網頁設計網頁佈局之九宮格基本佈局
發佈者:SEO香港優化專家 - Web Design
網站設計

九宮格是一種比較古老的設計，它最基本的表現其實就像是一個三行三列的表格。其實它最初是在window的c/s結構中用得比較多，比如我們經常看到軟件中的一個窗體，其實就是一個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在C/S軟件中大量採用這種技術來佈局設計。在B/S系統大行其道的當今社會，這種佈局逐漸被一些網頁設計師運用在網頁中去，用得最多的就是在圓角框佈局中應用。

下圖演示了九宮格的基本佈局：

從上圖可以看出，每一行包括三列，其中藍色方塊是頂角，這四個塊是寬高固定的區域，而黃色的四個區域分別是四條邊，這些都是要水平或垂直平鋪的，而中間的橙色區域是裝載內容的主要區域。

這樣的結構是最有利於內容區域隨屏幕分辯率不同而自動伸展寬高，這種結構也是網頁設計師是最想要的一種佈局結構，它靈動而從容。

下面我們就來實現它：

結構層：

因為它要適應八個方向的伸展，所以每個方向都用一個div來實現，少一個則靈活性就不足。那麼根據這個原理，我們可以得到如下的結構：

<div>
    <div></div>
    <div></div>
    <div class="t_r"></div>

    <div></div>
    <div class="m_m">內容區</div>
    <div></div>

    <div></div>
    <div class="b_m"></div>
    <div class="b_r"></div>
</div>

樣式層：

根據結構，我們可以寫出基本的樣式。基本實現原理，是利用將總容器.box設置為相對定位並設置overflow:hidden;讓超出它的地方全部被切除，並將其裡面的八個方向的div設為絕對定位，並將它們的z-index設置為2，然後將四個角容器分別設置到四個角落上。

.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}

注意：

這裡有兩個地方需要注意到：

1、就是t_m和b_m這兩個容器是需要水平平鋪的，所以需要將它的z-index設置為比左右兩角的div的z-index的值低，我們將它設置為z-index:1;這樣它就置於t_l和t_r的下面了，然後，我們設置它的寬度為100%，讓它水平鋪滿整個第一行的寬度。

.t_m{ z-index:1;width:100%; }

2、對於m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設為一個非常大的值，我們將它設置為20000px，讓它一直向下垂直平鋪，然後因為總容器設置了overflow:hidden，會將多餘的部分切除。

這樣一個基本的九宮格佈局就形成，你可以查看下面的演示模型。

本模型在以下瀏覽器中測試通過：

IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>基本的九宮格(http://www.cnblogs.com/binyong)</title> 
  6. <style type="text/css"> 
  7. *{margin:0;padding:0;}  
  8. .box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;}  
  9. .t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;}  
  10. .t_l{left:0;width:10px;background:blue;}  
  11. .t_m{z-index:1;width:100%;background:orange;}  
  12. .t_r{right:0;width:10px;background:blue;}  
  13. .m_l,.m_r{position:absolute;z-index:2;width:10px;}  
  14. .m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;}  
  15. .m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;}  
  16. .b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;}  
  17. .b_l{left:0;width:10px;background:blue;}  
  18. .b_m{z-index:1;width:100%;background:orange;}  
  19. .b_r{right:0;width:10px;background:blue;}  
  20. .m_m{width:100%;font-size:12px;color:#fff;}  
  21. h3{text-align:center;font-size:14px;line-height:26px;}  
  22. .m_m p{line-height:22px;padding:0 20px;}  
  23. </style> 
  24. </head> 
  25. <body> 
  26. <div class="box"> 
  27. <div class="t_l"></div> 
  28. <div class="t_m"></div> 
  29. <div class="t_r"></div> 
  30. <div class="m_l"></div> 
  31. <div class="m_m"> 
  32. <h3>九宮格--基本模型</h3> 
  33. <p>這是一個九宮格基本佈局模型，未加載任何圖片，請隨意拉伸縮放窗體大小，看看九宮格向各個方向自由伸展。</p> 
  34. <p>本模型測試在以下幾個瀏覽器中完全通過：</p> 
  35. <p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p> 
  36. <p style="text-align:right">更多原創請訪問：<a href="http://www.cnblogs.com/binyong" title="去網站看看">冰極峰</a></p> 
  37. </div> 
  38. <div class="m_r"></div> 
  39. <div class="b_l"></div> 
  40. <div class="b_m"></div> 
  41. <div class="b_r"></div> 
  42. </div> 
  43. </body> 
  44. </html> 

似乎到這兒就該結束了，然而….

要是細心的朋友在測試本模型時會發現，在IE6瀏覽器中，會與一個BUG不期而遇，那就是?IE6寬高值奇數1px BUG?，估且這麼稱呼吧，因為對於這個BUG，網絡上並沒有一個統一的稱呼。

這個bug的激發條件是：
一個相對定位的父容器，其子容器採用絕對定位的方式向左或向右靠齊，當父容器的寬度值為奇數時，父容器與子容器之間會存在１px的間隙。不能完全緊貼在一起。

而我這個演示模型剛好滿足了條件…

所以當你在IE6瀏覽器中縮小窗口，並進行拖拉縮放時，最右邊和下面的兩個小方塊和父容器中會出現一個１px的空距。

如果你覺得不用考慮IE6的話，那麼這種佈局就已經基本滿足你的需要了。

然而，對於一些比較追求完美的設計者來說，這是讓人無法容忍的。
……

網頁寄存

 



本文出自: https://lixiangni.pixnet.net/blog/post/3619515-%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E7%B6%B2%E9%A0%8
arrow
arrow
    文章標籤
    網站設計
    全站熱搜
    創作者介紹
    創作者 p6se885b37y 的頭像
    p6se885b37y

    edithclapalme

    p6se885b37y 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄