1、首先，这个导航页面每一横条是一个div分组，每一个图片也在一个div分组。
定义css样式如图，.group对应横条，.box对应一个放置图片的fiv。
2、其中，.box中的display设置为inline-block，这样就会被横着排列。
如果去掉，默认会被纵向排列如图。
3、在body里边，使用div标签确立层级。
并指定各个层级的样式。对于每一个class为box的div标签，设置属性：
style="background:url(图片相对路径); background-size 100% 100%"
这样来设置不同标签的图片，同时使得他们能够全部显示出来（被拉伸）。
4、接下来，设置样式tag。tag负责占据每个图片的下半边，显示一个渐变色。
使用background-image属性设置一个从上到下，从透明到黑色的渐变色，如图。
5、接下来，定义另外两个样式，用于覆盖tag中的渐变色的颜色。
然后定义links样式，用于设置链接(a标签)的字体和颜色。
6、在代码中，在每个class为box的盒子中，再加入class为tag的div盒子。
内嵌一个class为links的<a>标签。
完成效果如图，每一行图片的下半部分设置有自己的一个从底部向上渐渐透明的渐变色。
7、用到的图片，都存在html文件旁边名为pics的文件夹下。
选择一些合适的图片使得总体效果美观。
