dudo

(X)HTML中最多余的元素标签

    你知道(X)HTML中最多余的标签中是什么吗?在我看来就是这个<a>标签,不错,就是每个网站使用最多的超级链接标签<a>。也许有些人会认为我在哗众取宠,说大话。的确,没有超级链接的网页仅仅是一个“文件”而已,没有超级链接也就没有Internet(万维网)。但是,我这里说的<a>标签(元素)而不是超级链接。或者换个简单的说法,我认为超级链接使用<a>标签的设计很不合理。

    为什么这么说呢?先看看<a>标签的使用方法:

阅读全文——共1221字

Continue reading...

一种有创意的CSS命名规则

    关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也是仁者见仁,智者见智,只要一个团队有统一的命名规则要求,在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则:

CSS开发命名规则

阅读全文——共1348字

Continue reading...

Internet Explorer中雅黑字体给布局带来的变化

    5月20日,微软正式提供了Windows XP下可用的雅黑字体下载,雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问题,特别是对于液晶显示器(LCD),在开启ClearType效果之后,你就会得到一个更加完美的视觉享受。我现在已经对雅黑着迷了,回头看默认为宋体的系统,锯齿太明显了,很丑。

    但是这样随之而来的问题是,雅黑会对Internet Explorer中的布局页面影响。目前我发现的问题主要存在于两个方面:

阅读全文——共1351字

Continue reading...

微软为你设计的未来——看病也这么酷

我们生活在一个信息化的时代,IT产品几乎渗透到了我们生活的每一个角落。作为“性命攸关”的卫生保健领域,也自然不能例外。不过相比于消费电子领域而言,卫生保健方面的IT产品还不够大众化,也似乎没有多少像iPhone、Surface以及Wii这样耳熟能详的炫酷产品。

可是,你知道在全球顶尖IT企业微软的眼中,未来世界的个人卫生保健将会融入什么样的IT技术吗?那就来看看下面这段刚刚在微软MIX08上发布的一段视频吧。看过之后,你一定会感叹,原来看病也可以这么酷!

http://www.youtube.com/v/6F1u36Y-qlE&hl=en

Continue reading...

说说页面中header的XHTML结构选择

    页面中header部分一般位于最上端(有时根据需要也会位于某一侧,不管它在页面中的位置如何,在XHTML代码中它总是优于其它元素先加载),内容主要包括网站名称(Logo,次级标题可能是网站的一句口号等)和网站的导航部分。在推行Web标准的现代网络中,Web中对于header的代码结构似乎已经趋于稳定化。下面是一个典型的header代码结构:

<div id="header">

阅读全文——共2100字

Continue reading...

那些被我遗忘掉的XHTML标签们

    突然发现自己对Web前端技术掌握得很少很少,就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中,我平时能用到的只有那么几个,有一半吧,其余得很少在设计中用到。这并不是说没有可以使用的地方,而是自己对他们的使用缺乏了解,即便他们的使用范围本来就很窄,但是他们能从HTML过度XHTML中,说明他们有不可替代的地方。在不断追求Web标准的今天,前端开发者们应该让每个XHTML标签都有用武之地,否则更不用谈什么Web2.0了。

阅读全文——共3170字

Continue reading...

Internet Explorer 8 Beta 2 八月发布,全面支持CSS 2.1

根据微软Internet Explorer开发团队博客的消息,Internet Explorer 8 Beta 2将于今年8月发布,并且将全面支持CSS 2.1。这无疑是一个好消息,Internet Explorer 在7.0之前以其糟糕的标准支持而让Web开发者头疼不已。无论是DOM模型还CSS模型,IE都有自己独立于W3C标准之外的标准。因此,Web开发者不得不在W3C的标准之外再单独为IE设计一套方案,因为Internet Explorer拥有85%左右的市场份额。即便是到了Internet Explorer 7.0 对于CSS 2.1的支持还不够完全,这比Firefox、Opera等现代浏览器要落后很多。

阅读全文——共893字

Continue reading...

清除浮动(闭合浮动元素)的方法总结与选择

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。

问题的提出:

最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:

阅读全文——共2920字

Continue reading...

说说CSS+Div布局中的结构与表现

在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML是一个演员,CSS是编剧,XHTML演什么角色,都由CSS来决定的。这听起来似乎有点理想主义,实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。

Continue reading...

Google帮你实现网站多语言版本——轻松实现英语版本

Google最近发布了一款翻译小工具,可以帮助你把自己的站点迅速地翻译成多种语言版本。而你要做的就是在你的网页上加上下面这段JavaScript代码:

<script src=”http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/

translatemypage.xml&up_source_language=zh-CN&w=160&h=60&title=&border=&output=js”></script>

阅读全文——共567字

Continue reading...

CSS在页面布局中实现div垂直居中的方法总结

    在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

阅读全文——共2884字

Continue reading...

对于个人博客推广的八条建议

    首先我说明的我的主题很细,这里只以IT类的个人博客为例推广来说,如果您不属于这个范畴就权当做个参考吧。博客的推广显然不能和大型网站的推广相提并论,甚至也不能叫推广,只能说是提高一定知名度的方法罢了。但是既然在网上写博客,那一定是想让更多的人看,所以还是思考一下如何去做的。

1、明确的主题

    网站主题鲜明不仅仅是个人博客需要如此,任何一个网站都应该遵循这位的原则。主题的选择一定是自己熟悉的并且有一定专长的。这样你才会有话说,不至于写了两天博客之后感觉写不下去了,没什么好写的了。更不至于别人到了你网站看到的是整个一个大杂烩,我想看看怎么制作网页,里面却是很多不相干的内容,翻两页就烦了,谁还会订阅你的博客呢?当然,既然是个人博客,难免会有其它内容出现,不过这样的内容还是越少越好。我的网站www.dudo.org原来把个人旅游照片、经历、心情都写进去,但对于一个关注网站开发的博客来说显然不合适。

阅读全文——共2745字

Continue reading...

CSS在页面布局中实现div水平居中的方法总结

在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:

一、margin:auto 0 与 text-aligh:center

在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:

阅读全文——共1505字

Continue reading...

在Internet Explorer 6中用PNG图片实现半透明效果

半透明效果有时候会给页面增加不少色彩,特别是Vista盛行之后,半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中,只有PNG格式和Gif格式可以实现半透明效果,不过Gif格式的半透明效果很有限,而且会大范围失真,所以目前最流行的方式就是使用PNG格式图片。不过可惜的是,在Internet Explorer 6及以下版本中都不支持PNG半透明效果(至少是不直接支持)。不过幸好Microsoft在这些浏览器中内置了其他的功能,可以帮助我们来实这种半透明的效果。

一、我们看一下普通情况下在现代浏览器中半透明效果的实现

阅读全文——共2643字

Continue reading...

Web开发者的百科全书——Google DocType

最近Google Code推出了一个面向网站开发者的维基百科Google DocType。它来自于网站开发者同时又面向网站开发者,这里主要集中了网站开发的小知识。目前Google DocType处于Beta阶段,只允许拥有Google账号的网站开发人员对内容进行修改,等正式版推出之后任何都可以添加和更正自己在网站开发中的心得了。目前Google DocType的内容主要集中在以下四个方面:Web网站安全、DOM操作、CSS样式化、其它技巧与窍门等。不过就目前的内容来看就已经有很多值得我们学习的地方比如抵御XSS攻击(Sohu的博客就面临着这样的威胁)、如何过滤用户输入的危险字符、如何保证Flash文件的安全性等。如果你更关注Div+CSS的前台开发,那么在DocType里也提供了大量有用的技巧例如如何把背景设置为半透明等等。

阅读全文——共420字

Continue reading...