虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了awflasher的WordPress主题TES中：
其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
[quote]
正在加载
[/quote]
你可以直接放到页面的标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）
然后，在你的样式表中，对这个loading设定一个简单的样式：
[quote]#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}[/quote]
接下来，在你标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段标记：
[quote]document.write('
#loading{display:none}');
[/quote]
如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
$('#loading').hide()
这样，当页面完全加载完毕之后，loading就隐掉了。对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
本文来自：http://www.awflasher.com/blog/archives/1589
Posted by 火恋の神父 on 11月 21st, 2008 :: Filed under
技术交流Tags ::
DIV,
Flash,
Javascript,
SEO,
UE,
主题,
代码,
技巧,
样式表
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。
八、多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10px的边框。
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px [...]
Posted by 火恋の神父 on 07月 25th, 2008 :: Filed under
技术交流Tags ::
css,
DIV,
XHTML,
代码,
技巧,
样式表
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个id,例如
我定义的id是css。
第二步：写一个js函数，代码如下：
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
1. 在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
2. 另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
Posted by 火恋の神父 on 07月 23rd, 2008 :: Filed under
技术交流Tags ::
css,
Javascript,
代码,
样式表
Opera Desktop是一款专为电脑所设计的浏览器，当网上冲浪的时候 Opera Desktop能展现最强劲的动力。它是目前最快、最安全和最容易使用的浏览器。Opera公司将 Opera Desktop设计成能适合生活。而且它是完全免费的。
Opera公司所推出的Opera Desktop 9又获得了全面的升级，在7月3日推出了最新Opera Desktop 9.51正式版。
本地下载：http://tools.mydrivers.com/soft/929.htm
官方网站：http://cn.opera.com/
Kestrel内核：全新的内核使Opera Desktop 9.5速度更快，与9.27相比速度提升50%。
Opera Link：书签、快速拨号等功能可以通过Opera Link功能传递到任何拥有Opera浏览器的设备上，包括最流行的免费手机浏览器Opera Mini。
极速搜索：只要你可以记住曾浏览过网页文字中的任何一个词，通过极速搜索功能，用户可以轻松的找到这个网页。
外观：Opera 9.5在用户界面上做出了很大改变，图标按键等都做出了更新。而且用户可以根据自己操作系统选择适合自己的外观。
加强防护恶意攻击及网络钓鱼：Opera不仅仅拥有欺诈保护功能，现在Opera是第一个网络浏览器拥有防护恶意攻击和恶意软件攻击功能。Opera通过与Haute Secure、Netcraft和PhishTank 网络安全公司的合作，可以自动抵御攻击性网页，从而保护用户免受侵害。
速度：在最新的Opera 9.5 上，Opera保持了其全球领先的性能，其中包括：邮件功能、新闻定制功能以及浏览器本身性能。
最新的Opera Desktop 9.5也继承了广大用户所熟知及喜爱的功能：
欺诈保护- Opera 的高级的欺诈保护功能可以防止您的个人信息被不正当网站窃取。
BitTorrent- 您并不需要另外的 BitTorrent 应用程序来下载大型文件。直接点击种子链接就可以开始下载。
内容阻止- 移除广告或图像 – 您可以自己做主。右键点击（Mac：CTRL + 鼠标左键点击）网页并选择“内容阻止”。
添加您喜欢的搜索引擎- 右键点击网站的搜索栏并在菜单中选择"创建搜索"。
缩略图预览- 在 Opera 中同时打开多个标签页非常容易。但哪个页面才有您想要的视频？将您的鼠标停留在任意标签上可以预览网页的缩略图。
站点首选项- 想用不同的方式查看站点或拒绝特定的 cookie？想只阻止某个网站的弹出窗口？右键点击并选择"编辑站点首选项"
Widget- 使您的桌面体验更有趣的小网络应用程序（多媒体、新闻推送、游戏以及更多）。使用 Widget 菜单可以发现新的 widget 并找到您最喜欢的。更强大的富文本编辑功能 – 在当今最流行的网络应用程序上使用先进的文本编辑功能。
下载管理器- 通过一个简单的下载管理器窗口您可以查看下载进程并访问所有您下载的内容。
标签式浏览- 使用相同的应用程序窗口打开多个网页可以使浏览更简单、更快速。
密码管理器- 密码管理器可以代替您记住您的用户名和密码。
内置搜索- 使用内置的搜索栏可以搜索 Google、eBay、Amazon 以及更多网站。您也可以使用关键字（比如 Google 用“g“）直接在地址栏内进行搜索。
阻止弹出窗口- Opera 允许您控制是否阻止所有弹出窗口，或打开您所请求的那些弹出窗口。
鼠标手势- [...]
Posted by 火恋の神父 on 07月 20th, 2008 :: Filed under
网络新闻Tags ::
css,
google,
XHTML,
下载,
免费,
图标,
工具,
广告,
手机,
更新,
样式表,
游戏,
相册,
移动,
聊天,
视频,
设计,
软件,
链接
习,但感觉太难了
而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习
1.学习方式
我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当然它们做的也不一定全对,就算淘宝,我发现它们的CSS里面也有不少的多余代码,我曾经从淘宝的网页代码里面学到不少的东西,我把基本的框架保留下来,然后分析,并且我将我的分析记录了下来,你可以在这里查看：
http://www.dayanmei.com/blog.php/ID_536.htm
2.练习方式
在了解到一些基本的布局方式,以及一些容器的属性之后,可以尝试自己,编写一些简单的布局,遇到出现问题的时候,可以在google搜索一下,或者想\象理想论坛以及其他一些讨论标准化的论坛询问一下,会有很多好心人的哦
3.一本手册
在遇到问题的时候或者对某个属性不是很了解,或者对于属性的兼容性不太清楚的时候,这就有很大的作用了
手册可以去这里下载
http://www.w3cn.org/resource/down/2004/73.html
4.多写多练
你发现自己多写了几个布局,或者出了一些问题并解决后,你已经基本掌握了布局的要点了.
如何学习标准化
1、几本书、几个网站、几篇贴子、几个blog
《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。
《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。
《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。
《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。
《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。
《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。
网站设计师 最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。
蓝色理想标准化专版 这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习氛围略显浮躁，没有深入理解停留在css表现层次的朋友较多。
CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了，等待站长再次开放吧。
网易 作为门户网站里较早采用web标准的站点之一，其最新版本很值得研究。
下面是一些web标准届牛人朋友的blog，跟着他们能学习很多，而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。
http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/
2、如何学习
读写
读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照着书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。
改动
改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。
睡觉
睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对定位呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。
收藏
好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。
实践
作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。
Posted by 火恋の神父 on 04月 19th, 2007 :: Filed under
技术交流Tags ::
css,
DIV,
google,
Javascript,
XHTML,
下载,
代码,
制作,
学习,
工具,
技巧,
样式表,
空间,
解决,
设计
RSS 订阅本站
Twitter!
新浪微博
