html nav均匀分布的粘性导航栏

有三个月没真正做前端页面的了，今天记录一下导航条的制作》》》

 <nav class="app_header"><div class="app_header_nav"><ul class="app_header_ul header_ul"><li ><router-link to="/">首页</router-link></li><li ><router-link to="/prod">产品</router-link></li><li ><router-link to="/equipm">设备</router-link></li></ul></div></nav>

<router-link></ router-link>组件是渲染为可以连接的<a><a>标签(这个是vue框架的组件) 可以换成<a></a>标签

css:

 html,body,ul,li{ margin:0; padding:0; }
.app_header{  width:100%;  height:48px;  position: sticky;  top: 0;  line-height:48px;  background: #333;  opacity: 0.8;  z-index: 999;  }
.app_header_nav{  max-width:980px;  height:48px;  margin:auto;  padding:0 22px;  }
.app_header_ul{  list-style-type:none;  flex-wrap: wrap;  background: #333;  height: inherit; }
.app_header_ul li{  text-align: center;  flex-basis:100px;  padding: 0 10px;  display: inline-block;  white-space: nowrap;  }
.header_ul{text-align:justify;}
.header_ul:after{width:100%;height: 0;margin: 0;display: inline-block;content:' ';}
a{  text-decoration: none;  color: seashell;  }

css样式我就简单的解释一下，我也是半桶水的，有什么不对的，请评论留言，感谢！

position: sticky;//这个是粘性定位，也就是相对定位relative和固定定位fixed的结合（详细可以百度）

text-align:justify;//这个对齐方式是两边对齐

content:' ' ;//该属性用于定义元素之前或之后放置的生成内容，我这里是定义之后

其他的我想大家都大部分都会用了

虽然我这里是用了vue 框架，放到html页面也可以用，要灵活操作哦，不要全都是复制粘贴，这样不利于你成长，要理解 >>>

效果图：

在页面html中加入：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

粘性效果+均匀分布 +透明

html nav均匀分布的粘性导航栏相关推荐

使用 CSS 构建自定义粘性导航栏
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式. 人们通常将导航栏放在页面的最顶部,但如果它与您的设计相得益彰,您也可以在网页的任一侧放置导航栏.导航栏可以是导航项目的水平列表,也可以是小屏幕 ...
ios 获取nav高度_ios 获取导航栏和状态栏高度，针对iPhoneX
因为iPhoneX的产生,原本的导航栏再也不是44了,那么会出现什么问题呢?在隐藏导航栏的页面,原本的高度要向上调整一个导航栏+状态栏的高度.那么iPhoneX的导航栏高度不是44了,我们需要手动获取 ...
navbar fixed top.css,Bootstrap个人博客给nav设置navbar-fixed-top定位后导航栏遮盖内容完美解决方案！...
这也是我在使用Bootstrap3开发完美解决方案一:使用两个导航占位大致意思就是给页面设置两个导航nav一个是空的导航栏一个则是设置navbar-fixed-top的导航栏 .......... ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
HTML网页入门练习——导航栏布局设计
导航栏布局实现如下导航栏: 首先进行页面需求分析,如图所示导航栏分为三部分,包括标志.导航.用户按钮.为了使结构看起来明显,我们使用色块表示,确保结构正确之后再往里面填充内容. 具体步骤如下: (1 ...
ios底部栏设计规范_设计干货：底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...
Bootstrap5 导航栏
导航栏一般放在页面的顶部. 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开, ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...

html nav均匀分布的粘性导航栏

html nav均匀分布的粘性导航栏相关推荐

最新文章

热门文章