<!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>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
