有三个月没真正做前端页面的了,今天记录一下导航条的制作 》》》
<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>
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页面也可以用,要灵活操作哦,不要全都是复制粘贴,这样不利于你成长,要理解 >>>