九宫格布局

最新推荐文章于 2021-01-15 02:35:46 发布
最新推荐文章于 2021-01-15 02:35:46 发布
阅读量695 收藏
点赞数
分类专栏： 译文 原创 转载 文章标签： div class safari 浏览器 ie opera
转载 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
译文
1 篇文章 0 订阅
订阅专栏
原创
1 篇文章 0 订阅
订阅专栏

　2009-08-25 15:15:27

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

下图演示了九宫格的基本布局：

从上图可以看出，每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而****的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。

这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。

下面我们就来实现它：

结构层 ：

因为它要适应八个方向的伸展，所以每个方向都用一个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;}

 

<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>


注意 ：

这里有两个地方需要注意到：

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的话，那么这种布局就已经基本满足你的需要了。

然而，对于一些比较追求完美的设计者来说，这是让人无法容忍的。
……

wo94jj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用RelativeLayout 实现简单的九宫格布局
lzc394049722的博客
07-07 2442
//RelativeLayout是item中内嵌的布局 RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.activity_main); //获取屏幕宽度 int screenWidth = getResources().getDisplayMetrics().widthPixels; //每行
android开发(2) - 九宫格的实现
weixin_34321753的博客
06-16 160
在程序中经常会遇到九宫格的样式实现，如下图：     下面我们看看实现的步骤。 1. 一个整体的容器部分。就是上图中包括整个图片项个各个部分，这里我们使用gridView（表格布局）来实现 2.整个界面里需要注意的是 “重复的部分”，就是 各个图片项和，图片下方显示的文字了。那么我们需要描述这个部分。在描述时，要说明图片位于上方，文字位于下方。 3.迭代，或者说重复的将各项 插入（放入...
第二次作业 用相对布局实现如下九宫格（每个格子为宽度高度都为80dp的button），作业要求提交代码和运行截图。...
bainazhan0034的博客
09-02 186
插入代码 <?xml version="1.0" encoding="UTF-8"?> -<RelativeLayout tools:context=".MainActivity" android:background="#009688" android:layout_height="match_parent" android:layout_width="m...
第二次作业：使用相对布局实现九宫格
dizhouxi0867的博客
09-03 302
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="...
android九宫格实现
jingwenjingwen的专栏
07-21 308
android九宫格实现，开始以为很复杂，其实只要知道了如何布局就很简单了。 先分析一下原理： 1：我们需要先定义一个主布局文件，宽度和列数用自适应的 android:numColumns="auto_fit" android:stretchMode="columnWidth" 2：在定义一个子布局，子布局主要是控制九宫格每格的布局，例子是图文垂直布局。 ...
HTML九宫格布局实现方法
12-14
最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html>  <head>  &...
HTML5九宫格布局效果
06-01
HTML5九宫格布局是网页设计中常用的一种布局方式，尤其在现代响应式设计中扮演着重要角色。这种布局能够将页面分割成九个相等大小的单元格，每个单元格可以承载不同的内容，如图片、文字或者交互元素。Bootstrap模板...
js实现九宫格布局效果
10-15
【JavaScript实现九宫格布局详解】 在网页设计中，九宫格布局是一种常见的展示内容的方式，它可以将元素均匀地分布在网格中，使页面看起来整洁、有序。本篇将详细介绍如何使用JavaScript来实现这一布局效果。 首先...
九宫格布局_为什么越来越多人钟爱九宫格，不用全键盘了？
weixin_32074113的博客
01-15 237
在语音交互技术成熟之前，键盘这一远古生物仍将长期作为人机交互的重要载体，将人的想法传递给电脑、手机等终端产品。1828年7月24日，世界上第一台打字机问世。这款机器并不好用，因为它的键位排列过于糟糕，只是简单地按照26个字母的顺序依次排列。我们现在用的键盘，是一个叫斯科尔斯的美国人发明的。在他之前，许多人都申请了键盘方面的专利，一个后来者凭什么弯道超车成为行业标准？当时按照ABCD……的键盘非常符...
Android实现九宫格解锁的实例代码
08-29
本篇文章主要介绍了Android九宫格解锁的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
fmx-listview应用
02-18
fmx-listview应用fmx-listview应用
九宫格代码
A64689072的博客
07-10 278
CGFloat margin = 10.0f; CGFloat appViewWidth = (375 - 4 * margin)/3; CGFloat appViewHeight = (375 - 4 * margin)/3; //2. 完成布局设计 //三列 int totalloc = 3; ...
delphi dbgrideh 遍历每一个单元格_用Python解数独[1]：求每个单元格的行值域
weixin_39950010的博客
11-27 303
目录用Python解数独[0] 用Python解数独[1]：求每个单元格的行值域 用Python解数独[2]：求列值域和九宫格值域 用Python解数独[3]：求总值域 用Python解数独[4]：缩减值域 用Python解数独[5]：检测唯一值缩减值域 用Python解数独[6]：递归获得最终答案 用Python解数独[7]：递归（完结篇） [2][1] 解决数独问题基本思路求每个单元格的行值域...
Delphi7简单DirectUI界面源码
热门推荐
邓学彬(泪闯天涯)的专栏
07-02 4万+
界面效果 源码下载: http://download.csdn.net/detail/cometnet/5687875 unit CometSkin; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, She
采用GridView实现九宫格的菜单
移动开发记录
02-04 244
今天在devdiv论坛里看到有坛友问到九宫格的实现，我把我在项目中用的经验分享一下，九宫格用gridview实现代码。 九宫格菜单通常是全屏显示的，那么如何控制某个Activity全屏显示呢，有两种方法： 方法一： 在该Activity的onCreate函数中添加控制代码： this.requestWindowFeature(Window.FEATURE_NO_TITLE);//设置A...
界面多个小view布局的九宫格算法
Leon
10-17 2278
做类似应用程序管理这样的app时，需要在界面上展示多个相同大小的视图，一般以九宫格的形式排列，在 用代码动态创建这些视图的时候，需要用到九宫格算法，来调整各个创建出来的小视图 位置，以便形成九宫格的效果； 例子代码：- (void)viewDidLoad { [super viewDidLoad]; //搭建界面，九宫格 #define kAppViewW 80 //小
九宫格算法
njhhack的专栏
03-25 3883
九宫格算法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值