相信很多人都上过taobao吧，在taobao的产品列表页有一个浮动的用来排序的浮动层，当你拖动滚动条而导致那个排序栏看不到的时候它会自动变为浮动层，一直固定在那里。非常好的一个用户体验实例。如果不明白的话就看下面的图片吧
淘宝产品列表:http://search.taobao.com/search?cat=50010388&commend=all&q=%B0%E5%D0%AC&source=search1
腾讯财经产业经济 http://finance.qq.com/industry/index.htm
如何实现？
scrollTop是什么？当元素内部的内容高度超过元素本身的高度时就会出现滚动条，随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时，取得scrollTop值并写入定位层CSS属性，使之保持位置。
下面是实例代码，请查看源文件。
付费评论和出售链接出售黑链会导致Google的惩罚、降权、清除PR、甚至封站，这是大家都知道的事情。我也常因为Google的公正而十分钦佩，但是为什么在Google Adsense的广告里还会出现付费链接的广告呢？
用GOOGLE搜索关键词“链接”看看：
Google在我的眼里一直都是作风硬朗、孑然一身的，看了这个广告之后让我很心寒啊。不光是付费链接，还有一些什么日入6千啊什么的广告也很多，难道Google Adwords就没有人工审核吗，钱就真的是万能的吗？看来任何一个公司都不可能十全十美，只是有过分和不过分之区别（百度就过分了）。还是只去关注Google的技术吧，好多东西在谈到钱之后都变味了，好多原则在谈到钱之后就没有原则了。
经常有客户问，你们有做模板网站建设吗？在几年前，很多公司使用模板建站、自助建站，一方面花费很少，另一方面可以随时更新。而近来选择自助建站的企业越来越少了，主要原因也是自助建站的弊病有以下几点：
1、最大的问题当属不能直观修改代码，模板建站会产生冗长的垃圾代码，而且每个页面的代码又极为相似，这样很不利于Google、Yahoo、 Baidu等搜索引擎搜索，对于网站推广极为不利。
2、网站风格千篇一律，似曾相识；很难树立提高企业形象。
3、很多自助建站是公用的空间及数据库，安全性无法保证。
4、对于今后网站功能扩展，无法支持。
5、如果是几页的小规模网站，自己动手添加信息还可以，如果网站内容较多，产品种类繁多，一页页添加是一件很烦心的事情，做过的人大都深有体会。
但是，今天的网站建设越来越精密，要求越来越高，应该找专业网络公司还是使用模板也就是自助建站工具自己建设公司网站，成为目前不少小企业主考虑的问题。聆科网络建议，根据您建站的需要进行选择，如果要求不高，内容不多可以选择自助建站；否则，最好由专业的设计师来为您量身定做。
使用模板，就是这里点点鼠标，那里敲敲键盘，然后诸如表单、搜索、网站地图、留言薄、日历等等之类网站构成的诸多基本元素就表现出来了。而且，许多主机服务提供商不仅将自助建站工具与域名主机服务捆绑，还往往与网站推广、Email营销、搜索引擎优化和流量统计等后继推广工作都连带打包销售，这不仅为普通企业提供了专业、系统的服务，解决了他们作为不懂网络营销的企业实施网络营销的实际困难，从网站运营过程来看，一个很吸引人的地方就是长期成本较低，打包费用为了促销逐年递减，而且不用每年再分别交纳域名、主机、推广等费用，因此，自助建站的相对低成本进入也是吸引客户的一个重要原因。
既然自助建站有以上种种好处，人们为什么还要专门请网络公司来做网站？实际上，自助建站缺乏设计和布局上的灵活性。比如，如果一个模版是顶端一条banner广告，左边一条垂直菜单，而你想让导航条放在顶端，下边再放banner广告，这个模版就没法提供这样的选择。另外，模板建站会产生冗长的垃圾代码，而且每个页面的代码又极为相似，这样很不利于Google、Yahoo、Baidu等搜索引擎搜索，对于网站推广极为不利。
使用自助建站还有一个最大的反差，就是号称只要会打字就可以实现的网站建设实际上并非所称那么方便。通常学习如何使用好该工具就已经够麻烦了。实际上，自助建站工具越富有特色，个性化功能越多，网站效果越精美，往往使用起来就越麻烦。你需要学习大量知识：色彩运用、排版样式、信息搭建、布局与设计等。如果用错了这些知识，将给网站带来适得其反的效果。因此，即使你早已熟知相关知识，以及电脑和网络运用熟练，完成一个自助建站也远非想象那么轻松简单。
对于一个小企业主来说，考虑建设、维护一个网站的第一步，是先想好自己总体上计划投入多长时间、多少资金、人力、耐心以及已有的电脑网络知识等，有了这些结论，才有助于判断是要采用模板建站还是聘请专业网站建设队伍。
电子商务网站的竞争越来越激烈，虽然你可能在以最低的价格卖最好的东西，但同样重要的的是用户的购买体验，对电子商务网站而言，易用性就是让用户尽可能快而简单的完成购买，有时候，一条小小的改进可能带来巨大的改变。本来讲述了10条电子商务网站的易用性规则。
1. 用户无需注册直接购买
很多公司喜欢让用户注册，但注册过程实在太冗长了，尤其对那些临时光顾的用户，强迫注册会将他们吓跑。让用户直接往购物车里添加货物，在结算前，另外提供一个注册选项以方便他们的下一次购买是一个很有效的方法，在任何时候都要明白，实现销售比收集一堆电子邮件地址更有价值。
2. 注册要简单
你希望注册用户给你提供多少信息？也许是越多越好，然而实际上，你用不了那么多，你真正需要的也许只是一个邮件地址和一个密码。尽可能使用邮件地址作为用户名，因为用户名容易混淆，而邮件地址是唯一的，更容易记忆。
3. 告诉用户他们所处的步骤
面包屑导航条是任何大型电子商务站点的必需，用户需要随时知道他们目前所处的步骤，以及后面余下的步骤，否则，用户会觉得茫然，甚至半途放弃。另外，面包屑导航条还可以帮助用户自由后退，返回，以便在需要的时候对前面的操作进行修改，如果面包屑导航条不容易实现，那你至少对每一步操作进行编号标识，如，第一步/共四步。
4. 让用户有安全感
用户对安全非常在意，尤其当他们需要输入信用卡号的时候，在用户购买的任一步骤，你都需要让他们有安全感，并且让他们知道你会保护他们的安全与隐私，最好的办法是在网站上部署 SSL。
5. 订单确认
确认页对一个电子商务网站的易用性来讲非常必要，不仅可以让用户对前面操作的内容进行确认，也避免了用户因不确定而不断向你查询。
一个有效的确认操作包含以下三个部分：
6. 搜索功能
任何电子商务网站需要一个随时可见的搜索框，用户可以对结果进行筛选，搜索功能可以让用户更好地查找商品，提供更愉快的体验。如果你的商品种类繁多，搜索应该支持按类别筛选。允许用户按颜色，尺码进行搜索也不失一个好方法，另外，也可以让用户定制自己的搜索结果，如每页显示多少条结果。
7. 列出相关产品
如果处理得当，列出相关产品可以带来交叉销售，比如，用户购买电子产品的时候，可以列出与该产品相关的电池，线缆等配件，Amazon 证明该方法十分有效。
8. 行动按钮（Call-to action button）
不要低估了那些行动按钮的力量，“添加到购物篮”，“注册”，“结算”一类的按钮可以提高你的成交率和易用性。要想让这些按钮吸引人，需要在字体，颜色，措辞，位置等方面仔细揣度，按钮应该足够大，清晰，色彩应该同背景形成对比。在措辞方面，应该使用“添加到购物篮”，而不是“立即购买”，后者会吓跑某些用户。应该考虑使用本地化语言，比如，美国用户更习惯“添加到购物车”，而英国用户习惯“添加到购物篮”。如果可能，可以使用 IP 区分客户的来源以便针对不同地区的用户，提供不同的本地化语言。
9. 避免隐匿费用
隐匿费用比任何东西都让客户愤怒，一定将价格，税，快递费用，以及可能有的优惠明明白白地显示给用户，而且越早越好，人们喜欢在添加货品到购物篮之前就知道它们需要多少钱。如果在结算之前发现多出来很多额外费用，他们会放弃订单且不会再来。
10. 让购物车随时可见
购物车应当随时可见，应当浮显在右上方。这样用户不必滚动页面去浏览里面的货品和总价。为了更好地体现易用性，应当允许用户在任何时候都可以修改，添加或移除货品。“结算按钮”应当直接放在购物车内，方便快速访问。
1. 用 CSS 实现布局
让我们一起来做一个页面
首先，我们需要一个布局。
请使用 CSS 控制 3 个 div，实现如下图的布局。
这题不难，在平时项目开发过程中也经常会碰到：
主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清楚浮动；
CSS代码
div{background:#CCCCCC;} #first{float:left;width:100px; height:150px} #second{clear:left;float:left;margin-top:10px;width:100px;height:150px} #third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}
XML/HTML代码
<div id="first"></div> <div id="second"></div> <div id="third"></div>
2. 用 javascript 优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；
所以样式改成了这样
body{ margin:0; padding:0} div{background:#CCCCCC; position:absolute} #first{width:100px; height:150px} #second{top:160px;width:100px;height:150px} #third{ width:200px; height:310px; left:110px}
javascript 要考虑封装、复用
function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数） var obj=document.getElementById(id); // 获取元素对象值 var dW=obj.clientWidth; // 获取元素宽度 var dH=obj.clientHeight; // 获取元素高度 //var oTop=obj.offsetTop; //var oLeft=obj.offsetLeft; obj.onmouseover=function(){ // 鼠标移入 this.style.width=dW*x+"px"; // 横向缩放 this.style.height=dH*y+"px"; // 纵向缩放 this.style.backgroundColor="#f00″; // 设置调试背景 this.style.zIndex=1; // 设置z轴优先 } obj.onmouseout=function(){ // 鼠标移出，设回默认值 this.style.width=""; this.style.height=""; this.style.padding=""; this.style.backgroundColor=""; this.style.zIndex=""; } } zoom("first",1.25,1.25); zoom("second",1.25,1.25); zoom("third",1.25,1.25);
曾经在2009年最风靡一时的植物大战僵尸(Plants vs. Zombies)不用介绍了吧，最近在网上发现有高手纯用JS做的网页版的植物大战僵尸，牛人啊，佩服之余，提供全部JS代码，供有兴趣者研究用。
用js做的游戏
在IE8上正常运行
尚有bug，不完全兼容其他浏览器
此版本为不完整版
>>>>>>>>有待改进
游戏中单位种类较少
僵尸只做了3种
没有设计关卡
菜单界面没有制作
在线试玩：http://www.hiw3c.com/zwdzjs/Index.html
