九宫格基本布局
作者：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
投稿猜你喜欢
导语今天就给大家带来个语言识别跟语言赚文字的小工具感兴趣的铁汁萌可以往下滑了1.直接使用在1.2官网注册后拿到APISecret和APIKe- 引言书接上回 Gradio机器学习模型快速部署工具【quickstart】翻译，讲到多输入输出，其实很简单，就是把多个组件包装到列表，inp
- 作者：AngelGavin 出处：CSDNInternet Explorer 5.0 对 XML 提供哪个级别的支持？Inter
- 索引和切片是NumPy中最重要最常用的操作。熟练使用NumPy切片操作是数据处理和机器学习的前提，所以一定要掌握好。文档：https://d
- 我们知道，当你把一个资源文件和一个.py文件放在一起的时候，你可以直接在这个.py文件中，使用文件名读取它。例如：with open(
- 你一定听说过这句著名的数据科学名言：在数据科学项目中， 80％ 的时间是在做数据处理。如果你没有听过，那么请记住：数据清洗是数据科学工作流程
- // 获取字符串的字节长度function len(s) {s = String(s);return s.length + (s.match
- 一、两种模式pytorch可以给我们提供两种方式来切换训练和评估(推断)的模式，分别是：model.train() 和 model.eval
- 工作中，网页设计师经常会遇见这些状况：时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……突然觉得束手无策
- 一、使用ddt和data装饰器的大致框架如下，每个test_开头的方法，代表一条测试用例from ddt import ddt,dataim
- Python引入了一个机制：引用计数。引用计数python内部使用引用计数，来保持追踪内存中的对象，Python内部记录了对象有多少个引用，
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR，MySQL将使用系统的默认值，通常为/tmp、
- 众所周知，Python使用pip方法安装第三方包时，需要从https://pypi.org/资源库中下载，但是会面临下载速度慢，甚至无法下载
- 安装pip install lazyprop例子1from lazyprop import lazypropclass Foo(object
- 视图视图是一个虚拟表（非真实存在），其本质是根据SQL语句获取动态的数据集，并为其命名，用户使用时只需使用名称即可获取结果集，并可以将其当作
- 本文实例讲述了JS实现给对象动态添加属性的方法。分享给大家供大家参考，具体如下：在工作用要用到给jd对象动态添加属性的要求，在网上找到了一种
- 终于下决心把python从2.7升到了3.7。懒人安装当然使用Anaconda。安装成功，编译成功。但是用pip 安装包的时候提示：pip
- 一、pip异常有一小部分童鞋在打开cmd输入pip后出现下面情况：Did not provide a commandDid not prov
- 具体代码如下所示：<％@ page language="java" import="com.studen
- 1.VsCode官方插件地址：https://marketplace.visualstudio.com/vscodehttp://code.
