制作网页头部固定悬浮的导航栏

昨天对于做的一个实验室网站首页在研究头部的固定导航栏的样式和问题。 写了下面这个博客

Vue中使组件置顶后悬浮_Eric加油学！的博客-CSDN博客

虽然，整体的功能都实现了（颜色和间距等后续也调整了）。但是总感觉有点丑，所以一直在思考要搞成什么样式能看起来好看点。 于是，我今天就对它进行了一个修改，修改后如下图：

修改内容：

1. 相对于上一版的上下结构，我这次把它全部放在一排，这样看着更充实舒服一点。

2. 其次我放入了一个背景图，然后头部的导航栏的背景我用了一个渐变色的样式，从蓝色逐渐变为透明，固定在了顶部悬浮。

3. logo放在了左上角，然后预留了一些位置，因为后面还要加入一个logo进来。 中间为menu栏。

 css样式实现渐变色

    .head{
        background-image: linear-gradient(to bottom,#2370b7,transparent);
        position: fixed;
        z-index: 999;
        opacity: 0.7;
    }

其他的属性都省略了，主要就是这么几个。  

主要实现就是靠 background-image 。我这里是上下渐变，还可以左右，甚至还可以有角度。第二个参数就是初始颜色，第三个参数是渐变后的颜色。我一开始是蓝色到白色的渐变，但总感觉差了点味道。后面一想，既然要悬浮，为什么不渐变为透明色！ 并且我将整个头部导航栏的透明度也调到0.7 。这样浏览下面的内容不会使悬浮的导航栏过于生硬。

 

el-menu消除下边距

Menu栏我直接用了Element UI里的组件el-menu。其中最头疼的是，底层封装了很多样式属性，而它的文档中有没有全部写到，比如它默认el-menu会有一个白色的下边距，在我这个显示里肯定很突兀。 后来查了才知道要这么设置

    .el-menu--horizontal{
        border: none;
    }

还有其他的样式属性，也是一点点查了才知道怎么修改的。

---

还有一点是用了element ui里的搜索按钮Search button，也是不知道为什么渲染不出来，我就改换了iconfont，后续再自己加js代码。