前端入門1--導航欄
阿新 • • 發佈：2018-08-03
分享圖片 分享 agen charset har color opened lose hid 
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>導航欄</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 ul{ 11 margin: 0 auto; 12 border: 3px lightblue solidView Code; 13 width: 700px; 14 height: 50px; 15 cursor: pointer; 16 } 17 ul li{ 18 display: inline-block; 19 margin-right: 40px; 20 margin-top: 15px; 21 } 22 ul>li>a{ 23 font-size: 18px; 24 text-decoration: none; 25 color: darkmagenta; 26 } 27 ul>li>a:hover{ 28 color: cornflowerblue; 29 font-weight: bold; 30 } 31 </style> 32 </head> 33 <body> 34 <ul> 35 <li><a href="http://www.baidu.com">Node培訓課程</a></li> 36 <li><a href="http://www.baidu.com">HTML5培訓課程</a></li> 37 <li><a href="http://www.baidu.com">視頻教程</a></li> 38 <li><a href="http://www.baidu.com">課件文檔</a></li> 39 <li><a href="http://www.baidu.com">聯系我們</a></li> 40 </ul> 41 </body> 42 </html>
實現效果如上圖。
前端入門1--導航欄