9 マスのグリッドは比較的古いデザインであり、その最も基本的なパフォーマンスは実際には 3 行 3 列の表に似ています。実際、これはもともとウィンドウの C/S 構造でよく使用されていました。たとえば、フォームを拡張する必要があるため、実際には 9 マスのグリッドの典型的なアプリケーションです。この技術は、レイアウト設計用のC/Sソフトウェアで広く使用されています。 B/S システムが普及している今日の社会では、このレイアウトは一部の Web デザイナーによって Web ページで徐々に使用されています。最も一般的に使用されているのは、角の丸いボックス レイアウトです。
次の図は、Nine Palace Grid の基本レイアウトを示しています。
上の図からわかるように、各行には 3 つの列が含まれており、青い四角形が上隅で、これら 4 つのブロックは幅と高さが固定された領域で、4 つの黄色の領域は水平になる 4 つの辺です。中央のオレンジ色の領域がコンテンツを読み込むためのメイン領域です。
この種の構造は、さまざまな画面解像度に応じてコンテンツ領域の幅と高さを自動的に拡張するのに最も適しており、Web デザイナーが最も望んでいるレイアウト構造でもあります。
以下で実装してみましょう。
構造層:
8 方向の伸縮に対応する必要があるため、各方向に div で実装されます。1 つが欠けると柔軟性が不足します。この原則に従って、次の構造を得ることができます。
スタイルレイヤー:
構造に従って、基本的なスタイルを書くことができます。基本的な実装原則は、container.box 全体を相対位置に設定し、overflow:hidden; を設定して、その外側のすべての領域が切り取られ、その内側の 8 方向の div が絶対位置に設定され、その z - Index を 2 に設定し、4 隅のコンテナをそれぞれ 4 隅に設定します。
.box{オーバーフロー:非表示;位置:相対;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {位置:絶対;z-インデックス:2;}