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>
html模板 练习（仿照抽屉网）
原文地址：http://www.cnblogs.com/venicid/p/7773661.html