1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pg_head{
8 background-color: #2459a2;
9 position: fixed;
10 top: 0;
11 right: 0;
12 left: 0;
13 height: 48px;
14 line-height:48px;
15 }
16 .pg_body{
17 margin-top: 50px;
18 }
19 .w{
20 width: 980px;
21 margin: 0 auto;
22 }
23
24 .menu{
25 display: inline-block;
26 padding: 0 10px 0 10px;
27 color: white;
28 }
29 /*当鼠标移动到标签上时以下属性才会应用*/
30 .menu:hover{
31 background-color: #5e81ca;
32 }
33 </style>
34 </head>
35 <body>
36
37 <div class="pg_head">
38 <div class="w">
39 <a class="logo">logo</a>
40 <a class="menu">全部</a>
41 <a class="menu">42区</a>
42 <a class="menu">笑话</a>
43 <a class="menu">图片</a>
44 </div>
45 </div>
46 <div class="pg_body">
47 <div class="w">f</div>
48
49 </div>
50
51
52 </body>
53 </html>
效果如下图
