网页布局的九宫格基本布局

最新推荐文章于 2024-08-26 12:57:26 发布

peter-wang

最新推荐文章于 2024-08-26 12:57:26 发布

阅读量3.9k

点赞数 1

分类专栏： DIV+CSS 文章标签： class div xhtml safari opera chrome

本文链接：https://blog.csdn.net/mlks_2008/article/details/7818713

版权

九宫格布局源自古老的C/S软件设计，现在常用于网页布局，特别是圆角框设计。基本布局由三行三列组成，顶角蓝色块固定，黄色边框平铺，橙色区域适应内容伸展。通过使用多个div和绝对定位实现灵动伸缩。在样式层，设置相对定位，隐藏超出内容，并调整z-index确保正确平铺。

摘要由CSDN通过智能技术生成

九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。

九宫格的基本布局实际上是每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而黄色的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。
这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。
下面我们就来实现它：

结构层：
因为它要适应八个方向的伸展，所以每个方向都用一个div来实现，少一个则灵活性就不足。那么根据这个原理，我们可以得到如下的结构：

<div class="box">
    <div class="t_l"></div>
    <div class="t_m"></div>
    <div class="t_r"></div>
    
    <div class="m_l"></div>
    <div class="m_m">
        <h3>九宫格–基本模型</h3>
        <p>这