免费申请网站-免费企业建站

中国免费网站制作开创者与领导者
您的网站由我们来实现，搜发网络团队为您服务！

注册网站

管理网站

免费申请网站-免费企业建站九宫格是一种比较古老设计，它最基本表现其实就像是一个三行三列表格。其实它最初是在windowc/s结构网站制作顶用得比较多，免费申请网站-免费企业建站学做网站好比我们免费建网站常常到软件中一个窗体，其实就是一个九宫格典型应用免费申请网站-免费企业建站

优点:全部由我们专业设计，根据客户要求定制

风格功能，存储空间大，后台管理简单。

缺点:价格偏贵

优点:价格便宜，免费试用，自己制作

缺点:设计不专业，模板功能无法定制

免费申请网站-免费企业建站

免费申请网站，会打字就可以操作，有问题请咨询在线客服QQ！

样板网站

更多>>

NO.1

NO.2

NO.3

NO.4

NO.5

NO.6

免费申请网站-免费企业建站

免费申请网站-免费企业建站九宫格是一种比较古老设计，它最基本表现其实就像是一个三行三列表格。其实它最初是在windowc/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;}

注意：

这里有两个地疯要注意到：

1、就是t_m和b_m这两个容器是需要水平平铺，所以需要将它z-index设置为比左右两角divz-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。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>基本九宫格(http://www.cnblogs.com/binyong)</title> 
<style type="text/css"> 
*{margin:0;padding:0;}  
.box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;}  
.t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;}  
.t_l{left:0;width:10px;background:blue;}  
.t_m{z-index:1;width:100%;background:orange;}  
.t_r{right:0;width:10px;background:blue;}  
.m_l,.m_r{position:absolute;z-index:2;width:10px;}  
.m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;}  
.m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;}  
.b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;}  
.b_l{left:0;width:10px;background:blue;}  
.b_m{z-index:1;width:100%;background:orange;}  
.b_r{right:0;width:10px;background:blue;}  
.m_m{width:100%;font-size:12px;color:#fff;}  
h3{text-align:center;font-size:14px;line-height:26px;}  
.m_m p{line-height:22px;padding:0 20px;}  
</style> 
</head> 
<body> 
<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>这是一个九宫格基本布局模型，未加载任何图片，请随意拉伸缩放窗体大小，九宫格向各个方向自由免费建网站舒。</p> 
<p>本模型测试在以下几个浏览器中完全通过：</p> 
<p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p> 
<p style="text-align:right">更多原创请访问：<a href="http://www.cnblogs.com/binyong" title="网站">冰极峰</a></p> 
</div> 
<div class="m_r"></div> 
<div class="b_l"></div> 
<div class="b_m"></div> 
<div class="b_r"></div> 
</div> 
</body> 
</html>