网赚论坛

标题: 大大改善用户体验的10个小细节 [打印本页]

作者: jxt09937mhz 时间: 2017-9-20 19:43
标题: 大大改善用户体验的10个小细节
　以下是我做美工的两年生活中一条条总结出来的经验，每一点都是我常用的，虽然不是什么大学问，但我觉得要互相学习才能提高，所以现在拿出来和大家一起分享，如果你觉得实用就拿去试试，然后留个评论，我就很高兴了，不喜欢的可以路过。费话少说，下面正式开始。
　　1.加载大图片时，显示loading小图片。
　　这招是我最常用的。当我们要加载一张比较大的图片时，如果能加载图片的同时，显示loading的小图片，那样看起来就人性化很多。当加载完成时，图片会盖住loading小图片，这是一个很有用的小技巧，我的每个网站都加上了这个功能，不信你可以到这个页面看，http://www.82xuexi.cn/html/2008-09/245.htm这个页面是我专门做来演示这个示例的，上面我放了一张很大的图片，应该可以看清加载过程。要实现这个小功能，只要在网站的公共样式表上添加下面这个样式，就可以实现了。
　　img {
　　background-image:url(loading.gif);
　　background-position:center;
　　background-repeat:no-repeat;
　　}
　　解释一下上面的代码，懂CSS的站长可以略去这段。第一行“img”指向页面的全体图片元素(看到样式表的优势了吧，只要一句，就能作用于网站的全体同类元素，不是DIV+CSS的网站站长是不是有想法了?呵呵)。第二行“background-image:url(loading.gif);”是指为图片添加一个以图片为背景的背景(读起来有点拗口)。这个loading.gif是你要你自己上传的加载小图片。不过有些网站的images文件夹里已经有这个图片了，直接用就行，如果你确实不想到处找的话，我这里有一堆，选一个你喜欢的玩玩吧：http://www.82xuexi.cn/html/2008-09/333.htm。第三行：background-position:center;把背景图片居中，这样看起来比较顺眼。第四行：background-repeat:no-repeat;就是让loading.gif小图片只显示一个，如果没有这句，就用出现很多排列起来的loading.gif小图片，这要注意一下。

<div class="content_hidden" id="J_need_reply">本部分内容设定了隐藏,需要回复后才能看到

欢迎光临网赚论坛 (http://www.caifuba.net/)