In the previous three series of articles, I gave a detailed introduction to the nine-square grid layout. Let’s start with a basic layout and explain the problems encountered during the production process one by one. These three articles are all explanations of basic principles. There is no powerful application case to prove whether this principle is correct. Some friends may be a little impatient, and some netizens have asked me to provide cases. Therefore, in this article, I will introduce a case of Jiugongge - a very cool player.
In my third article "The Perfect Nine-Gong Grid with Three Layers of Separation", I introduced using JS to encapsulate html tags to reduce redundant structures, but this method is also flawed. If the user disables JS, This will cause the structure to not be displayed at all. Of course, for today's Internet conditions, this should not be a big problem, but looking at some foreign web page designs, this consideration is necessary. This requires graceful downgrade and functional weakening, but the result is the same as not using JS encapsulation. Therefore, you cannot have your cake and eat it too. Hey, these are all digressions, let’s take a look at how one of our cool players is designed!
First impressions come first, everyone wants to see the results first, okay, let’s show the screenshots first:
Figure 1
Generally, for such a colorful player, the width and height values are required to be dynamically adjusted, so it is a very suitable choice to use a nine-square grid for such graphics.
Of course, I will not reiterate the principle. Please refer to the " Unbreakable Nine-Gong Grid Layout " in my series of articles. This application case is based on it. Of course, there are still some techniques in production that can help us complete the task better. For example, css sprites technology (you can check out my other article " css sprites image background optimization technology ") can beneficially reduce the number of image requests. Generally speaking, for applications with nine-square grid layout, there are more images, because It requires at least eight pictures to decorate the four corners and four sides. Therefore, how to reduce the number of pictures is something designers have to consider.
In this example I merged the four corner images into one image, so they should look like this:
Figure 2
In the picture above, in order to let everyone see more carefully, I drew the junctions of several pictures with auxiliary lines. We applied the principle of picture positioning to fix them at the four corners. They are defined in the style sheet as follows:
.t_l{ background:url(../image/round.gif) no-repeat left top;}
/*upper left corner*/
.t_r{background:url(../image/round.gif) no-repeat right top;}
/*upper right corner*/
.b_l{background:url(../image/round.gif) no-repeat left bottom;}
/*lower left corner*/
.b_r{ background:url(../image/round.gif) no-repeat right bottom;}
/*Lower right corner*/