在我的前一篇教程《牢不可破的九宫格布局》中,我介绍了一种比较完美的九宫格布局方法,它能完全弹性地调整自己的宽高,从而实现比较灵活的布局风格。
然而为了弹性功能完美地体现出来,所付出的代价还是很沉重的,从结构上看,其结构是比较臃肿的,但是每个节点又是必不可少的,无法精简,否则会导致其灵活性不够。
在实战运用中,可能好多设计师并不喜欢这种布局结构,嫌其结构冗余。
一个完美的九宫格设计应该是一种三层分离的结构,我想达到的理想的九宫格应该是这样的:
- 只需要应用一个class样式给想应用九宫格布局的容器,就能自动创建这种布局。结构应该足够精简,只用很少的结构就能实现丰富的颜色风格。
- 能够将这种布局样式应用于一个页面的多个容器中。
- 三层分离的设计,能提供丰富的颜色皮肤方案,便于将不同的样式应用于多个风格迥异的盒子上。
- 要足够健壮,能兼容大多数浏览器。
因此,在这一篇文章中,我会将这种布局尽量向着这种理想化的境界靠近,让它更宜于应用在各个方面。
对于一、二点,又想要保持其灵活性,又想要达到精简的效果,就是说想“鱼和熊掌兼得”,除了应用js封装外,并无其它的办法。你可以说这是一种“掩耳盗铃”的做法,是的,我不得不承认,这种用JS封装的办法,从本质上说并没有精简其结构,只不过将其结构都用动态的方式来创建,但对冗余的html结构确实有立竿见影的效果,一下子就将所有冗余的结构化于无形之中。
我们还是从三层分离的做法中了解如何改进我们的九宫格吧。
结构层:
这是我们要尽量精简的重点区域,我们用js的方式来动态创建其结构,所以现在的结构应该是如下的最最原始的结构了:
<div class="box">第一个九宫格盒子</div> <div class="box" id=“one”>第二个九宫格盒子</div> <div class="box" id=“two”>第三个九宫格盒子</div>
我唯一作了一点修改的是,将每一个盒子加了一个不同的ID,这为以后创建不同的颜色方式留下一个供样式表调用的钩子。通过这个ID在样式表中创建不同的图片或颜色风格。
我们应该只需要给div容器添加一个class=”box”,就会将九宫格布局成功地创建出来。这样是够简洁的了吧!
样式层:
刚才在结构层中我们埋下了定制样式的突破点(那个不同的id),那么在写样式时就显得得心应手了。我们将所有的九个需要改变风格的地方的样式进行覆盖性重置,就能得到不同的风格样式。
/*颜色方案一*/ #one .t_l{background:blue;} #one .t_r{background:blue;} #one .t_m{background:orange;} #one .m_l{background:orange;} #one .m_r{background:orange;} #one .b_l{background:blue;} #one .b_r{background:blue;} #one .b_m span{background:orange;} #one .context{background:#666;}
/*颜色方案二*/ #two .t_l{background:red;} #two .t_r{background:red;} #two .t_m{background:black;} #two .m_l{background:black;} #two .m_r{background:black;} #two .b_l{background:red;} #two .b_r{background:red;} #two .b_m span{background:black;} #two .context{background:#999;}
当然你可以将不同的图片应用于background上作为其背景,我只是为了演示方便而调用了颜色值而已,具体的界面风格就看你的设计功夫了。
出处:蓝色理想
责任编辑:bluehearts
上一页 下一页 三层分离的完美九宫格 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|