样例页面:
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .left{ float: left; } .right{ float:right; } .pg-header{ height: 48px; background-color: #2459a2; } .pg-body .pg-menu{ width:10%; height: 1000px;; background-color: antiquewhite; position: absolute; top: 48px;; left:0; /*bottom:0;*/ } .pg-body .pg-content{ width:90%; position: absolute; top: 48px; right:0; bottom:0; overflow: auto; background-color: #3300cc; z-index: 9; } .pg-header .logo { color: black; text-align: center; width:10%;; line-height: 48px; background-color: wheat; } .pg-header .userinfo img{ border-radius: 50%; } .pg-header .userinfo{ border:1px solid red; margin-top: 4px; width: 140px; } .pg-header .userinfo .infolist { display: none; } .pg-header .userinfo:hover .infolist{ display: block; color: red; } .pg-header .userinfo .infolist{ position: absolute; background-color: #009933; top: 43px; right: 36px; } .pg-header .userinfo .infolist a{ position: relative; display: block; color: white; width: 140px; text-align: center; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> <span>welcome</span> </div> <div class="userinfo right" style="position: relative;"> <a href=""><img src="1.png" alt="" width="42" height="40" ></a> <div class="infolist" style="position: absolute;top: 43px;right:20px;z-index:10"> <a>我的信息</a> <a>登陆</a> </div> </div> </div> <div class="pg-body"> <div class="pg-menu"> 这是侧边栏 </div> <div class="pg-content"> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> </div> </div> </body> </html>
原文:http://www.cnblogs.com/wanghui1991/p/6421066.html