一个优质的站点应该是很注重用户体验的,其中对用户来说最直接的感受不外乎这几个方面:
- 结构式清晰直观的,操作简单;
- 界面是美观大方的,视觉良好;
- 访问速度是快速的,等待时间短。
访问速度是一个十分重要的方面,只要稍微懂得一些站点设计知识的人就会知道,为了优化站点访问效率则要尽量减少对图片的使用,如果必须要用到图片,那么需要对图片进行优化处理,使其在不影响视觉效果的情况下是最小的。
同时我们知道,网页标准化设计提倡使用CSS控制页面的表现的,这样就在很大程度上减少了图片的下载次数从而大大降低了服务器的负荷、加快了页面的打开速度,提高了用户达体验。
其实,这还不是最理想的手段。——很多时候,我们还可以在以上基础上对页面进行进一步的优化处理。举个简单的例子,我们可以把很多的小图片集成到一张图片里面,然后用CSS控制需要显示的部分将其展示出来即可——实际上只需要下载一次。关于这方面的例子可以查看新浪网首页的图片运用。
另外,为了增强用户体验我们经常在页面中使用圆角效果。一般的情况下都会想到事先做好圆角效果的图片然后进行分割进行处理,这是最基本的做法。其实Firefox给我们提供了圆角的样式,十分好用——但是此处不推荐使用,因为IE浏览器目前还不支持,这就在显示效果上出现了差异。
下面很实用网站谈谈用CSS方法实现的圆角效果的办法。
原理:我们知道,把一张圆角效果的图片放大到一定的倍数的时候,我们会看到实际上每个边缘呈现出来的圆角(“毛边”效果)是按照一定的规律减少一定像素来实现的。在这个理论的指引下,我们就有了CSS实现圆角效果的办法。
下面给出最简单的一个例子,点击查看运行效果:
另外本人用CSS模拟出百度知道的CSS效果样式,点击这里查看效果。
通过这样的例子,我们多家练习,自然会制作出更多更复杂的圆角效果,比如这个例子,点击查看。







