学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45755816/article/details/122515520

学完css，做了一个csdn导航栏，内容满满

步骤
知识点
完整代码

番外：本来打算做个导航栏想复习总结下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.youkuaiyun.com/"> 博客 </a> 
             </li>
             <li title="马上开始系统学习"><a href="https://www.youkuaiyun.com/"> 课程 </a></li> 
             <li title="文库商城"><a href="https://www.youkuaiyun.com/"> 文库商城 </a></li>
             <li title="技术问题、有问必答"> <a href="https://www.youkuaiyun.com/"> 问答 </a> </li>
             <li title="找到志同道合的伙伴"> <a href="https://www.youkuaiyun.com/"> 社区 </a> </li>
             <li title="安装你的浏览器助手"> <a href="https://www.youkuaiyun.com/"> 插件 </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