- 在XHTML中,<html>、<head>、<body>都是必需的标签。
- 必须设置<html>标签的xmlns属性,且其值为“http://www.w3.org/1999/xhtml”。
- 所有元素都必须结束。任何起始标签要么有一个对应的结束标签(如果它是一个容器的话),要么是一个自结束元素“空格加斜线”。
除了上文中的渐变文字,dragoninteractive网站还有一个很酷的效果,就是网站菜单的鼠标特效,如果不看代码,我们很多人估计该要误以为这个是flash特效了,只是这里还是用JS来实现的。这个看着貌似简单的站实现了很多我们以为只有图片和flash才能实现的效果。
废话不多说了,这里要说的就是一个菜单的hover的效果,一般我们通过CSS的伪类:hover实现的菜单切换都比较单调,因为仅仅是一个简单的图片的变化,不像很多flash菜单一样变化非常的平滑,但是这里我们就是要用非flash的技术实现一个平滑的hover效果。
今天看到某人博客推荐了http://dragoninteractive.com/这个网站,貌似一些效果做的比较不错,于是打开了看看,不过还真是让我颇有收获,网站本身设计就很漂亮,里面很多效果也都很酷,而且必须要说的就是很多貌似flash的效果,其实都是通过js实现的,这些东西大大引起了我的兴趣,于是开始阅读代码,分离。
这里要说的就是网站中通过js实现的一个有立体感的文字渐变效果,先截两个图看看:
以往我们在一些节日的时间会在一些网站上看到一些撕页/折页的效果:即好像我们从一个右上角撕开一张贴画或者从书的右上角翻开一页纸,然后我们可以看到下面显示显示的内容。但是这种效果基本都是依靠flash来实现的,但本人所讲述的方法是通过jQuery(JS)的方法来实现的。
考虑到以后可能接触和编写XHTML/CSS的机会越来越多,因此要恶补一下这方面的知识了。过去的一年多时间基本把大脑中有关xhtml/css的相关知识快给“扔”的差不多了,看来对于做前端的我来说这些内容还是不能丢掉的,这篇日志就用来记录我以后学习中总结的各种用到的CSS hacks的技巧。
PS:网上有一张css-hack-list的图,不过我仔细看了一下,是有些问题的,而且对IE也仅仅包含到IE7b1的结果,但现在IE8也的用户也在逐渐的增加,我们必须要考虑更多的东西了。
网名:网者归来、yemoo,长期并将继续投身于WEB前端相关技术的学习和推广的大军中,目前就职于杭州淘宝网,从事前端开发相关工作,有事可E-MAIL联系我。