离开学还有10天了😰

今天再水一篇博客

（如图）

通过点击来切换tab。

具体思路十分简单，将这些都先包含进一个大的div

先是html部分

    <div class="body1"><div class="game"><ul><li><input name="game" type="radio" id="game1" checked><label for="game1">God of war</label><div class="tab">战神和他的老父亲</div></li><li><input  name="game" type="radio" id="game2"><label for="game2">Sekiro:Shadows die twice</label><div class="tab">死</div></li><li><input name="game" type="radio" id="game3"><label for="game3">The witcher wild hunt</label><div class="tab">要再来一局昆特牌吗</div></li><li><input  name="game" type="radio" id="game4"><label for="game4">Red Dead Redemption 2</label><div class="tab">我的亚瑟/(ㄒoㄒ)/~~</div></li></ul></div></div>

效果如图，还是十分简陋啊~

进行一点点的加工

css部分

.body1 {background: linear-gradient(to left, rgb(24, 68, 84), rgb(27, 40, 56));width: 100%;height: 700px;background-size: 100% 100%;
}.game {width: 300px;height: 700px;background: linear-gradient(rgb(41, 47, 59), rgb(36, 40, 47));
}ul li {height: 30px;width: 300px;line-height: 30px;color: rgb(172, 179, 192);list-style: none;flex: 1;
}input {display: none;
}li+label {display: block;width: 100%;height: 100%;background: #ccc;font-size: 18px;text-align: center;line-height: 60px;color: #333;
}input+label+div {display: none;position: absolute;left: 0;top: 60px;
}input:checked+label {background: #333333;color: #fff;
}input:checked+label+div{display: block;
}.tab {width: 1218px;height: 500px;margin-left: 300px;background-color: rgba(0, 174, 255, 0.432);
}

 完成！