YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Posts tagged "经验心得"

申请Google AdSense的步骤详解

申请Google AdSense的步骤详解

相信很多拥有个人博客的朋友都希望能让自己的站点获取收益,Google AdSense 就是一种获取收入的快速简便的方法,适合于各种规模的网站发布商。它可以在网站的内容网页上展示相关性较高的 Google 广告,并且这些广告不会过分夸张醒目。由于所展示的广告同用户在您的网站上查找的内容相关,因此,最终您的内容网页不仅会为您带来经济效益,还能够得以充实。 今天我就来讲讲如何申请Google AdSense,如何在你的网站上添加Google 广告,从而让你的网站为你产生收益。 一、注册Google AdSense Google AdSense 的登录注册地址:https://accounts.google.com/ServiceLogin… [阅读全文]

如何给 WordPress 添加留言板

如何给 WordPress 添加留言板

这两天又在给 BlueNight 主题增加新的功能,留言板就是我希望添加的一个功能。由于自己的主机控件不支持 PHP 的 email 模块,所以主题自己的博客一直都没有 contact us 页面,虽然我的主题有这个模版。随叫自己图便宜,找了个水货服务商。那只有想个办法做一个专门供网友和我在线沟通的工具。 看看强大的 WordPress,我想大家肯定跟我一样,第一时间就想到了用 WordPress 的 Page 模版,然后添加上 WordPress 的评论功能。事实上这样是确实可行的,而且也十分的简单。下面我就具体介绍一下怎么制作留言板模版。 给 Page 模版添加上发表评论功能 玩过 WordPress 的朋友都知道,WordPr… [阅读全文]

利用 get_comment_author_email() 函数获得 Gravatar 评论图像路径

利用 get_comment_author_email() 函数获得 Gravatar 评论图像路径

在 WordPress 中我们想获得评论中的 Gravatar 图像,一般使用 get_avatar() 函数,例如: get_avatar($comment,$size=’32’,$default=’http://www.gravatar.com/avatar/be385381854ec020acbfd856b085bc0f?s=32&d=mm&r=g’, get_comment_author()) 但是只要细心一些的前端开发的朋友都知道,get_avatar() 函数读取的 Gravatar 评论图片是保存在 gravatar.com 网站上的远程的图片。这样直接加载远程站点的图片对前端的性能是会有影响的。于… [阅读全文]

WordPress 非插件方式实现列表页显示摘要

WordPress 非插件方式实现列表页显示摘要

用过 WordPress 的朋友都知道,WordPress 自带的主题 Twenty Eleven 默认的首页显示的是全文,而并非我们常见的摘要。显示全文虽然让首页的内容很丰富,但是页面往往过于长了,用户浏览器起来不方便。今天我就结合我写 BlueNight 主题的经验,介绍一下如何实现首页显示制定字符数量的摘要。例如我的博客的样子: 怎么样?是不是比显示全文看上去要清爽一些,也跟方便读者浏览博客。本文我就拿 Twenty Eleven 主题为例子讲解如何修改显示摘要。在 Twenty Eleven 的 index.php 文件中我们可以找到如下代码: <?php while ( have_posts() ) : the_po… [阅读全文]

CSS学习经验总结 – CSS 性能优化

CSS学习经验总结 – CSS 性能优化

关于CSS性能这个问题,接触前端开发时间长一些的朋友我想大家或多或少会有所了解。我记得我第一次看到关于CSS性能方面的问题,是看YUI Theater 中 Steve Souders 的演讲 《High Performance Web Sites 14 Rules for Faster Page》 (视频下载地址:souders-performance.m4v)才知道 CSS 书写也要注意性能问题。 CSS 的解析顺序 根据 Steve Souders 的研究,浏览器解析 CSS 的顺序是从右向左的。举个例子: #navigation .menu li.current a:link { background-color: #fff;… [阅读全文]

CSS学习经验总结 – float 浮动元素

CSS学习经验总结 – float 浮动元素

CSS 中的 float 要做到前面 HACK 篇提到的优化前端性能,我们就必须要有扎实的 CSS 的技术基础。需要对各个 CSS 属性和选择器等基础知识有着深刻了解才能做到优化代码性能。由于篇幅有限,我不能一一介绍各个 CSS 属性,具体内容还需要大家自己产看《CSS 权威指南》、阅读 W3C 的 CSS 标准文档。我这里想介绍是 CSS 里一个十分重要的属性 float。 为了讲解 float,我想还是从最常见的一个 IE 显示 bug —— float 元素的双倍边距问题讲起。在前面 haslayout.net 的《Double Margin Bug》中介绍了这个 bug 的解决办法:添加 display:inline;。 不… [阅读全文]

CSS学习经验总结 – CSS Hack

CSS学习经验总结 – CSS Hack

关于浏览器兼容问题 在上一章节里最后面提过 hack 的一些写法,其实 CSS Hack 的主要目的就是为了解决浏览器兼容问题。而浏览器兼容问题也是初学者必须掌握的一个重要知识点。而作为一名合格的前端工程师,确保页面在主流浏览器中的显示一致,处理兼容浏览器问题是一门必修的基础课程。 而关于浏览器兼容问题首先需要强调的一点就是,浏览器的兼容问题不仅仅是一个单纯的技术问题,也是一个历史遗留问题。由于早期的浏览器大战,各个浏览器厂家各自为政,各自有各自的一套技术规范,各个技术团队的水平不同,还有各自对 Web 标准的理解问题,最终造成了浏览器各种兼容问题的存在。 其次,浏览器兼容问题,不仅现在有,将来很长一段时间也会一直(甚至可以肯定永远… [阅读全文]

CSS学习经验总结 – CSS 基础知识

CSS学习经验总结 – CSS 基础知识

学习 CSS 的参考资料和站点 CSS 入门并不难,我这里给初学的朋友推荐3本书:《CSS 权威指南》(第3版)、《精通CSS:高级Web标准解决方案》(第2版)和《CSS网站布局实录:基于Web标准的网站设计指南》(第2版)。这3本书你只要认真的看完,CSS 是做什么,可以做什么?CSS 的强项是什么?什么时候应该让 CSS 来处理来提高 Web 程序的性能?浏览器的兼容问题要怎么处理?你应该都明白了。 而学习 CSS 知识的 Web 站点:W3.ORG、MDN、W3Schools、W3SCHOOL.COM.CN、MaxDesign、CSS Play、CSS ZenGarden、52CSS、A List Apart 这几个站点都是… [阅读全文]

个人整理的前端开发相关的学习网站

今天有空就整理一些我学习前端开发技术时常看的一些网站,希望能够对刚接触前端开发的朋友们有所帮助。很多人不知道怎么学前端开发,这里的站点只要你都看过一遍,想必也能成个合格的前端工程师了。呵呵! W3.ORG W3.ORG是W3C的官方网站,做前端开发的朋友是一定要经常去看看的。理由我不想多说了,W3.ORG里的官方WEB标准文档如果你都没有认真看过,就不要说你熟悉什么WEB标准。初学者一定要多看看HTML和CSS的标准文档。 另外,刚开始学习HTML和CSS的同学们应该多用 HTML Validator 和 CSS Validator 验证一下自己的代码写得是否的规范。 ECMA-INTERNATIONAL.ORG ECMA-INTE… [阅读全文]

写给想学JavaScript朋友的一点经验之谈

写给想学JavaScript朋友的一点经验之谈

逛论坛时看到有朋友问是否有专门教Javascript的学校。这里我想把自己几年来的前端 JavaScript 开发的经验跟大家分享下,也给出几本个人认为不错的书来做为大家学习的参考资料。当然只是个人的经验,有什么不对的也请高手见谅和指正。 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的。不要浪费你自己(很可能是你父母的)钱和时间,死了这个念头。 说关于培训学校的话题,这个我要比一般的朋友有发言权。因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师。英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价也是很昂贵… [阅读全文]