介绍自制本地html文档，作为浏览器导航页面，使用图片和渐变色进行美化。效果如图。工具/原料more文本编辑器一些图片方法/步骤1/7分步阅读

首先，这个导航页面每一横条是一个div分组，每一个图片也在一个div分组。

定义css样式如图，.group对应横条，.box对爹级压应一个放置图片的fiv。

2/7

其中，.box中的display设置为inline-block，这样就会被横着排列。

如果去掉，默认会被纵向排列如图。

3/7

在body里边，使用div标签确立层级。

并指定各个层级的样式。对于每一个class为box的div标签，设置属性：

style=background:url(图片相对路径); background-size 100% 100%

这样来设置不同标签的图片，同时使得他们能够全部显示出来（被拉伸）。绵欧

4/7

接下来，设置样式tag。tag负责占据每个图片的下半边，显示一个渐变色。

使用background-image属性设置一个从上到下，从透明到黑色的渐变色，如图。

5/7

接下来，定义另外两个样式，用于覆盖tag中的净墨渐变色的颜色。

然后定义links样式，用于设置链接(a标签)的字体和颜色。

6/7

在代码中，在每个class为box的盒子中，再加入class为tag的div盒子。

内嵌一个class为links的a标签。

完成效果如图，每一行图片的下半部分设置有自己的一个从底部向上渐渐透明的渐变色。

7/7

用到的图片，都存在html文件旁边名为pics的文件夹下。

选择一些合适的图片使得总体效果美观。

注意事项

本经验是作者入门所写，可能不是最好的做法，一些地方可能会有更好的实现方式。

由于各个盒子的background属性不同，但我希望他们background-size一样，我尝试在头部用class只批量定义其子属性background-size发现未成功，所以只好写在各个标签的style里了。

软件HTMLCSS