后台管理页面布局

 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         /*width: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         /*width: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

时间： 2024-10-10 19:51:41

后台管理页面布局的相关文章

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

HTML高级标签（2）————窗口分帧（2）————后台管理页面

使用frameset进行窗口分帧,构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. 1  首先,需要一个页面,使用<frameset>按比例划分为适合的三个区域:头部,菜单,主体. <frameset>不能放在<body>中编写. 给每一个<frame>进行命名,便于后面链接时target属性可以直接指向指定位置. 代码如下(文件名自定义,我写的是 frameset.html): <html> <head> <

最为纯粹简单的后台管理页面框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title

css做的后台管理页面，不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

5. 添加后台管理页面

接着上篇继续,博客网站少不了后台管理页面,在后台可以添加文章以及维护基础数据,因此本文主要就介绍怎样添加视图页面.怎样使用视图模型.绑定静态资源以及ThymeLeaf模板引擎的基本使用,具体如下:1. 添加Menu类,表示后台管理页面中的左侧菜单 1 package com.lvniao.blog.model; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 public class Menu { 7 8 private

8 功能6：后台管理页面，编辑文章

1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^cn_backend/add_article/$', views.add_article, name='add_articles'), view视图 from django.shortcuts import render, HttpResponse, redirect from blog import

后台管理页面基本布局

效果图镇楼 html <body> <div id="top"></div> <div id="left"> <div class="left"></div> </div> <div id="right"> <div class="right"></div> </div> &l

网站后台管理页面

转自:http://blog.sina.com.cn/s/blog_3ecab8250101dq1u.html 1.工具辅助查找 2.网站资源利用 如:网站根目录Robots.txt文本.图片路径爆后台.查看网站底部版权信息是否有连接.通过网站里的文件名查询源码下载得知 3.根据网站的漏洞 4.搜索引擎查询 命令很多种列几种自己常用的吧: site:hackseo.netintext:管理|后台|登陆|用户名|密码|验证码|系统|帐号|manage|admin|login|system site

bootstrap 后台管理页面

声明: 左侧菜单借鉴了网上 的二级菜单的样式.希望作者不要追究我的法律责任. 功能说明:点击左侧菜单,右侧生成tabs,加载数据.tabs 可关闭.默认选中. 插件说明:使用bootstrapgrid 和jquery ui bootstrap.数据显示使用bootstrapgrid, tabs 生成和删除,使用jquery ui bootstrap. index.html <!DOCTYPE html> <html> <head> <meta charset=&q