<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <style> body{ margin:0 auto; } .left { float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white; line-height:48px; } .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; background-color:green; overflow:auto; min-width:900px; z-index:9; } .pg-header .logo{ width:200px; background-color:#9292ba; text-align:center; } .pg-header .user{ width:100px; background-color:blue; color:black; height:48px; padding:0 20px; margin-right: 15px; } .pg-header .user:hover{ background-color:purple; } .pg-header .user .a img{ height:40px;width:40px;margin-top:4px;border-radius: 68%; } .pg-header .user .b{ z-index:20; position:absolute; top:50px; right:44px; background-color:black; color:white; width:100px; display:none; } .pg-header .user .b a{ display:block; } .pg-header .user:hover .b{ display:block; } .pg-header .icons{ padding:0 20px; } .pg-header .icons:hover{ background-color:purple; } .pg-header .icons .hint{ line-height: 1px; padding: 8px 6px; background-color: red; border-radius: 50%; display: inline-block; font-size:10px; } </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="IMG_1877.JPG"> </a> <i class="fa fa-camera-retro"></i> <i class="fa fa-venus" aria-hidden="true"></i> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> <div class="icons right"> <i class="fa fa-github" aria-hidden="true"></i> <span class="hint">5</span> </div> <div class="icons right"> <i class="fa fa-car" aria-hidden="true"></i> <span class="hint">1</span> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <div style="background-color:red;"> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
后台管理页面示例
猜你喜欢
转载自www.cnblogs.com/goldtree358/p/12454200.html
今日推荐
周排行