九宫格基本布局
作者：by0001 来源：蓝色理想 发布时间：2009-06-18 18:36:00
九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在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">内容区</div>
<div class="m_r"></div>
<div class="b_l"></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;}
0
投稿猜你喜欢
- 说起页面执行时间相信大家并不陌生，如果你经常逛论坛，就会发现很多论坛底部都显示有页面执行时间，那么什么是页面执行时间呢？我个人理解是一个网页
- asp禁止站外盗链，站外提交方法、以及asp判断星期几方法.防盗链，主要通过判断上一页面来源是否是本站来实现的，不是本站的链接就
- Oracle数据库以其高可靠性、安全性、可兼容性，得到越来越多的企业的青睐。如何使Oracle数据库保持优良性能，这是许多数据库管理员关心的
- 代码如下:'================================================== '函数名：
- 今天一个域名查询系统出现故障，该系统是用的ASP调用XMLHTTP获取whois库的数据，具体错误如下： msxml3.dll 错
- XML文档因为其固有的描述性特性而趋向于变得很罗嗦。其结果是文档会由于被描述的数据增多而变得很长，而这种很大的文档会在需要同其他实体进行交换
- 代码如下:Class XMLClass Private objXml Private xmlDoc Private xmlPath '
- 如何正确显示模式对话框中的中文？msg.htm <html> <head> &nbs
- 简化了一下 YUI3 中的沙箱实现 方式：if (typeof Sandbox === 'undefined' || !Sa
- 要很好地领会Ajax技术的关键是了解超文本传输协议（HTTP），该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件。只
- 1、选取最适用的字段属性MySQL 可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建
- 学习使用存储过程(Stored Procedure)，是ASP程序员的必须课之一。所有的大型数据库都支持存储过程，比如Oracle
- 有一天我突发奇想，要是我每到一个网站，那里都能立刻调出我需要看的信息，那岂非美妙得很。接下来我想更深入地考虑这个问题，坐到椅子上拿一支铅笔，
- 讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面
- 使用ajax获取服务器数据返回给客户端，出现中文乱码。在之前的一个ajax应用中指定codepage=936，将所有页面编码都指定为GB23
- 磁盘搜索是性能的很大瓶颈。这个问题在数据大量增长以至于无法使用有效的缓存时尤为明显。或多或少随即访问大数据库时，就必然会有至少一次磁盘搜索来
- 有时候，我们在某一重要的时间段需要监控某张表的变化情况，包含插入、更新、删除。举例来说，当我们把数据导出到外部的系统时，我们希望导出的是全部
- bookheader.asp Recommended Books for <％=session(&quo
阅读是在网站中的一个很重要的部分，可以说是网站的核心。网站最终要呈现给用户的就是内容。尤其是文本内容。豆瓣豆瓣前段时间小改了一下，页面拉宽，- 你是否有时想知道什么人访问你的站点，什么时间，IP地址等。下面我就这个问题向大家来阐述一下。这个例子使用文本文件来写入用户的信息创建一个lo
