当前位置:首 页>> 随心所欲

关于 CSS3 唠叨一下 微信扫一扫
分享给朋友

  CSS3 说白了就是 CSS2+新增规范,当然也是向下兼容CSS2的,不用担心浏览器的显示问题。CSS3虽然也出来有段时间了,但这些新增规范依然还在W3C的不断完善和发展之中,所以有些新属性不是所有的浏览器都支持,或者是同一个浏览器的不同版本也会有差异,当然,最烂的就是盖茨大叔家的IE系列了,支持的最好的是IE9了,IE10还没用,估计不会差哪里去,其他浏览器,比如新版的Chrome、Firefox、Opera、Safari,基本都支持的不错。
  正是由于新属性不是所有浏览器都支持,尤其是IE9以下版本的浏览器,所以一直没去仔细研究那些新增的规范,更何况在咱这IE6大行其道的地方,很多CSS2的东西都显示的不咋地,CSS3就别想这么多了,除非全中国上网的人们都换成IE10,或者新版的Chrome、Firefox、Opera、Safari,否则这CSS3只能自己看了。比如,俺博客文章的标题是有阴影的,IE浏览器是看不到的,圆角的边框博客倒是没有用,如果用了,IE6/7/8也是看不到的,还是显示直角的边框,IE9是可以看到的。
  下面就说说之前觉得有用的几个新属性。

CSS3 Borders 新的边框定义里面,可以设置圆角了,也可以设置阴影,同时边框还支持显示图片,IE9及以上版本才能看见效果,IE8是不支持的。
border-radius 边框圆角大小
box-shadow 边框的阴影
border-image 边框图片 (IE9不支持)

关于网页制作和浏览器再来吐槽一下 微信扫一扫
分享给朋友

  近一段时间都在和DIV+CSS打交道,还是一如既往的浏览器老问题,兼容,还是兼容,尤其是盖茨大叔家出产的IE浏览器,版本虽然不是太多,但是之间的差距太大,6、7、8、9还有个10,IE10暂时还没用,9还行,算是和其他诸如Chrome、Firefox、Opera、Safari步伐一致了,虽然小问题有一点,但是大问题没有了。IE8还算凑合,IE6和7就是毒瘤啊,靠吧,头疼。
  小小总结一下头疼的地方,当然是些自己遇到的比较烦人的地方:
  1、CSS的部分属性,IE6、7不支持或者有Bug,害人不浅,需要另辟蹊径。
  2、很多Javascript的特效代码不支持,Fuck,这才是恼人的地方。
  3、最起码的PNG图片的透明不能直接支持,还得Fix一下才行,GIF也就256色。

  所以,盖茨大叔,您能不能行行好,当初若是IE6留下的有啥后门,开启吧,全都强制升级到IE9,最差IE8也行啊,不升级的都开机就死机。前几天Windows XP都十岁了,IE6也不小了,可是用户群还是一大把,这都是盖茨的功劳,怪不得欧洲的同仁们要打击盖茨大叔捆绑IE呢,现在看来还是有道理的。也希望天朝的网民们,没事的时候把您的IE6浏览器升级到IE8吧,当然IE9更好,如果能使用其他诸如Chrome、Firefox、Opera、Safari浏览器那是最好不多了,都很好使。如果要用网银、支付宝什么的时候再临时把IE请出来单独用一下也是可以的,谁让咱们国情如此呢,没有和国际接轨,革命尚未成功,还得努力啊。

CSS之z-index:Flash动画的层叠 微信扫一扫
分享给朋友

  原本博客顶部的通栏展示是一张图片,后来做了一个简单的Flash动画放上。放上之后发现一个小问题,就是博文中的缩略图点击之后,会全屏显示原始大图片,不过,全屏时,Flash动画居然显示在最上层,也就是覆盖在原始大图片之上了。本想是给Flash动画加个z-index的负值之后就应该不覆盖原始大图了,结果依旧,没搞定。

  先介绍一下z-index,CSS的这个属性值,是用来设置元素堆叠顺序的,也就是垂直于屏幕方向上的排列顺序,类似于PS里层的概念,值越大的元素,会覆盖其下面的元素。z-index可以拥有负值,且仅能在定位元素上有效,比如position:absolute,position:relative,or position:fixed。默认值是auto,主流的浏览器都支持这个属性。也有列外,IE7及老版本不支持inherit,IE8需要!DOCTYPE,IE9还算厚道,能支持inherit了。

  根据这个z-index的说法来看,Flash动画应该是不覆盖其他元素了,可是不行哦,于是Google之,得知仅有z-index还不够哦,还得给Flash动画加上两个参数,代码如下:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1088" height="100" style="z-index:-99">
  <param name="movie" value="/images/top_show.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <embed src="/images/top_show.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="1088" height="100"></embed>
</object>
  其中第四行及第五行中的wmode="transparent"就是需要添加的参数,这样就搞定了,Flash动画老老实实的显示在原始大图下面了。

CSS:@font-face定义使用网络字体 微信扫一扫
分享给朋友

  折腾网页的人,基本上都会遇到一个头疼的问题,那就是中文字体,你要是想个漂亮的中文字体显示汉字,那你得把文字弄成图片,然后放到网页上去。没办法啊,中文字体太大,你自己电脑上有这种字体,只有你本机浏览网页时可以正确显示这个字体,否则别人看到的就是浏览器用默认字体代替了,默认字体那最普遍的就是宋体了。这几年还好,Vista和Win7系统自带的微软雅黑字体也算不错,算是可以在网页上使用的中文字体了。当然,如果你还是用Vista之前的操作系统,如果未单独安装微软雅黑字体,也一样无法看到,还是照旧宋体显示。所以汉字折腾成图片这事,估计咱国的搞网页制作的,没有一个不头疼的,具体头疼什么?业内人士的话,哥不说,你懂的。
  中文字体不行,那英文相对就好办多了,操作系统里本身带了很多的不错的英文字体,都可以在网页上使用。但是如果你自己发现了系统之外的,觉得很不错的英文字体要用在网页上,咋办呢?那就搞成网络字体,随制作好的网页一并传到你的网站上去,这样,浏览网页的时候,就自动把这字体下载了,同时也能正确的按照你指定的字体,显示页面上的英文文字。好了,下面就说说怎么整:

  首先你的把你要用的英文字体找回来,TTF[TureType Font]和OTF[OpenType Font]的都行,然后得转换一下格式,搞成eot的,这是给IE浏览器用的,TTF的直接非IE浏览器就能用,比如Chrome、Firefox、Opera、Safari(PC)。

在线转换:
http://www.fontsquirrel.com/fontface/generator

TTF2EOT的命令行:
http://code.google.com/p/ttf2eot/downloads/list

英文字体示例:

Museo fonts,It's wonderful!

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890@#$%&?

IE9对CSS3和HTML5的支持 微信扫一扫
分享给朋友

  微软还是很变态,一些不错的CSS3的特性都还不支持,俺觉得一个起码的text-shadow该支持了吧,居然还不行。还算厚道,CSS3的选择器算是都支持了。看来W3C的标准执行的也不是很好,起码微软这只大鳄就不怎么遵守,其他浏览器如Chrome,Firefox,Safari,Opera还是不错,基本上绝大部分支持的很好。这次IE9是彻底的放弃XP用户了,也应该是置IE6于死地的时候了。

更多信息详见:http://fmbip.com/

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。