代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ /*position用于固定标题头永远放在上面*/ position: fixed; right:0; left:0; top:0; background-color: #2459a2; /*height、line-height用于设置行高，并将内容居中*/ height: 48px; line-height: 48px; } .pg-body{ background-color: white; /*margin-top: 用于设置去顶部的边距，头部是48px,所以这里是50px,预留了一部分空间;*/ margin-top: 48px; height: 5000px; } .w{ /*width:为头部具体内容宽度;*/ width: 980px; margin: 0 auto; } .pg-header .menu{ /*使其既具有block的宽度和高度特性*/ display: inline-block; /*使该标签的上下边距为0，左右边距为10px*/ padding: 0 10px; color: white; } /*当鼠标放到此位置时，进行背景颜色替换 */ .pg-header .menu:hover{ background-color: aqua; } </style></head><body> <div class="pg-header"> <div class="w"> <div > <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">社区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> <!--float:right 让登陆标签右移动--> <div class="menu" >登陆</div> <!--float:right 让注册标签右移动--> <div class="menu" >注册</div> <!--当父div管不住子div的float时，可使用如使下面的语句--> <div style=“clear:both;”></div> </div> </div> <div class="pg-body"> <div class="w">bbbb</div> </div></body></html>

展示