做网页的人,有时候会碰到这样的问题,图片与容器之间有个空白死活无法去掉,而且明明没有任何的字符,也没有设置margin/padding等等,这是为神马呢?

迄今为止我碰到过两种情况会导致这种问题:

  1. DOCTYPE为在HTML4或者XHTML1.0(过渡)
    在IE浏览器中会发生,原因是图片后面有"空格",这里的空格并非指&nbsp,而是就是普通的空格,也就是说图片标签的结束没有紧紧地贴住容器的结束标签。
  2. DOCTYPE为HTML5
    在所有浏览器都一样,图片与容器间有几个像素的空白。
2812 Comments
TAG
,

三月份的时候,我将Blog程序升级至5.1beta2,开始体验5.1的MT,前几天发现正式版已经释出,拥有MT情结的我立刻更新。

使用Movable Type多年来,从2到3,从3到4,从4到5的版本更新,MT一直保持着一种稳定稳重的形象。在我看来,相比于WP的灵动和便捷,MT更注重的是发布和组织,加上他优秀的模板系统和静态化,仍然是很多人的第一选择。

您可以透过以下的幻灯片来了解更多5.1以及5.05/4.36的安全性更新内容

2743 Comments
TAG
,

多年来,我们通常透过图片或者JavaScript来创建非标准的漂亮的按钮。

随着浏览器对CSS3的越来越多的支持,我们已经可以不受阻碍地使用CSS3按钮了。

使用CSS3的属性,有着设计按钮的巨大空间,使用border-radius实现圆角,使用linear-gradient以及box-shadow来实现渐变和阴影,以及动画过场效果,以及......

这里列出了十几个代码优美又富有创意的CSS3按钮,你可以使用它们或者从中得到启发。此外,你可以在文章的结尾找到所有其他的CSS3按钮相关的资源以帮助你创建更好的按钮。

CSS3 Buttons With Simple Markup

20110420215722032.png

尽量使用简单的标记来创建的一套按钮,共计18个。

其中有三个只适合Webkit内核的浏览器(如Safari、Chrome),其余的可兼容所有主流浏览器。

2763 Comments
TAG
,

一,什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}

<div class="clearfix">
  <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

<div>
  <div class="floated"></div>
</div>
<div style="clear: both"></div>
2768 Comments
TAG
, ,

本文来自于阿姆斯特丹召开的Fronteers 2010上Jeremy Keith的演讲,您还可以下载投影片(PDF格式),或者观看视频,在"为之漫笔"中有翻译,转载如下:

attendees-2.jpg

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。

实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。

说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。

1 Comment
TAG
, , ,

地球人都知道,在host中设置若干adobe.com的域名到127.0.0.1,Adobe就无法自动在线验证序号的合法性了。

但是不知道从什么时候开始,Adobe就在背地里又搞鬼了,可能会让你已经用网络上找到的序号激活的Adobe Photoshop CS5(或者其他产品)恢复到未激活的状态。这给很多一直在"试用"Adobe产品的朋友带来了诸多不便,其实Microsoft早就帮我们想好了更彻底的解决办法,那就是系统防火墙

原理很简单,禁止以下两个程序访问网络:

  • 程序安装目录\Adobe\Adobe Photoshop CS5\Photoshop.exe
  • 程序安装目录\Adobe\Adobe Extension Manager CS5\Adobe Extension Manager5 CS5.exe

1 Comment
TAG
, , , ,

"知乎"成了近期IT业内几乎无人不知的关键词,知乎是一个中文问答社区,组织形式与Quora类似,目前处在内测当中,需要邀请才能注册。虽然目前用户还不过3000,却引发众多关注。实际上,当知乎仅有100名用户时,就有人在社会化网络上求知乎的邀请码了。知乎的魅力何在?

z1.png

1 Comment
TAG
, ,

jQuery是当下网页设计师和开发人员所使用的最流行的Javascript库之一(除了HTML5和CSS3)。它是一种前端开发人员快速成长所必须具备的技能。

但想要学习jQuery的初学者,有时候很难找到专门学习jQuery的网站,在从初学者到专家的进化过程中,寻找jQuery资源是个相当大的挑战,它将耗费你大量的时间。

所以,在 Webdesigneraid,我们收集并列出了8个很棒的网站,你可以关注并且阅读他们的教程。这些网站将帮助你成为一个jQuery大牛。如果您认为除了我们列出的这几个网站之外还有很不错的网站,请不吝在下方回复。

1. Learning jQuery

1_preview_90_1.jpg
最好的jQuery资源博客之一,从jQuery高手身上学习。

1 Comment
TAG

google-chrome-frame.jpg

Windows、IE 和 Chrome 的关系就像是父亲、女儿与表兄/弟的关系一样,Windows是一家之长,虽然 Chrome 不是这个家里的成员,但也不能拒绝它过来玩儿。而 Chrome 在进入 Windows 家之后,不仅仅很大程度上抢了Windows 亲身女儿 IE 的风头,还利用一个叫做 Chrome Frame 的器官无耻的霸占了 IE6、7、8三姐妹的身体,都不需要经过 Windows 爸爸的同意。不过 IE9妹妹面世之后,由于穿上了新的防弹衣 ,Chrome 之前一直未能得手,必须要经过 Windows 爸爸的同意。

1 Comment
TAG

本文转载自Speed's smart design,仅供参考以及从另外一个角度来了解jQuery,不代表本人认同其中的全部观点。

大部分情况下,我们面临的背景是:

设计者高高在上,不食人间烟火,只是提供约束,不要这样,必须那样,而不是提供方法和可以复用的API。

开发者是处于解决问题的一线,饱尝重复造轮子的疾苦,他们最需要的是快速的解决问题,以更恰当的方式工作,寻找更容易构建系统的技术和方式。

Jquery给设计者上了很好的一课,Jquery就像一个魔法师一样,$()就像魔法棒一样,随手一指,一个木偶变复活了,一瞬间具备了各种各样的复杂的能力。

1 Comment
TAG
最新图片
  • realistic-css3-buttons.gif
  • 20110420224155706.png
  • 20110420223729064.png
  • 20110420223523394.png
  • 20110420223056249.png
  • nice-css3-buttons.gif
  • 20110420222416083.png
  • 20110420222001003.png
  • 20110420221520749.png
  • 20110420220814359.png
  • github-style-css3-buttons.gif
  • 20110420215722032.png
网站统计

Copyright © 2006~2010 肆无忌惮. All rights reserved. 关于本站 | 版权声明 | 免责条款 | 相关法规 | 网站统计

Powered by MTOS. 所有的文本内容在GNU自由文档许可证下发布