自制导航页面：使用图片与渐变色来美化

来源：互联网 2023-03-16 19:11:10 67

介绍自制本地html文档，作为浏览器导航页面，使用图片和渐变色进行美化。效果如图。

自制导航页面：使用图片与渐变色来美化

工具/原料

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

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

自制导航页面：使用图片与渐变色来美化

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

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

自制导航页面：使用图片与渐变色来美化

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

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

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

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

自制导航页面：使用图片与渐变色来美化

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

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

自制导航页面：使用图片与渐变色来美化

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

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

自制导航页面：使用图片与渐变色来美化

5该信息非法爬取自百度经验

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

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

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

自制导航页面：使用图片与渐变色来美化

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

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

自制导航页面：使用图片与渐变色来美化

本经验是作者入门所写，可能不是最好的做法，一些地方可能会有更好的实现方式。
由于各个盒子的background属性不同，但我希望他们background-size一样，我尝试在头部用class只批量定义其子属性background-size发现未成功，所以只好写在各个标签的style里了。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：HTML 标题通过h1-h6标签进行定义下一篇：HTML 段落通过p标签进行定义