近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。
示例导航栏如下图所示
导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效
做成后效果如下：
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <style> 7 li { 8 /* 去掉标签点，左浮动 */ 9 list-style: none; 10 float: left; 11 } 12 13 a { 14 /* 将a标签变为块级元素，设置文字大小和背景颜色 */ 15 display: block; 16 width: 150px; 17 font-size: 32px; 18 color: white; 19 background-color: gainsboro; 20 text-decoration: none; 21 text-align: center; 22 text-transform: uppercase; 23 border-bottom: 2px solid brown; 24 } 25 26 a:hover { 27 /* 鼠标移入后特效 */ 28 font-size: 34px; 29 font-weight: bold; 30 background-color: brown; 31 border-color: lightcoral; 32 transform: scale(1.1); 33 transition: all 0.1s; 34 box-shadow: 0 4px 4px gray; 35 } 36 </style> 37 </head> 38 39 <body> 40 <nav> 41 <ul> 42 <!-- 使用li标签做导航栏 --> 43 <li> 44 <a href="#">home</a> 45 </li> 46 <li> 47 <a href="#">news</a> 48 </li> 49 <li> 50 <a href="#">about</a> 51 </li> 52 </ul> 53 </nav> 54 </body> 55 56 </html>
运用这几天的所学知识模仿做了一个，不知道以后学会了以后，标签还是不是这么做的
这个老爷机surface pro3风扇声音是真的大，坐到床上不得不带上耳机，好久不用了又觉得键盘键程真的是短的可怕，可惜没钱，不然换个