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>
效果如下图
原文：https://www.cnblogs.com/topzhao/p/9166455.html