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

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代码。

制作网页头部固定悬浮的导航栏相关推荐

实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
任务一: 任务1:建立站点并完成页面整体布局任务2:制作网页头部和导航任务3:制作banner和最新更新栏目任务4:制作苹果之家栏目任务5:制作Apple独家栏目任务6:制作底部版权区域与C ...
前端练习静态网页（一）：导航栏
文章目录一静态网页 1.1. 导航栏 1.1.1 不带logo的导航栏实现过程实现效果 1.1.2 带logo的导航栏 1.1.3 导航栏优化字体优化 (未解决)提示效果优化栏目间隔(在1 ...
如果ios头部状态栏挡住了导航栏，能看到内容从下面穿过的解决方法。
如上图,内容从导航栏头顶穿过会显示出来(ios系统).解决方法: https://jingyan.baidu.com/article/0964eca26d9cbd8285f5369f.html htm ...
手机（wap）网页底部固定悬浮广告带轮播特效代码
// 作者:xycms // 网址:http://wwww.jsxyidc.com // 日期:2019-03-3 // QQ:364500483 // code:网页底部悬浮广告代码,带单独关闭va ...
悬浮左侧导航栏html,js + css实现左侧悬浮导航栏
浮在页面上的导航菜单 body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: ...
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
html 悬浮导航窗格,一个靠谱的自动悬浮的导航栏（笔记）
顶部固定菜单 *{ margin:0; padding:0;} .nav-wrapper-fixed{ position:fixed; top:0; width:100%;} .nav-wrapper ...
头部固定悬浮table表头(thead)的方法 (实用、赞）
原文出处:https://www.cnblogs.com/circleline/p/7698249.html (思路见原文) 大概思路: 对页面滚动事件进行监听,当页面向上滚动,表头滚 ...
练习——制作懂车帝-视频播放页面(导航栏定位布局+内容div布局且浮动)
一.代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

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

css样式实现渐变色

el-menu消除下边距

制作网页头部固定悬浮的导航栏相关推荐

最新文章

热门文章