CSS3构建左侧导航栏
生活随笔
收集整理的這篇文章主要介紹了
CSS3构建左侧导航栏
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
廢話不說，先上圖
代碼：
<!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表示偶數(shù)行*/background-color: rgba(0,0,0,0.9);}li:hover{/*hover表示鼠標放上去之后的變化*/background-color: cadetblue;}</style> </head> <body> <nav><ul><li><a href="#" ><span>JavaEE培訓</span></a></li><li><a href="#" ><span>Android培訓</span></a></li><li><a href="#" ><span>PHP培訓</span></a></li><li><a href="#" ><span>UI設計培訓</span></a></li><li><a href="#" ><span>iOS培訓</span></a></li><li><a href="#" ><span>前端與移動開發(fā)培訓</span></a></li><li><a href="#" ><span>C/C++培訓</span></a></li><li><a href="#" ><span>網(wǎng)絡營銷培訓</span></a></li><li><a href="#" ><span>游戲開發(fā)培訓</span></a></li><li><a href="#" ><span>云計算之大數(shù)據(jù)培訓</span></a></li></ul> </nav> </body> </html>?
總結
以上是生活随笔為你收集整理的CSS3构建左侧导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 绘制HTML5的Logo
- 下一篇： CSDN的Markdown编辑器的使用