番外:本来打算做个导航栏想复习总结下vue-router知识的,但又没啥灵感。在逛csdn时,灵光一现,就想做个csdn的导航栏。这篇文章就介绍一下单纯用css做的导航栏样式吧(完整代码在最后)。下次再写用vue-router来实现导航栏的跳转。
步骤
先观察一下csdn导航栏,整体部分:宽度占满,高度合适, 滑动吸顶。下面有阴影
左边部分:最左边是logo(首页)然后是博客、课程、社区等等,
中间部分:搜索栏,聚焦之后会变长
右边部分:用户头像、鼠标移上去显示详细信息,收藏、消息、创作等
1、导航栏框架
首先导航栏一直位于上面,所有相对于视窗口定位,也就是position: fixed;
position相关内容在后面知识部分,这里就不说了。
<style>
#navbar{
position: fixed;
z-index: 2001;
top: 0px;
width: 100%;
left: 0px;
font-size: 14px;
/* 字体粗细,400相当于normal */
font-weight: 400;
color: #222226;
background-color: #fff;
/* 阴影 水平阴影距离,垂直阴影距离, 模糊尺寸, 阴影尺寸 颜色*/
box-shadow:0 2px 4px 0 rgb(0, 0, 0,5%);
}
.navbar-container{
width: 100%;
/* 最小宽度,窗口缩小之后到1280px不会再缩小 */
min-width: 1280px;
box-sizing: border-box;
padding: 0 24px;
margin: 0 auto;
height: 48px;
line-height: 48px;
display: flex;
justify-content: space-between;
-webkit-box-pack: justify;
}
</style>
<body>
<!-- 导航栏所占普通流位置 -->
<div id="navbarBox" style="min-height: 48px;">
<!-- fixed定位后的导航栏 -->
<div id="navbar">
<!-- 导航栏容器 -->
<div class="navbar-container">
<!-- 导航栏上的内容-->
<div class="navbar-container-left"></div>
<div class="navbar-container-middle"></div>
<div class="navbar-container-right"></div>
</div>
</div>
</div>
<div>这是页面</div>
</body>
2、导航栏左边部分
logo、博客、课程、文库商城、问答等,并且鼠标放上去会变成手式样式。
所以左边部分也可以分成两部分,一部分是logo,一部分博客、课程、文库商城、问答等
<div class="navbar-container-left">
<!-- csdn的logo -->
<div class="logo">
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="">
</div>
<!-- logo右边的部分 -->
<ul class="left-ul">
<li class title="阅读深度、前沿文章">
<a href="https://www.csdn.net/"> 博客 </a>
</li>
<li title="马上开始系统学习"><a href="https://www.csdn.net/"> 课程 </a></li>
<li title="文库商城"><a href="https://www.csdn.net/"> 文库商城 </a></li>
<li title="技术问题、有问必答"> <a href="https://www.csdn.net/"> 问答 </a> </li>
<li title="找到志同道合的伙伴"> <a href="https://www.csdn.net/"> 社区 </a> </li>
<li title="安装你的浏览器助手"> <a href="https://www.csdn.net/"> 插件 </a> </li>
</ul>
</div>
再来设置样式
.navbar-container-left{
/* 元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器 */
flex: none;
}
.logo{
position: relative;
float: left;
margin-right: 8px;
/* 当箭头鼠标移到会变成手式鼠标 */
cursor: pointer;
}
.logo img{
width: 80px;
max-width: 80px;
height: 44px;
display: block;
/* cacl()将img放在盒内的高的中间 */
margin-top: calc((48px - 44px)/ 2);
}
.left-ul{
width: auto;
height: 100%;
/* 去除li中的间隙,在li中要设置font-size,否则没有内容 */
font-size: 0px;
float: left;
}
.left-ul li{
position: relative;
display: inline-block;
font-size: 14px;
height: 100%;
line-height: 48px;
}
a{
color:#000;
padding: 0 10px;
/* 删除a标签的下划线 */
text-decoration: none;
}
/* 鼠标停留时的样式,通过:hover来设置 */
.left-ul li:hover{
background-color: #eee;
}
看下效果
3、导航栏中间部分
中间部分就是一个搜索框加上左边的按钮,搜索框聚焦的效果在后面通过js代码加上。
<div class="navbar-container-middle">
<div class="navbar-search-container">
<!--搜索框-->
<input type="text" autocomplete="off" id="search">
<!--按钮-->
<button>
<!--图标-->
<i></i>
<span>搜索</span>
</button>
</div>
</div>
样式
.navbar-container-middle{
padding: 0 40px;
flex: 1;
}
.navbar-search-container{
width: 100%;
max-width: 720px;
height: 32px;
line-height: 32px;
margin-top: calc((48px - 32px)/ 2);
box-sizing: border-box;
font-size: 0px;
margin-left: auto;
margin-right: auto;
}
.navbar-search-container input{
font-size: 14px;
display: inline-block;
width: calc(100% - 88px);
height: 100%;
line-height: inherit;
/* 为了后面聚焦搜索框样式,将边框外围线清除 */
outline: 0;
background: #f5f6f7;
color: #222226;
/* 元素垂直对齐方式 */
vertical-align: top