从权威网站上“偷”窃

权威网站的设计都是有其可学之处的,如果有时间不防看看它们的源代码(HTML代码)。
至少可以学到这些吧:
1。页面布局风格;
2。Javascript代码,CSS原码;
2。CSS,Javascript脚本联合操纵Dom;
以微软的官方网站MSN中国为例:
在微软的官方网站上已看不到table的影子,页面布局全部采用CSS+DIV控制。
最多用到的HTML元素恐怕就是DIV和UL了。
利用CSS可以精确的将DIV布置在页面的任何地方。
通过脚本控制轻易实现动感DIV效果。涉及到数据读取时可以采用富客户端方式(数据一次性加载到客户端),
也可以采用当下流行的AJAX方式。
下面是MSN中国上的一个效果:

整理后的HTML


标准的CSS+DIV布局,在body中只有以下一些东西:
1。HTML元素(DIV,UL等);
2。HTML元素对应的CSS(可以是Class也可以是Id对应);
3。HTML元素对应的JavaScript事件(单击触发,鼠标滑过触发等);
4。HTML元素中的数据;
涉及布局,显示等全部在CSS中控制,例如:
◆字体效果:<font>,<strong>等
◆布局效果:<br>,<center>,<p>等
◆样式效果:<style>等
是不会出现在body中的
下面是微软中国的一个效果:

整理后的HTML


其中有很多JavaScript函数我们大可直接拿来。(如library)
以上两个例子的原码下载:微软&MSN

-----------------------20090320补充------------------------------

效果:

代码:

Code

posted @ 2007-08-16 16:12  青羽  阅读(959)  评论(2编辑  收藏  举报