當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3构建左侧导航栏

發布時間：2025/3/20 CSS 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3构建左侧导航栏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

廢話不說，先上圖

代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>設計左側導航欄</title><style>a{text-decoration: none;/*去掉字下劃線*/margin: 0 30px;color: white;}nav{width: 300px;height: 400px;}li{background-color: rgba(0,0,0,0.7);/*0.7表示透明度*/overflow: hidden;/*隱藏圓點*/line-height: 40px;/*行高*/}li:nth-of-type(2n){/*2n表示偶數行*/background-color: rgba(0,0,0,0.9);}li:hover{/*hover表示鼠標放上去之后的變化*/background-color: cadetblue;}</style> </head> <body> <nav><ul><li><a href="#" >JavaEE培訓</a></li><li><a href="#" >Android培訓</a></li><li><a href="#" >PHP培訓</a></li><li><a href="#" >UI設計培訓</a></li><li><a href="#" >iOS培訓</a></li><li><a href="#" >前端與移動開發培訓</a></li><li><a href="#" >C/C++培訓</a></li><li><a href="#" >網絡營銷培訓</a></li><li><a href="#" >游戲開發培訓</a></li><li><a href="#" >云計算之大數據培訓</a></li></ul> </nav> </body> </html>

總結

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

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