1.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .nav { 8 height: 50px; 9 border-top: 3px solid #ff8500; 10 border-bottom: 1px solid #edeef0; 11 background-color: #fcfcfc; 12 } 13 .nav a { 14 height: 50px; 15 display: inline-block; 16 /*background-color: pink;*/ 17 line-height: 50px; 18 padding-left: 6px; 19 padding-right: 6px; 20 color: #4c4c4c; 21 text-decoration: none; 22 } 23 .nav a:hover { 24 background-color: #edeef0; 25 color: #ff8400; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="nav"> 31 <a href="#">首页</a> 32 <a href="#">新闻客户端</a> 33 <a href="#">设为首页</a> 34 <a href="#">奔跑吧</a> 35 </div> 36 </body> 37 </html>
2.效果
