10 minor details that greatly improved the user experience

17 Jul 2017 admin

The following is

I do art two years a life experience, every point is what I used, although not what university asked, but I think we should learn from each other to improve, so now out to share with everyone, if you think practical try it, then leave a comment, I very happy, love can not pass. Speak words, following a formal start.


1. loads large pictures, displays loading small pictures.

, this is my favorite. When we want to load a larger picture, if we can load the picture and display the small pictures of loading, it looks humane. When the loading is completed, the picture will cover the loading small picture, this is a very useful tips, each site I added this function, you can go to this page, this page is the http://s.82xuexi.cn/html/2008-09/245.htm I made to demonstrate this example above, I put a lot of the picture, you can see the process of loading should be. To implement this small feature, you can implement the following style as long as you add the following style on the site’s public style sheet.

img {

background-image:url (loading.gif);




explain the above code, understand CSS webmaster can omit this paragraph. The first line of the picture element "img" pointing to the page (see the advantages of style sheets of it, as long as the words, can effect all similar elements, not on the website of the DIV+CSS webmaster is not mind? Ha ha). Second "background-image:url (loading.gif);" refers to add a picture as the background to the background picture (read a mouthful). This loading.gif is a small loaded picture that you want to upload yourself. But some of the site’s images folder has this picture, directly on the line, if you do not want to find it, here I have a pile of, choose the one you love playing with it: http://s.82xuexi.cn/html/2008-09/333.htm. The third line: background-position:center; put the background picture centered so that it looks more pleasing to the eye. The fourth line: background-repeat:no-repeat; that is, let the loading.gif small picture show only one, if not, >