从gmail开始，前端总结出了ajax的概念，也让前端开发工程师们得到了更多的重视，前端技能是一个很庞大的体系，W3C标准，Dom结构，Css样式，Javascript编程 ……
研究网页栅格系统前，来看一组数据：
| 网站 | 首页页面宽度 px |
|---|---|
| Yahoo! | 950 |
| 淘宝 | 950 |
| MySpace | 960 |
| 新浪 | 950 |
| 网易 | 960 |
| Live Search | 958 |
| 搜狐 | 950 |
| 优酷 | 960 |
| AOL | 960 |
上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。
根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.
这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？
设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合：
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！
事实上，对于文字的阴影效果，我们完全可以用CSS来实现！
阅读全文…
根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用HTML表格来定义网页的布局，但是表格在方便的排列数据信息行和列方面非常完美，而且如果你一定要在一个页面上显示表列数据，你就不得不使用它们！为什么不呢？然而，在这种情况下，一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。
阅读全文…
1.认识数组
数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象
Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能
1.1 定义数组
声明有10个元素的数组
var a = new Array(10);
此时为a已经开辟了内存空间，包含10个元素，用数组名称加 [下标] 来调用，例如 a[2] 但此时元素并未初始化，调用将返回
阅读全文…
//获取元素的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,”");
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//获取元素相对于这个页面的x和y坐标。
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
