用flex响应式布局复原bilibli导航栏😶‍🌫️

玖玖passion
285 阅读5分钟

前言

页面响应式布局是我们大概率会被问到的,也是我们应该介绍的时候要提一嘴的！我在刷b站的时候看到了有关响应式布局的知识,便跟着博主复原了bilibli导航栏！

image.png

响应式布局

在我们实际开发中,制作的页面如果不用响应式布局的话那么点击检查的时候会出现以下的效果！！

image.png

这是页面的实际效果,这很整齐。但我们在开发过程中需要点击右键对页面进行检查,以便调样式。如果我们不进行响应式布局的话会出现如下图的结构！！

image.png

这样实在是太丑了！！影响美观是一方面,妨碍调试也是一方面！！

bilibli导航栏的实现

html部分

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>my-bilibli-nav</title>  
<link rel="stylesheet" href="css/style.css">  
</head>  
<body>  
<nav>  
     <div class="link-group">  
        <a href="">  
          <img src="src/bilibili.png" alt="" style="width: 100px ;height: 100px">  
        </a>  
        <a href="#">  
         首页  
          <img src="" alt="">  
        </a>  
        <a href="#">番剧</a>  
        <a href="#">直播</a>  
        <a href="#">游戏中心</a>  
        <a href="#">会员购</a>  
        <a href="#">漫画</a>  
        <a href="#">赛事</a>  
        <a href="#">  
           <img src="src/xiazai.png" alt="" style="width: 20px ;height: 20px">  
         下载客户端  
        </a>  
      </div>  
     <div class="search">  
        <input type="text" placeholder="黑神话悟空">  
        <img src="src/fangdajing.png" alt="" style="width: 20px ;height: 20px">  
     </div>  
     <div class="btn-group">  
       <a href="">  
  
        <img src="src/wodedahuiyuan.png" alt="" style="width: 20px ;height: 20px">  
        <span>大会员</span>  
       </a>  
       <a href="">  
  
        <img src="src/xiaoxi.png" alt="" style="width: 20px ;height: 20px">  
        <span>消息</span>  
       </a>  
       <a href="">  
  
        <img src="src/dongtai.png" alt="" style="width: 20px ;height: 20px">  
        <span>动态</span>  
       </a>  
       <a href="">  
  
       <img src="src/shoucang.png" alt="" style="width: 20px ;height: 20px">  
       <span>收藏</span>  
       </a>  
       <a href="">  
  
       <img src="src/lishijilu.png" alt="" style="width: 20px ;height: 20px">  
       <span>历史</span>  
       </a>  
      <a href="">  
  
      <img src="src/chuangzuozhongxin.png" alt="" style="width: 20px ;height: 20px">  
      <span>创作中心</span>  
      </a>  
      <a href="">  
  
      <img src="src/tougao.png" alt="" style="width: 20px ;height: 20px" >  
      <span>投稿</span>  
      </a>  
  </div>  
</nav>  
</body>  
</html>

这页面布局还是比较简单的,导航栏我们可以nav标签包裹,然后很显然分为为了三个部分。我用三个div盒子进行包裹。它们类名分别取为link-group、search、btn-group。顾名思义从类名来看就能得出它们所代表的含义。好啦我们来看看具体的css样式吧！！

:root{  
--color-nav-link:#18191C;  
--color-nav-btn: #61666d;  
--color-anv-btn-back: #fb7299;  
--color-nav-search:#f1f2f3;  
--font-size-nav-link:14px;  
--font-size-nav-btn:13px;  
--gap-nav:20px  
}  
*{  
margin: 0;  
padding: 0;  
user-select: none;  
text-decoration: none;  
white-space: nowrap;  
transition: all 0.3s ease;  
}  
nav {  
display: flex;  
justify-content: space-between;  
align-items: center;  
height: 64px;  
padding: 0 24px;  
}  
nav div.link-group{  
display: flex;  
justify-content: space-between;  
align-items: center;  
gap: var(--gap-nav);  
}  
nav div.link-group a:first-child img {  
width: 59.98px;  
aspect-ratio: 1/1;  
}  
nav div.link-group a:nth-child(2) img {  
margin-left: 5px;  
}  
nav div.link-group a:last-child img {  
margin-right: 5px;  
}  
nav div.link-group a{  
display: flex;  
justify-content: center;  
align-items: center;  
color: var(--color-nav-link);  
font-size: var(--font-size-nav-link);  
}  
  
nav div.search{  
display: flex;  
justify-content: space-between;  
align-items: center;  
width: 25%;  
background-color: var(--color-nav-search);  
padding: 10px 15px;  
border-radius: 8px;  
border: 1px solid #e3e5e7;  
}  
nav div.search input[type="text"] {  
background-color: transparent;  
border: none;  
outline: none;  
width: 90%;  
}  
nav div.btn-group{  
display: flex;  
justify-content: center;  
align-items: center;  
gap: var(--gap-nav);  
}  
nav div.btn-group a{  
color:var(--color-nav-btn);  
font-size:var(--font-size-nav-btn);  
(--font-size-nav-btn);  
}  
nav div.btn-group a:not(:last-child) img{  
display: block;  
margin: 0 auto;  
}  
nav div.btn-group a:last-child{  
display: flex;  
justify-content: center;  
align-items: center;  
width: 90px;  
height: 34px;  
background-color: var(--color-anv-btn-back);  
border-radius: 8px;  
color: #FFFFFF;  
}  
nav div.btn-group a:last-child img{  
filter: invert(100%);  
}  
nav div.btn-group a:first-child img{  
width: 38px;  
height: 38px;  
object-fit: cover;  
border-radius: 50%;  
}  
@media (width<1366px) {  
:root{  
--gap-nav: 10px;  
  
}  
}  
@media (width<=1280) {  
nav div.link-group a:last-child,  
nav div.btn-group span{  
opacity: 0;  
width: 0;  
height: 0;  
}  
nav div.btn-group a:last-child{  
width: 34px;  
  
}  
  
nav div.btn-group a{  
display: flex;  
}  
}  
@media (width<800px) {  
nav div.btn-group a:not(:first-child){  
width: 0;  
height: 0;  
}  
nav div.btn-group{  
gap: 0;  
}  
}  
@media (width<=600px) {  
nav div.search{  
width: 0;  
height: 0;  
}  
}

我们来分析下css吧！！通过使用:root选择器，这些变量可以在整个文档中的任何地方被引用和使用。:root代表文档的根元素，因此它的作用范围覆盖整个页面。这段css中运用了后代选择器如:nav div.link-group。 nav是元素选择器用于匹配所有的nav元素。div.link-group是一个组合选择器,div是元素选择器用于匹配所有的div元素。.link-group：类选择器，匹配所有具有 link-group 类的元素。对于nav div.link-group a:first-child img 是一个组合了多个选择器的复杂CSS选择器。nav div.link-group a:first-child img 是一个组合了多个选择器的复杂CSS选择器。 nav:元素选择器，匹配所有 

元素。这通常用于网站的导航栏。div.link-group: 组合选择器，包括：div：元素选择器，匹配所有的 
 元素。.link-group：类选择器，匹配所有具有link-group类的元素。整体来说，div.link-group会匹配所有带有 link-group类的 
 元素。 a:first-child: a：元素选择器，匹配所有的 a（锚）元素。 :first-child：伪类选择器，匹配作为其父元素的第一个子元素的 a 元素。这意味着只有当 a是它的直接父元素的第一个子元素时才会被选中。 最重要的部分是媒体查询部分

    @media (width<1366px) {  
:root{  
--gap-nav: 10px;  
  
}  
}  
@media (width<=1280) {  
nav div.link-group a:last-child,  
nav div.btn-group a span{  
opacity: 0;  
width: 0;  
height: 0;  
}  
nav div.btn-group a:last-child{  
width: 34px;  
  
}  
  
nav div.btn-group a{  
display: flex;  
}  
}  
@media (width<800px) {  
nav div.btn-group a:not(:first-child){  
width: 0;  
height: 0;  
}  
nav div.btn-group{  
gap: 0;  
}  
}  
@media (width<=600px) {  
nav div.search{  
width: 0;  
height: 0;  
}  
}

总而言之我们可以根据屏幕的不同的宽度来进行样式的修改,<1366px：减少了导航栏中元素之间的间距，使布局更加紧凑。 <= 1280px：隐藏了导航栏中的一些链接和按钮组中的文本标签，并调整了按钮的宽度和显示方式。 < 800px：隐藏了按钮组中的多余按钮，并去掉了按钮之间的间距。 <= 600px：隐藏了搜索框，以节省空间。这种做法确保了网站在不同设备和屏幕尺寸下都能提供良好的用户体验，避免了内容溢出或布局混乱的问题。 好啦今天就分享到这里啦！！请大家多多关注哈~！！

avatar
文章
阅读
粉丝