FLex布局实现导航

来源：互联网发布：网络攻防入门编辑：程序博客网时间：2024/05/17 06:45

一、要点

1、display: flex;

2、justify-content: center;

3、align-items: center;

4、justify-content: space-between;

5、width: calc((100% - 1336px)*0.57);

二、部分代码

1、html

<div class="nav">
           <div class="nav_left"></div>
           <div class="logo">
               <img src="img/logo.png" width="168px"/>
           </div>
           <div class="self-adaption_1">

           </div>

           <div class="items">

               <div class="item"><a style="color: white;" class="show_1" href="index.html"> 首页</a></div>
               <div class="item"><a href="#">产品与服务</a></div>
               <div class="item"><a href="#">关于我们</a></div>
               <div class="item"><a href="#">联系我们</a></div>

           </div>


           <div class="self-adaption_2">


           </div>

           <div class="login">

               <div class="teacher">
                   <a href="">教师登录</a>
               </div>

               <div class="student">
                   <a href="">学生登录</a>
               </div>

           </div>

           <div class="nav_right"></div>

       </div>

2、css

body{
   margin: 0;
   padding: 0;
}

.nav{
   width: 100%;
   height: 98px;
   display: flex;
   border-bottom: 2px solid #00529C;
}

.nav_left{
   width: 80px;
   height: 98px;
}

.logo{
   width: 168px;
   height: 98px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.self-adaption_1{
   height: 98px;
   width: calc((100% - 1336px)*0.57);
}

.items{
   width: 700px;
   height: 98px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.item{
   width: 144px;
   height: 38px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 18px;
}

.item a{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   text-decoration: none;
   color: #666666;
}

.item a:link{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   text-decoration: none;
}

.item a:visited{
   width: 144px;
   height: 38px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #00529C;
}

.item a:hover, .item a:active{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   background-color: #00529C;
   text-decoration: none;
   color: white;
   border-radius:18px;
}

.show_1{
   font-size: 24px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   background-color: #00529C;
   text-decoration: none;
   color: white;
   border-radius:18px;
   display: block;
}

.self-adaption_2{
   width: calc((100% - 1336px)*0.43);
   height: 98px;
}

.login{
   width: 308px;
   height: 98px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.teacher{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   border-radius: 18px;
}

.teacher a{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   color: white;
   background-color: #E6433E;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   text-decoration: none;
   border-radius: 18px;
}

.teacher a:hover{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   color: white;
   background-color: red;
   text-decoration: none;
   color: white;
   border-radius:18px;
}

.student{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   border-radius: 18px;
}

.student a{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   color: white;
   background-color: #2790CA;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   text-decoration: none;
   border-radius: 18px;
}

.student a:hover{
   width: 144px;
   height: 38px;
   font-family: "microsoft yahei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   color: white;
   background-color: #00529C;
   text-decoration: none;
   color: white;
   border-radius:18px;
}

.nav_right{
   width: 80px;
   height: 98px;
}

阅读全文

1 0