介绍自制本地html文档，作为浏览器导航页面，使用图片和渐变色进行美化。效果如图。
工具/原料
1
文本编辑器
2
一些图片
方法/步骤
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属性设置一个从上到下，从透明到黑色的渐变色，如图。
6
在代码中，在每个class为box的盒子中，再加入class为tag的div盒子。内嵌一个class为links的标签。完成效果如图，每一行图片的下半部分设置有自己的一个从底部向上渐渐透明的渐变色。
7
用到的图片，都存在html文件旁边名为pics的文件夹下。选择一些合适的图片使得总体效果美观。
注意事项
1
本经验是作者入门所写，可能不是最好的做法，一些地方可能会有更好的实现方式。
2
由于各个盒子的background属性不同，但我希望他们background-size一样，我尝试在头部用class只批量定义其子属性background-size发现未成功，所以只好写在各个标签的style里了。
上一篇：美颜相机怎么加萌表情