最近我在學(xué)習(xí)CSS的時(shí)候嘗試模仿京東的導(dǎo)航欄，下面是我的代碼實(shí)現(xiàn)。

/* 導(dǎo)航欄樣式 */
#navbar {
width: 100%;
height: 60px;
background-color: #B40404;
overflow: hidden;
}
/* 導(dǎo)航欄中的文字樣式 */
#navbar a {
float: left;
color: #FFFFFF;
font-size: 20px;
line-height: 60px;
text-align: center;
padding: 0 20px;
text-decoration: none;
font-family: "Microsoft YaHei";
}
/* 將導(dǎo)航欄中的第一個(gè)文字樣式為logo，左對(duì)齊 */
#navbar a.logo {
float: left;
font-weight: bold;
}
/* 導(dǎo)航欄中鼠標(biāo)懸浮樣式 */
#navbar a:hover {
background-color: #E6E6E6;
color: #B40404;
}
/* 導(dǎo)航欄右側(cè)購(gòu)物車(chē)的樣式 */
#navbar .cart {
float: right;
font-size: 25px;
padding-top: 12px;
padding-right: 20px;
}

這是我通過(guò)CSS實(shí)現(xiàn)的京東導(dǎo)航欄樣式，代碼中我們使用了id選擇器和class選擇器來(lái)分別控制導(dǎo)航欄的整體樣式、文字樣式和購(gòu)物車(chē)樣式，加上:hover偽類(lèi)讓導(dǎo)航欄在鼠標(biāo)懸浮時(shí)呈現(xiàn)出不同的樣式。

此外，這段代碼還使用了float屬性來(lái)讓導(dǎo)航欄中的文字和購(gòu)物車(chē)分別位于左右兩側(cè)，從而使得導(dǎo)航欄整體更加美觀。