?效果：

?代碼：

.left{position: fixed;width: 250px;height: 2000px;background-color: rgb(100, 93, 93);float: left;text-align: center; } .nav a{display: block;width: 247px;height: 70px;background-color: rgb(100, 93, 93);color: rgb(254, 254, 254);text-decoration: none;padding-top: 20px;line-height: 30px;font-size: 20px;border: 1px dotted black;font-weight: bold; } a:hover{background-color: rgb(8, 8, 8);

說明：

.left{

? ? position: fixed;? ? ? ? ? ? ?#將左側盒子固定，使得頁面上下拉動時左側導航欄不會跟隨移動

? ? width: 250px;

? ? height: 2000px;

? ? background-color: rgb(100, 93, 93);

? ? float: left;? ? ? ? ? ? ? ? ? ? ? #使左側盒子自動靠右

? ? text-align: center;? ? ? ? ?#將選項文字居中

}

?

.nav a{

? ? display: block;? ? ? ? ? ? ? ??#將選項鏈接轉換成塊，以便調節選項樣式

? ? width: 247px;

? ? height: 70px;

? ? background-color: rgb(100, 93, 93);

? ? color: rgb(254, 254, 254);

? ? text-decoration: none;? ? ? ?#去除鏈接顯示時自動生成的下劃線

? ? padding-top: 20px;

? ? line-height: 30px;

? ? font-size: 20px;

? ? border: 1px dotted black;

? ? font-weight: bold;? ? ? ? ? ? ?

}

a:hover{? ? ? ? ? ? ? ? ? ? ? ? ? ?#“hover”? 使得當鼠標放在選項上時改變選項的字體顏色

? ? background-color: rgb(8, 8, 8);? ? ? ? ? ? ??

}

總結

以上是生活随笔為你收集整理的html+css创建侧边导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。