【Web前端实操17】导航栏效果——滑动门

滑动门

定义：

类似于这种：

滑到导航栏的某一项就会出现相应的画面，里面有对应的画面出现。

箭头图标操作和引用：

像一些图标，如果需要的话，可以找字体图标，比如阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库

选择一个——>添加至购物车——>下载代码

因为我需要的是一个箭头图标，用于完成实操。

下载之后可以将这两个文件复制到相应的文件夹下，方便引用

在进行引用的时候，要根据所给的文件进行引用：

找到以html为后缀名的文件，点开，找到font-class，上面会有教你怎么应用的方式方法

至于" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。可以找到上面的名字，将icon-xxx替换掉就行

代码一些小辨析：

1、background-color和background的区别

这两者主要是继承性的关系：

background-color 是用来设置元素的背景颜色，默认无继承性，其背景颜色不会填充元素的的外边距，而是填充内容、内边距和边框区域以及元素边框的外边界；
background 则是可以设置所有的背景属性

其常见属性如下：

background的常见属性