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.效果