仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 816|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 带来一篇CSS教程:inline-block在各扫瞄器的显现

[复制链接]
冷月葬花魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:01:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
破洛洛文章简介:这篇文章所讲的也长短常利用的手艺,个中扳连到其他的手艺,也必要人人有所懂得。恰好这两天也在看这方面的材料,供应一些材料给人人参考。
啊,inline-block,挺难揣摩而且诱人的声明上答应了良多,实在供应了很少。良多次我拿到相似如许的PSD文件:

就哭了。
一样平常说来,这类范例的结构是小菜一桩。流动宽度,流动高度,向左浮动就办理了。可是,这个计划中内容的几是可变的,这就意味着假如这些块中的一些内容比其他的多,就会损坏这个结构。

由于第一个展现项比其他项高,第五个项目就绝对第一个浮动,而不是位于它上面了。基础上我们想要一个弹性表格的结构,可是得当的,语义标志。
我们以一个无序列表入手下手这个复杂的页面,并把display设置为inline-block:
  1. <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一样显现了:
  1. 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:
  1. <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>
复制代码
  1. <li><div><h4>Thisisawesome</h4><imgsrc="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"alt="lobster"width="75"height="75"/></div></li>
复制代码
这篇文章所讲的也长短常利用的手艺,个中扳连到其他的手艺,也必要人人有所懂得。恰好这两天也在看这方面的材料,供应一些材料给人人参考。

更好的控制页面布局。不用多说。
柔情似水 该用户已被删除
沙发
发表于 2015-1-17 23:52:36 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
因胸联盟 该用户已被删除
板凳
发表于 2015-1-25 23:07:14 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-4 13:35:52 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
山那边是海 该用户已被删除
5#
发表于 2015-2-10 00:09:40 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
精灵巫婆 该用户已被删除
6#
发表于 2015-2-28 11:50:53 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
admin 该用户已被删除
7#
发表于 2015-3-9 23:22:28 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小魔女 该用户已被删除
8#
发表于 2015-3-17 03:10:30 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
简单生活 该用户已被删除
9#
发表于 2015-3-23 18:15:17 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-30 07:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表