标签：hid tom 注意 ima com play footer position lock
1.页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; } .pg-header{ height: 48px; background-color:#2459a2; color: white; line-height: 48px; } .pg-content .menu{ position: absolute; background-color: #dddddd; top: 48px; left: 0; bottom: 0; width: 200px; } .pg-content .content{ position: absolute; background-color: #00bbee; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; #a模板b模板切换 } </style> </head> <body> <div class="pg-header"> <div class="logo"><a>LOGO</a></div> </div> <div class="pg-content"> <div class="menu"><a>菜单界面</a></div> <div class="content"><a>content</a></div> </div> <div class="pg-footer"></div> </body> </html>
2.pg-header
3个div进行添加上class，float浮动操作
.pg-header .logo{
float: left;
width: 200px;
}
.pg-header .action-menu{
float: left;
width: 980px;
}
.pg-header .action-person{
float: right;
width: 200px;
}
<div class="pg-header">
<div class="logo"><a>LOGO</a></div>
<div class="action-menu">
<a>全部</a>
<a>42区</a>
<a>段子</a>
<a>图片</a>
<a>1024</a>
</div>
<div class="action-person">
<a>注册</a>
<a>登录</a>
</div>
</div>
注意：当页面缩小，float的消失不见了
3. menu菜单
menu 进行 padding，margin，hover操作
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
.pg-header .menu:hover{
background-color: #204982;
}
<div class="pg-header">
<div class="logo"><a>LOGO</a></div>
<div class="action-menu">
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">图片</a>
<a class="menu">1024</a>
</div>
<div class="action-person">
<a class="menu">注册</a>
<a class="menu">登录</a>
</div>
</div>
标签：hid tom 注意 ima com play footer position lock
原文地址：http://www.cnblogs.com/venicid/p/7773661.html
