图片：
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; } .pg-header .logo{ width: 200px; background-color: #204982; text-align: center; } .pg-header .icons{ padding: 0 20px; } .pg-header .icons:hover{ background-color: #204982; } .pg-header .user{ margin-right: 60px; padding: 0 20px; color: white; height: 48px; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height: 40px;width: 40px;margin-top: 4px;border-radius: 50%; } .pg-header .user .b{ z-index: 20; position: absolute; top: 48px; right: 0; background-color: white; color: black; width: 160px; display: none; font-size: 14px; line-height: 30px; } .pg-header .user .b a{ padding: 5px; color: black; text-decoration: none; } .pg-header .user .b a:hover{ background-color: #dddddd; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-content .menu{ position: absolute; top:48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> 老男孩 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="22.jpg"> </a> <div class="b"> <a href="#">我的资料</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>5 </span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <div style="background-color: purple"> <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>