分析
类型：CSS
分数：10分
难度：中等
考点
- CSS 响应式布局
- 状态选择器
:checked - 兄弟选择器
~
解题思路
使用响应式布局，实现题目要求
技巧
是用 状态选择器 和 兄弟选择器，实现显示菜单功能
代码实现
修改 style.css 文件，增加下面代码：
@media (max-width: 800px) {
.collapse {
display: none;
}
label.menu-btn {
display: inline;
color: #959595;
margin-left: 20px;
cursor: pointer;
}
label.menu-btn:hover{
color:#fff;
}
.menu{
line-height: 54px;
cursor: pointer;
margin-bottom: 25px;
}
/* 当id是menu-btn 选中时，让其兄弟标签，且样式是 .collapse 的标签 显示出来*/
#menu-btn:checked ~ .collapse{
display: block;
}
.menu li {
display: block;
}
.menu a {
padding: 0 32px;
}
.box {
margin: 20px 0 15px 0;
}
.row {
display: block;
}
#tutorials img {
margin-left: 0;
margin-right: 0;
}
}