Google 首页代码分析及简评
2010-09-14 13:09:06 来源:WEB开发网核心提示:Google.cn 首页界面简洁,尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目,Google 首页代码分析及简评, 几乎天天打开 google.cn 页面,有没有想到看看这个页面的 Html 代码是什么样子?当试图分析其 Html
Google.cn 首页界面简洁,尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目。
几乎天天打开 google.cn 页面,有没有想到看看这个页面的 Html 代码是什么样子?当试图分析其 Html 代码时会发现,虽然页面看起来简单,但代码并不是想像的那么简单!
分析其代码发现:
以<Div>和表格混合布局,并不是所谓的纯粹的 XHTML <Div>+CSS “Web标准”布局;
<script> 也不加 language="javascript";
标签的属性也不用 "" 或 '' 括起来。
使用 Javascript 的比较生僻的语句形式,比如 window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"}
Javascript 代码写的晦涩难懂,变量用单个字母表示,意义不明确,是为了显示技巧高超,还是为了“保密”?
“视频”“图片”……等地方的效果不是用 Html 代码构建,而是用纯粹的 js 代码构造,不知道是手工写的,还是用什么工具完成的?
本人把“很炫目”那部分的代码扣了下来,效果还在,但还是 js 脚本的形式。本人没有进一步深入分析,想进一步分析的可以自己做,希望能把新的与大家共享。
其实“很炫目”的那个效果并没用很玄的编程技巧,无非就是把类似动画帧的几个图片按时间顺序分别显示了一下,做出了动感的效果。大家看一下图片就能意识到。但具体怎么实现还要看代码。
- ››首页被K后1个月内恢复快照且排名提升的方法
- ››Google搜索引擎的奥秘
- ››Google测试搜索结果页面右侧内容更丰富的信息栏
- ››Google Dart精粹:应用构建,快照和隔离体
- ››google的代码审查
- ››google analytics清晰追踪爬虫的爬行信息
- ››Google+中文用户在两千万Google+大军中是少数派
- ››Google AdWords最昂贵点击成本的20种关键词分类
- ››Google运作经理Bryan Power给出的GOOGLE求职意见
- ››Google用户体验的十大设计原则
- ››Google Analytics(分析)能为网站带来什么
- ››代码隐藏文件如何与页面链接
更多精彩
赞助商链接