您的位置: 首页  >  IT文章  >  后台管理页面布局

后台管理页面布局

分类: IT文章 • 2025-01-14 08:07:13 
 1 <!DOCTYPE html>
 2 <!--后台管理页面布局1-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8     body{
 9         margin: 0;
10     }
11     .left{
12         float: left;
13     }
14     .right{
15         float: right;
16     }
17      .pg-header{
18         height:48px;
19         background-color: #2459a2;
20         color: white;
21     }
22     .pg-content .menu{
23         width:20%;
24         background-color: red;
25         min-width: 200px;
26         height:500px;
27     }
28     .pg-content .content{
29         width:80%;
30         background-color: green;
31     }
32     </style>
33 </head>
34 <body>
35     <div class="pg-header"></div>
36     <div class="pg-content">
37         <div class="menu left">a</div>
38         <div class="content left">
39             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
40             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
41             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
42             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
43             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
44             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
45             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
46             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
47         </div>
48     </div>
49     <div class="pg-footer">e</div>
50 </body>
51 </html>
后台管理页面布局1 
 1 <!DOCTYPE html>
 2 <!--后台管理页面布局2-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         body{
 9             margin: 0;
10         }
11         .left{
12             float: left;
13         }
14         .right{
15             float: right;
16         }
17      .pg-header{
18         height:48px;
19         background-color: #2459a2;
20         color: white;
21     }
22     .pg-content .menu{
23         position: fixed;
24         top:48px;
25         left:0;
26         bottom: 0;
27         width: 200px;
28         background-color: #dd4920;
29     }
30     .pg-content .content{
31         position: fixed;
32         top:48px;
33         right:0;
34         bottom: 0;
35         left:200px;
36         background-color:purple;
37         overflow: auto;
38     }
39     </style>
40 </head>
41 <body>
42     <div class="pg-header"></div>
43     <div class="pg-content">
44         <div class="menu left">a</div>
45         <div class="content left">
46             <p>23423</p><p>sadas</p><p>sadas</p><p>sadas</p>
47             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
48             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
49             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
50             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
51             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
52             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
53             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
54         </div>
55     </div>
56     <div class="pg-footer">e</div>
57 </body>
58 </html>
后台管理页面布局2 
 1 <!DOCTYPE html>
 2 <!--后台管理页面布局3-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .item{
 9             background-color: #dddddd;
10         }
11         .item:hover{
12             color: red;
13         }
14         .item:hover .b{
15             background-color: green;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="item">
21         <div class="a">123</div>
22         <div class="b">456</div>
23     </div>
24 </body>
25 </html>
后台管理页面布局3 
  1 <!DOCTYPE html>
  2 <!--后台管理页面布局4-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         body{
  9             margin: 0;
 10                 }
 11         .left{
 12             float: left;
 13                 }
 14         .right{
 15             float: right;
 16                 }
 17     .pg-header{
 18         height:48px;
 19         background-color: #697dc6;
 20         color: white;
 21         line-height: 48px;
 22                 }
 23     .pg-header .logo{
 24         width: 200px;
 25         background-color: #889ff9;
 26         text-align: center;
 27                         }
 28     .pg-header .user{
 29         /*160px;
 30         background-color: wheat;
 31         color: #75a261;*/
 32         margin-right: 120px;
 33         padding: 0 4px;
 34         color: white;
 35         height: 48px;
 36                         }
 37     .pg-header .user:hover{
 38         background-color: #889ff9;
 39                              }
 40     .pg-header .user .a img{
 41         height: 40px;width:40px;margin-top: 4px;border-radius: 50%;
 42                                 }
 43     .pg-header .user .b{
 44         z-index: 20;
 45         position: absolute;
 46         top: 48px;
 47         right: -60px;
 48         background-color: #e6eaff;
 49         color: black;
 50         width: 160px;
 51         display: none;
 52         font-size: 14px;
 53         line-height: 30px;
 54                             }
 55     .pg-header.user .b a{
 56         padding: 5px;
 57         color: black;
 58         text-decoration: none;
 59     }
 60     .pg-header.user.b a:hover{
 61         background-color: #dddddd;
 62     }
 63     .pg-header .user:hover .b{
 64         display: block;
 65     }
 66     .pg-header .user .b a{
 67         display: block;
 68                             }
 69 
 70     .pg-content .menu{
 71         position: absolute;
 72         top:48px;
 73         left:0;
 74         bottom: 0;
 75         width: 200px;
 76         background-color: #dd7521;
 77                         }
 78     .pg-content .content{
 79         position: absolute;
 80         top:48px;
 81         right:0;
 82         bottom: 0;
 83         left:200px;
 84         overflow: auto;
 85                             }
 86     </style>
 87 </head>
 88 <body>
 89     <div class="pg-header">
 90         <div class="logo left">
 91             老男孩
 92         </div>
 93         <div class="user right" style="position: relative">
 94             <a class="a" href="#">
 95                 <img src="22.jpg">
 96             </a>
 97             <div class="b">
 98                 <a>我的资料</a>
 99                 <a>注销</a>
100             </div>
101         </div>
102     </div>
103     <div class="pg-content">
104         <div class="menu left">a</div>
105         <div class="content left">
106             <div style="background-color: #7fa27b">
107                 <p style="margin: 0;">df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
108                 <p>gdfggd</p><p>sadas</p><p>sadas</p><p>sadas</p>
109                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
110                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
111                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
112                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
113                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
114                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
115                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
116                 <p>df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
117                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
118                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
119                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
120                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
121                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
122                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
123                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
124                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
125                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
126             </div>
127         </div>
128     </div>
129     <div class="pg-footer">e</div>
130 </body>
131 </html>
后台管理页面布局4

后台管理页面布局22.jpg

 1 <!DOCTYPE html>
 2 <!--后台管理页面布局5-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
 8     <style>
 9         .item{
10             background-color: #dddddd;
11         }
12         .item:hover{
13             color: red;
14         }
15         .item:hover .b{
16             background-color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="item">
22         <div class="a">
23             <i class="fa fa-superpowers" aria-hidden="true">123</i>
24         </div>
25         <div class="b">456</div>
26     </div>
27 </body>
28 </html>
后台管理页面布局5 
  1 <!DOCTYPE html>
  2 <!--后台管理页面布局6-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
  8     <style>
  9         body{
 10             margin: 0;
 11                 }
 12         .left{
 13             float: left;
 14                 }
 15         .right{
 16             float: right;
 17                 }
 18     .pg-header{
 19         height:48px;
 20         background-color: #697dc6;
 21         color: white;
 22         line-height: 48px;
 23                 }
 24     .pg-header .logo{
 25         width: 200px;
 26         background-color: #889ff9;
 27         text-align: center;
 28                         }
 29     .pg-header .icons{
 30         padding: 0 20px;
 31                      }
 32     .pg-header .icons:hover{
 33         background-color: #889ff9;
 34     }
 35     .pg-header .user{
 36         /*160px;
 37         background-color: wheat;
 38         color: #75a261;*/
 39         margin-right: 120px;
 40         padding: 0 4px;
 41         color: white;
 42         height: 48px;
 43                         }
 44     .pg-header .user:hover{
 45         background-color: #889ff9;
 46                              }
 47     .pg-header .user .a img{
 48         height: 40px;width:40px;margin-top: 4px;border-radius: 50%;
 49                                 }
 50     .pg-header .user .b{
 51         z-index: 20;
 52         position: absolute;
 53         top: 48px;
 54         right: -60px;
 55         background-color: #e6eaff;
 56         color: black;
 57         width: 160px;
 58         display: none;
 59         font-size: 14px;
 60         line-height: 30px;
 61                             }
 62     .pg-header.user .b a{
 63         padding: 5px;
 64         color: black;
 65         text-decoration: none;
 66     }
 67     .pg-header.user.b a:hover{
 68         background-color: #dddddd;
 69     }
 70     .pg-header .user:hover .b{
 71         display: block;
 72     }
 73     .pg-header .user .b a{
 74         display: block;
 75                             }
 76 
 77     .pg-content .menu{
 78         position: absolute;
 79         top:48px;
 80         left:0;
 81         bottom: 0;
 82         width: 200px;
 83         background-color: #dd7521;
 84                         }
 85     .pg-content .content{
 86         position: absolute;
 87         top:48px;
 88         right:0;
 89         bottom: 0;
 90         left:200px;
 91         overflow: auto;
 92                             }
 93     </style>
 94 </head>
 95 <body>
 96     <div class="pg-header">
 97         <div class="logo left">
 98             老男孩
 99         </div>
100 
101 
102         <div class="user right" style="position: relative">
103             <a class="a" href="#">
104                 <img src="22.jpg">
105             </a>
106             <div class="b">
107                 <a>我的资料</a>
108                 <a>注销</a>
109             </div>
110         </div>
111 
112         <div class="icons right">
113             <i class="fa fa-commenting-o" aria-hidden="true"></i>
114             <span style="border-radius: 50%;display: inline-block;padding: 10px 7px;line-height: 1px;background-color: red; ">5</span>
115         </div>
116         <div class="icons right">
117             <i class="fa fa-bell-o" aria-hidden="true"></i>
118         </div>
119 
120     </div>
121     <div class="pg-content">
122         <div class="menu left">a</div>
123         <div class="content left">
124             <div style="background-color: #7fa27b">
125                 <p style="margin: 0;">df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
126                 <p>gdfggd</p><p>sadas</p><p>sadas</p><p>sadas</p>
127                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
128                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
129                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
130                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
131                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
132                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
133                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
134                 <p>df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
135                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
136                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
137                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
138                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
139                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
140                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
141                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
142                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
143                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
144             </div>
145         </div>
146     </div>
147     <div class="pg-footer">e</div>
148 </body>
149 </html>
后台管理页面布局6

http://fontawesome.io/#modal-download

相关推荐