在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航條是非常重要的組件之一。它可以幫助用戶更好地了解網(wǎng)站的結(jié)構(gòu)和內(nèi)容。而CSS可以實(shí)現(xiàn)導(dǎo)航條顯示和消失的效果，讓導(dǎo)航條更加智能和優(yōu)雅。

nav {
display: none; /*默認(rèn)隱藏導(dǎo)航條*/
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
font-size: 18px;
}
button:hover {
background-color: #666;
}
/*按鈕懸停時(shí)改變顏色*/
@media screen and (min-width: 768px) {
/*媒體查詢，屏幕寬度大于等于768px時(shí)顯示導(dǎo)航條*/
nav {
display: block;
}
button {
display: none;
}
}

在上面的代碼中，我們使用了媒體查詢（@media）來(lái)判斷屏幕寬度是否大于等于768px。當(dāng)屏幕寬度滿足條件時(shí)，nav的display屬性被設(shè)置為block，導(dǎo)航條就會(huì)顯示。而button的display屬性則被設(shè)置為none，按鈕就會(huì)消失。當(dāng)屏幕寬度不滿足條件時(shí)，nav被隱藏，按鈕出現(xiàn)。

使用CSS實(shí)現(xiàn)導(dǎo)航條顯示和消失的效果，可以讓用戶更加舒適地瀏覽網(wǎng)站。同時(shí)，也可以增加網(wǎng)站的美觀度和實(shí)用性。