Admin page basis layout HTML + CSS

Admin page basis layout, the left is the menu on the right side is the main content.
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  7 <style>
  8     body{
  9         margin: 0;
 10     } 
. 11      .left { 
12 is          a float : left ; 
13 is      } 
14      .right { 
15          a float : right ; 
16          / * If set div float, the parent div is not actually hold up to * / 
. 17      } 
18 is      .pg-header { 
. 19          height : 48px ; 
20 is          background-Color : # 2459a2 ; 
21 is          Color : White ; 
22 is          Line-height : 48px;
 23         /*left: 0;*/
 24     }
 25     .pg-header .logo{
 26         width: 200px;
 27         background-color: aqua;
 28         text-align: center;
 29         /*height: 46px;*/
 30     }
 31     .pg-header .icon{
 32         padding: 0 10px;
 33     }
 34     .pg-header .icon:hover{
 35         background-color: thistle;
 36     }
 37     .pg-header .icon span{
 38         display: inline-block;
 39     padding: 2px 7px;
 40     line-height: 1;
 41     background-color: red;
 42     border-radius: 50%;
 43     font-size: 4px;
 44     }
 45     .pg-header .user:hover{
 46     background-color: thistle;
 47     }
 48     .pg-header .user{
 49         width: 160px;
 50         margin-right: 60px;
 51         background-color: wheat;
 52         color: white;
 53         height: 48px;
 54     }
 55 
 56     .pg-header .user .a img{
 57         width: 40px;height: 40px; margin-top: 4px; border-radius:50% ;
 58     }
 59     .pg-header .user .b{
 60         z-index:20;position: absolute;top: 46px;right: 44px;background-color: white; color:black;width: 150px;display: none;
 61     } 
62 is      .pg the .user-header: .B hover { 
63 is          the display : Block ; 
64          / * Classic: as long as the mouse is displayed after the drop-down box, and .pg-header .user .b: hover completely different effects * / 
65      } 
66      .pg the .user-header .ba { 
67          the display : Block ; 
68      } 
69      .pg-Content .menu { 
70          position : Absolute ; 
71 is          Top : 48px ; 
72          left : 0 ; 
73 is         bottom: 0;
 74         width: 200px;
 75         background-color: #dddddd;
 76     }
 77     .pg-content .content {
 78         position: absolute;
 79         top: 48px;
 80         right: 0;
 81         bottom: 0;
 82         left: 200px;
 83         overflow:Auto ; 
84          Z-index : . 9 ; / * Z-level index is, who will come to the upper layer * / Large 
85          background-Color : CadetBlue ; 
86          font-size : 50px ; 
87      } 
88  </ style > 
89  </ head > 
90  < body > 
91 is  < div class = "PG-header" > 
92      < div class = "logo left" > Welcome </ div > 
93  
94     <div class="user right" style="position: relative">
 95         <a class="a" href="#" >
 96             <img src="i_name.jpg"/>
 97         </a>
 98         <div class="b">
 99             <a>我的资料</a>
100             <a>注销</a>
101         </div>
102     </div>
103       <div class="icon right"><i class="fa fa-clipboard" aria-hidden="true"></i>
104       <span>5</span>
105       </div>
106     <div class="icon right"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
107 
108 </div>
109  
110  < div class = "PG-Content" > 
111      < div class = "MENU left" > This is a menu layout </ div > 
112      < div class = "Content right" > This is the main content layout </ div > 
113  </ div > 
114  < div class = "PG-footer" > </ div > 
115  </ body > 
1 16  </ HTML >
Admin page basis layout HTML + CSS

Guess you like
