这篇博客探讨了网页头部设计，包括导航栏的样式、用户模块的实现和内容区域的布局。重点介绍了header类的CSS样式，如margin、width、min-width、background-color等属性的使用，以及.left和.right类在创建页面浮动布局中的作用。此外，还提到了用户列表的显示与隐藏效果，以及左右内容区域的背景颜色和宽度设置。
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
.pg-header .header{
margin: 0 auto;
width:100%;
min-width:1080px;
height: 48px;
background-color:#2a6496;
line-height: 48px;
color: white;
}
.pg-header .header .logo{
font-size:16px;
font-weight: 600;
width: 200px;
text-align: center;
padding:0 20px;
}
.pg-header .header .user{
width:150px;
height: 48px;
position: relative;
}
.pg-header .header .user-list{
width:120px;
background-color: grey;
position: absolute;
top:40px;
right:80px;
display:none;
z-index: 10;
}
.pg-header .header .user-list a{
display: block;
}
.pg-header .header .user a img{
height: 32px;
width: 32px;
border-radius: 50%;
padding: 0 5px;
vertical-align: middle;
}
.pg-header .header:hover .user-list{
display: block;
}
.pg-content .left_content{
position: absolute;
top:48px;
left:0;
bottom: 0;
width:280px;
background-color: grey;
}
.pg-content .right_content{
position: absolute;
right:0;
top:48px;
bottom: 0px;
left:285px;
background-color: #eeeeee;
overflow: auto;
}
.pg-content .right_content .right_text{
min-width: 780px;
background-color: red;
z-index: 9;
}
howhy
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
erwer
扫一扫
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
