中英文切換導(dǎo)航.png
需求：在鼠標(biāo)移動(dòng)到導(dǎo)航欄懸浮時(shí)曲掰，將原本是英文的導(dǎo)航標(biāo)題變成中文赚楚。
知識點(diǎn)：display:none和block之間的應(yīng)用
<ul>
<li><a href="">
<i>HOME</i>
<b>首頁</b>
</a></li>
<li><a href="">
<i>HOME</i>
<b>首頁</b>
</a></li>
<li><a href="">
<i>HOME</i>
<b>首頁</b>
</a></li>
<li><a href="" style="border-right: none;">
<i>HOME</i>
<b>首頁</b>
</a></li>
</ul>
/* 清除瀏覽器的默認(rèn)間距 */
*{
margin: 0;
padding: 0;
}
ul {
width: 400px;
height: 50px;
margin: 50px auto;
border: 1px solid #000;
}
li {
/* 為了解決IE低版本的階梯bug矾策，在高版本瀏覽器使用中可以省略 */
float: left;
}
a {
float: left;
/* float不僅可以轉(zhuǎn)換為行內(nèi)塊元素設(shè)置寬高,還可以改變水平方向布局 */
width: 100px;
height: 50px;
border-right: 1px dashed #000;
color: #000;
box-sizing: border-box;
text-align: center;
line-height: 50px;
}
/* 初始狀態(tài)：英文顯示稿黄，中文隱藏 */
b {
display: none;
}
/* 鼠標(biāo)狀態(tài) */
a:hover i {
display: none;
}
a:hover b {
display: block;
}
a:hover {
background: #000;
color: #fff;
}
注意：
因?yàn)樾枰獙?shí)現(xiàn)英文和中文分別顯示尝苇，所以中英文需要放置在不同的標(biāo)簽內(nèi)部，并使用normal去除標(biāo)簽原有的特征屬性世剖。（所有的練習(xí)案例都需要去除瀏覽器默認(rèn)間距）
/* 清除瀏覽器的默認(rèn)間距 */
*{
margin: 0;
padding: 0;
}
/* 清除加粗標(biāo)簽的默認(rèn)樣式 */
b,strong{
font-weight: normal;
}
/* 清除傾斜標(biāo)簽的默認(rèn)樣式 */
i,em{
font-style: normal;
}
