console 命令行工具 X clear

console

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>深夜食堂：版本三</title>
</head>

<body>
	<input type="checkbox" id="modeCheckBox">
    <div class="content">
        <header>
            <!-- label标签：使用for属性找到对应的id, 或者将控件放在该标签下, 当点击时, 就会触发对应的控件. -->
            <h1>深夜食堂</h1>
            <label for="modeCheckBox" id="modeBtn"></label>
        </header>
        <main>
            <div class="pic">
                <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
            </div>
            <div class="description">
                <p>
                   这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
                </p>
            </div>
        </main>
    </div>
</body>


</html>

header{
  display:flex;
  direction: row;
  justify-content: space-between;
  align-items: center;
}
.content{
    width: 300px;
    height: 600px;
    margin: 0 auto;
}
img{
    width: 100%;
}
/*当input框为选中状态时时,content内容的样式；在css选择时，":"表示当前input框的值，即checked
                                                        "+"表示相邻元素，即当前元素的下一元素*/
#modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
}

#modeBtn::after {
    content: '天亮了';
}
#modeCheckBox:checked + .content #modeBtn::after { /*点击按钮之后，就选择.night的样式，则图标改变*/
    content: '天黑了';
}

/*隐藏掉原来的checkbox*/
#modeCheckBox {
    display: none;
}