蓝桥杯前端Web赛道-自适应页面

蓝桥杯前端Web赛道-自适应页面

题目链接：1.自适应页面 - 蓝桥云课 (lanqiao.cn)

先看题目要求：

简单的来说就是需要完成上面规定的布局和要求当800px及以下的时候要显示移动端布局来完成下面gif的效果，那么我们先一步一步来

首先想到的就是使用媒体查询来完成当800px的时候改变页面的布局

媒体查询通俗易懂的来说就是可以针对不同的屏幕尺寸设置不同的样式，非常符合当前题目的要求。它是css3出现的新语法，以下链接可以学习它的用法

@media - CSS：层叠样式表 | MDN (mozilla.org)

确定了大概的方向之后，我们再来观察这个页面需要我们做什么事情，先通过

控制台的这个地方帮助我们调到800px的大小

通过观察和对比可以发现

• 需要将导航栏从横向排列变成了竖向排列
• 以及下面的文字和图片应该从横向排列变成竖向排列

容易想到使用flex布局来完成要求，这样能够快速并且不添加冗余的代码来完成要求

那么我们先改变导航栏和下面内容的排布

值得注意的是第44行左右有媒体查询的语法，即使不记得也可以复制一份

@media (max-width: 800px) {
  .collapse,
  .row {
    display: flex;
    flex-direction: column;
  }
}

以上代码的效果如下

虽然布局大体相同，问题在于题目要求点击了一个三横线的按钮然后才会展开这个菜单，那么我们可以利用display:none先隐藏这个导航栏，然后通过这个导航栏再控制菜单出现即可。

请注意题目中有提到过

打开控制台找到该类名之后可以发现它被隐藏了

由于我们只需要那三根横线的图标，所以只把一个打开即可，记住要在媒体查询的括号里面书写以下代码

 label.menu-btn {
    display: block;
    height: 54px;
  }

此时出现了我们想要的图标，根据题目的要求将它的高度设置为54px，题目并没有要求按钮显示的位置所以可以不用管它。然后我们再隐藏下面的菜单

修改刚刚的代码，于是现在的代码就变成

@media (max-width: 800px) {
  .collapse {
    display: none;
  }
  .row {
    display: flex;
    flex-direction: column;
  }
  label.menu-btn {
    display: block;
    height: 54px;
  }
}

这个时候我们通过观察页面可以发现，紧邻着按钮的下面有个单选框，当我们在控制台点击按钮的时候，会发现单选框也会被选上，所以通过这个特性我们可以使用在css中使用单选框checked这个动作来控制ul，现在问题在于该怎么使用选择器

以上动画是演示点击按钮可以控制单选框的选中

通过观察dom结构我们可以发现input和我们需要控制的菜单的dom是兄弟关系，有两个选择器可以让我们选择，一个是+一个是~

那么该选择哪个呢，先看这两个选择器的定义

“+” 相邻兄弟选择器
A+B{} 这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，（兄弟的意思就是相邻，可以不是同一种元素）

“~” 兄弟选择器
A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素，但是 B不必直接紧随A。

由于我们需要选择ul这一整个结构，所以我们选择~选择器，其实也可以排除法+不行就用~，忘记定义也可以使用。

于是代码更新为：

@media (max-width: 800px) {
  .collapse {
    display: none;
  }
  .row {
    display: flex;
    flex-direction: column;
  }
  label.menu-btn {
    display: block;
    height: 54px;
  }
  input.menu-btn:checked~ul {
    display: flex;
    flex-direction: column;/*仅仅出现还不够，必须得让菜单一整个按照竖向排列*/
  }
}

现在我们完成了这个功能。接下来还有两个问题需要去解决

• 菜单是浮在内容之上的
• 二级菜单是竖向排列的

浮在内容之上，简而言之就是需要让它脱离标准流，也就是使用定位和浮动来做，不使用浮动的原因是浮动需要标明是左浮动还是右浮动，这里我们的菜单不需要。

完成以上两个要求的代码如下

 .collapse {
   display: none;
   position: absolute;
    background-color: inherit;/*定位会让背景颜色消失，于是直接继承父亲的颜色*/
    width: 100%;/*宽度需要占满整个屏幕*/
  }
   .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

第一组是完成菜单浮动的功能，第二组是完成二级菜单竖向排列的功能，之所以不用子绝父相是因为

原先的代码就已经给我们写好了相对定位，所以我们不需要再写

接下来就该完成整个页面的布局要求了

仔细点用控制台观察计算应该隔开多少距离就行，下面直接给出完整代码

@media (max-width: 800px) {
  label.menu-btn {
    display: block;
    height: 54px;
  }
  .collapse {
   display: none;
   position: absolute;
    background-color: inherit;
    width: 100%;
  }
  .row {
    display: flex;
    flex-direction: column;
  }

  input.menu-btn:checked~ul {
    display: flex;
    flex-direction: column;
  }
  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }
  .menu {
    margin-bottom: 25px;
  }
  #tutorials .row .box {
    margin-bottom: 15px;
    margin-top: 20px;
  }
  #tutorials .row img {
    margin: 0;
  }
}