|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
破洛洛文章简介:这篇文章所讲的也长短常利用的手艺,个中扳连到其他的手艺,也必要人人有所懂得。恰好这两天也在看这方面的材料,供应一些材料给人人参考。
啊,inline-block,挺难揣摩而且诱人的声明上答应了良多,实在供应了很少。良多次我拿到相似如许的PSD文件:
就哭了。
一样平常说来,这类范例的结构是小菜一桩。流动宽度,流动高度,向左浮动就办理了。可是,这个计划中内容的几是可变的,这就意味着假如这些块中的一些内容比其他的多,就会损坏这个结构。
由于第一个展现项比其他项高,第五个项目就绝对第一个浮动,而不是位于它上面了。基础上我们想要一个弹性表格的结构,可是得当的,语义标志。
我们以一个无序列表入手下手这个复杂的页面,并把display设置为inline-block:- <ul><li><h4>Thisisawesome</h4></div></li>
复制代码 貌似<li>中的内容被’重置’而且准确显现了。
如今,转到IE7下去。IE7也不撑持inline-block,可是我们能够棍骗它以使<li>仿佛是inline-block的。怎样做呢?hasLayout,IE的一个带来兴趣的奇妙属性。你没法在一个元素上用hasLayout:true;显现地设置hasLayout,或经由过程其他相似的复杂办法,可是能够用其他相似zoom:1的声明来引发它。
手艺下去说,hasLayout意味着,一个hasLayout设为true的元素卖力衬着它本人及其子元素(把它和min-height和width团结起来,就失掉了和display:block十分类似的效果)。这有点像奇妙的精灵粉,把它洒在衬着成绩上,成绩就消散了。
当我们给<li>加上zoom:1和*display:inline(辨别IE6和IE7的星号hack)以后,在IE7中它们就能够像inline-block一样显现了:- li{width:200px;min-height:250px;border:1pxsolid#000;display:-moz-inline-stack;display:inline-block;vertical-align:top;margin:5px;zoom:1;*display:inline;}
复制代码
哇!差未几了,只剩IE6了:
IE6不撑持min-height,可是多亏它对height属性的不准确处置,我们能够用它来取代。把_height(IE6下划线hack)设为250px使一切的<li>元素高度为250px,而且假如它们的内容年夜于250px,他们会扩展来顺应。其他一切的扫瞄器会疏忽_height。
如今为止,对一切的扫瞄器都无效了,这是终极的CSS和HTML:- <style>li{width:200px;min-height:250px;border:1pxsolid#000;display:-moz-inline-stack;display:inline-block;vertical-align:top;margin:5px;zoom:1;*display:inline;_height:250px;}</style>
复制代码- <li><div><h4>Thisisawesome</h4><imgsrc="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"alt="lobster"width="75"height="75"/></div></li>
复制代码 这篇文章所讲的也长短常利用的手艺,个中扳连到其他的手艺,也必要人人有所懂得。恰好这两天也在看这方面的材料,供应一些材料给人人参考。
更好的控制页面布局。不用多说。 |
|