目录
- 一、介绍
- 二、准备
- 三、⽬标
- 四、代码
- 五、完成
一、介绍
响应式布局是在 2010 年 5 ⽉份提出的⼀个概念，这个概念是为解决移动互联⽹浏览⽽诞⽣的。简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。通过响应式布局可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⼤屏幕移动设备的普及，⽤“⼤势所趋”来形容也不为过。因此越来越多的设计师采⽤这个技术。
本题需要在已提供的基础项⽬中，使⽤ CSS 或者 DOM 操作达到 Menu 和内容⻚⾃适应的效果。
二、准备
开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：
├── css
│ └── style.css
├── images
│ ├── C++_course.png
│ ├── linux_course.png
│ └── python_course.png
├── index.html
├─── js
│ └── jquery-3.6.0.min.js
├── default.gif
└── effect.gif
其中：
- index.html 是主⻚⾯。
- css/style.css 是需要补充样式的⽂件。
- js/jquery-3.6.0.min.js 是 jQuery 库⽂件。
- images 是图⽚⽂件夹。
- default.gif 是 PC 端默认效果图。
- effect.gif 是移动端⾃适应效果图。
在浏览器中预览 index.html ⻚⾯，默认 PC 端⻚⾯显示如下所示：
三、⽬标
初始⻚⾯已经具备基础的布局和交互效果，包含 hover ⾼亮，展示⼆级菜单等。效果⻅⽂件夹下⾯的gif 图，图⽚名称为 default.gif （提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。
请通过补全 css/style.css 中代码或结合 jQuery 操作 DOM 的⽅式，达到根据屏幕⼤⼩显示不同布局的效果。
- 以 800px 为界限， 800px 以上显示 PC 端布局，否则显示移动端布局，需要实现移动端布局样式如下：
- 移动端 Menu 由左上侧按钮（即 class 包含 icon-menu 的 label 标签）控制显隐，按钮⼤⼩已
- 经默认提供，⽆需⼿动设置⼤⼩。且 Menu 按钮展示时，需要浮动在内容卡⽚上⽅，不能被遮挡，
- 移动端和 PC 端顶部导航栏⾼度⼀致，均为 54px 。
- 移动端导航栏的菜单项每⼀项独占⼀⾏。
- 显示移动端布局时，卡⽚描述和对应图⽚各占⼀⾏，且都撑满 #tutorials 容器。
移动端⻚⾯展开菜单栏效果如下所示：
最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览gif 图⽚）。
四、代码
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自适应页面</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- 菜单栏 -->
<nav class="menu">
<label for="menu-btn" class="menu-btn icon-menu"></label>
<input type="checkbox" id="menu-btn" class="menu-btn" />
<ul class="collapse">
<li><a href="javascript:void(0)">首页</a></li>
<li class="dropdown">
<a href="javascript:void(0)">课程</a>
<ul>
<li><a href="javascript:void(0)">全部课程</a></li>
<li><a href="javascript:void(0)">学习路径</a></li>
<li><a href="javascript:void(0)">训练营</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">竞赛</a></li>
<li><a href="javascript:void(0)">蓝桥杯</a></li>
</ul>
</nav>
<!-- 页面内容 -->
<div class="page">
<section id="tutorials">
<div class="row">
<div class="text">
<h4>最新课程</h4>
<h3>Linux 基础入门</h3>
<p class="box">
本课程教你如何熟练地使用 Linux，本实验中通过在线动手实验的方式学习
Linux
常用命令，用户与权限管理，目录结构与文件操作，环境变量，计划任务，管道与数据流重定向等基本知识点。
</p>
</div>
<img src="images/linux_course.png" alt="Linux课程封面" />
</div>
<div class="row">
<div class="text">
<h4>热门课程</h4>
<h3>oeasy 教您玩转 python</h3>
<p class="box">
简明易懂的 Python3 课程。从零开始，在 Linux 环境中使用
Vim，一步步带你玩转脚本语言 Python，感受编程的乐趣。
</p>
</div>
<img src="images/python_course.png" alt="Python课程封面" />
</div>
<div class="row">
<div class="text">
<h4>体系课程</h4>
<h3>C++基础入门实战</h3>
<p class="box">
C 语言是面向过程的程序设计语言，而 C++ 语言是由 C
语言演变而来的一种面向对象的程序设计语言。课程实验内容从 C++
语言的概念开始，通过理论学习和实验操作，初步熟知 C++ 语言。
</p>
</div>
<img src="images/C%2B%2B_course.png" alt="C++课程截图" />
</div>
</section>
</div>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
/* TODO: 考生可以根据需要使用 jQuery 实现脚本控制，也可以只使用纯 css 实现 */
</script>
</body>
</html>
css/style.css
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #191620;
}
/* 菜单样式 */
.menu {
background: #252525;
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
box-sizing: border-box;
margin-bottom: 30px;
position: relative;
}
.menu li {
display: inline-block;
}
.menu a {
padding: 16px;
}
.dropdown {
position: relative;
}
.dropdown li a {
display: block;
padding: 8px 16px;
white-space: nowrap;
}
.dropdown ul {
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
padding: 8px 0;
position: absolute;
min-width: 100%;
}
input.menu-btn,
label.menu-btn {
display: none;
}
@media (max-width: 800px) {
.collapse {
border-top: 1px #959595 solid;
}
}
.menu li,
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu a {
color: #959595;
display: inline-block;
padding: 16px 32px;
text-decoration: none;
}
.dropdown:hover a,
.menu a:hover {
color: #fff;
}
.menu ul ul {
display: none;
}
.dropdown:hover ul {
display: block;
}
.dropdown ul {
background: #fff;
padding: 0;
}
.dropdown ul a,
.dropdown:hover ul a {
color: #000;
}
.dropdown ul a:hover,
.dropdown:hover ul a:hover {
color: rgb(2, 107, 107);
}
.dropdown ul ul {
border-bottom: 1px #ccc solid;
border-top: 1px #ccc solid;
box-shadow: none;
margin-bottom: 16px;
max-width: 100%;
position: relative;
}
.icon-menu::before {
content: "\2630";
}
/* 页面内容 */
.card {
width: 45%;
border: 2px solid;
padding: 10px;
margin: 10px;
display: inline-block;
}
.card img {
width: 100%;
}
.card-content {
font-size: 10px;
}
.page {
display: flex;
justify-content: center;
width: 100%;
}
#tutorials {
max-width: 800px;
margin: 0 20px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1.5rem;
margin: 20px 0;
}
#tutorials h3 {
margin: 0;
color: #86fbfb;
}
#tutorials h4 {
margin: 0;
color: white;
}
.box {
padding: 10px;
border-radius: 10px;
color: white;
background-color: darkcyan;
line-height: 1.5;
}
#tutorials img {
padding: 10px;
border: 1px solid #86fbfb;
border-radius: 25px;
width: 100%;
margin: 10px;
display: block;
}
/* TODO：待补充代码 */
五、完成
css/style.css
/* TODO：待补充代码 */
@media screen and (max-width: 800px) {
/* 网格布局 pc端是两行 而移动端是一行 */
.row {
grid-template-columns: 1fr;
}
/* 让导航变成竖起来排列 */
.menu li{
display: block;
}
/* 上面是使用绝对定位，会造成布局有问题 */
.dropdown ul{
position:relative
}
/* 菜单的显示与隐藏 默认隐藏 */
.collapse{
display:none
}
/* 移动端 Menu 由左上侧按钮（即 class 包含 icon-menu 的 label 标签）控制显隐，按钮⼤⼩已
经默认提供，⽆需⼿动设置⼤⼩。且 Menu 按钮展示时，需要浮动在内容卡⽚上⽅，不能被遮挡， */
label.menu-btn{
color:white;
display:block;
height: 53px;
}
/* 使⽤ CSS 伪类选择器 :checked 来控制 Menu 的显隐。 */
/* 也可以去html页面使用js来控制 */
input:checked.menu-btn+.collapse{
display: block;
}
}
