其他分享
首页 > 其他分享> > 正达管理后台首页

正达管理后台首页

作者:互联网

PC端管理后台页面制作,代码如下:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8     <link rel="stylesheet" href="./common.css">
  9     <link rel="stylesheet" href="./iconfont/iconfont.css">
 10     <style>
 11         #porjecttitle .porjectTitle_text{margin: 21px 0 0 22px;color: #333333;}
 12         #porjecttitle .porjectTitle_text h2{font-size: 24px;line-height: 25px;}
 13         #porjecttitle .porjectTitle_text p{font-size: 14px;line-height: 30px;margin: 10px 0 13px 0;}
 14         #porjecttitle .porjectTitle_text i{font-size: 22px;color: #cccccc;margin-left: 30px;}
 15         #porjecttitle .porjectTitle_text span{color: #999999;}
 16         #porjecttitle .porjectTitle_img{width: 200xp;height: 149px;margin: 20px 20px 0 0;}
 17 
 18         #porjectlist .porjectlist_btns{height: 54px;background: #f1f9fc;border-top: 1px #e0eaef solid;
 19         border-bottom: 1px #dbe7ed solid;}
 20         #porjectlist .porjectlist_btns ul{margin: 14px 0 0 20px;}
 21         #porjectlist .porjectlist_btns li{float: left;width: 108px;height: 39px;border:1px #dbe7ed solid;
 22         border-bottom: none;background: #fbfeff;color: #666666;text-align: center;line-height: 39px;
 23     margin-right: 12px;border-radius: 5px 5px 0 0;cursor: pointer;}
 24         #porjectlist .porjectlist_btns li.active{color: white;background: #018ffb;position: relative;}
 25         #porjectlist .porjectlist_btns li.active::after{content:"";display: block;position: absolute;
 26     width: 11px;height: 6px;background: url(./img2/arrow.png) no-repeat;bottom: -6px;left: 50%;
 27     margin-left: -6px;}
 28 
 29     #porjectlist .porjectlist_cons{margin: 20px 20px 20px 20px;}
 30     #porjectlist .porjectlist_cons>div{display: none;}
 31     #porjectlist .porjectlist_cons>div.show{display: block;}
 32     #porjectlist .zl_upload1 , #porjectlist .zl_upload2{width: 110px;height: 32px;line-height: 32px;
 33     text-align: center;font-size: 14px;color: white; border-radius: 5px;cursor: pointer;}
 34     #porjectlist .zl_upload1 input , #porjectlist .zl_upload2 input{display: none;}
 35     #porjectlist .zl_upload1 label , #porjectlist .zl_upload2 label{cursor: pointer;}
 36     #porjectlist .zl_upload1{background: #5fd15c;}
 37     #porjectlist .zl_upload2{background: #34c1da;margin-left: 20px;}
 38     #porjectlist .iconshangchuan1{font-size: 12px;position: relative;top: -1px;}
 39     #porjectlist .zl_search{width: 210px;height: 30px;border:1px #dbe7ed solid;border-radius: 5px;
 40     overflow: hidden;}
 41     #porjectlist .zl_search input{border: none;width: 177px;height: 100%;font-size: 14px;color: #999999;
 42     text-indent: 9px;position: relative;top:-3px;outline: none;}
 43     #porjectlist .zl_search button{width: 32px;height: 32px;border: none;border-left: 1px #dbe7ed solid;
 44     background-image: linear-gradient(#fcfdfd #f1f9fc);cursor: pointer;}
 45     #porjectlist .zl_search i{font-size: 18px;font-weight: bold;color: #a1c6d4;}
 46 
 47     #porjectlist .zl_table{clear: both;width: 100%;border: 1px #dbe7ed solid;font-size: 12px;
 48         border-collapse: collapse;position: relative;top: 20px;}
 49     #porjectlist .zl_table tr{height: 32px;border-bottom: 1px #e7eff3 solid;}
 50     #porjectlist .zl_table tr:hover{background: #f1f9fc;}
 51     #porjectlist .zl_table th{border-right: 1px #dbe7ed solid;color: #666666;font-weight: normal;text-align: left;
 52     text-indent: 12px;background: #f1f9fc;}
 53     #porjectlist .zl_table th:first-child , #porjectlist .zl_table td:first-child{text-align: center; text-indent: 0;}
 54     #porjectlist .zl_table td{text-indent: 12px;}
 55     #porjectlist .zl_table .iconword{margin-right: 13px;color: #0173ca;}
 56     #porjectlist .zl_table .iconxiazai{color: #3da2f0;}
 57     #porjectlist .zl_table .iconshanchushaixuanxiang{color: #d94141;}
 58 
 59     #porjectlist .zl_footer{height: 70px;border: 1px #dbe7ed solid;border-top: none;margin-top: 20px;
 60     overflow: hidden;}
 61     #porjectlist .zl_remove , #porjectlist .zl_download{width: 78px;height: 24px;border: 1px #c9e4f1 solid;
 62     border-radius: 3px;background-image: linear-gradient(#f7fcff #e7f4fa);margin-top: 18px;font-size: 12px;
 63 color: #1b848a;cursor: pointer;}
 64     #porjectlist .zl_remove{margin-right: 15px;margin-left: 22px;}
 65     #porjectlist .zl_page{line-height: 24px;margin: 22px 18px 0 0;font-size: 0;}
 66     #porjectlist .zl_page a{border: 1px #e6e6e6 solid;padding: 6px 9px;font-size: 12px;margin-left: 10px;}
 67     #porjectlist .zl_page a.active{border: 1px #3797e0 solid;background: #42adff;color: white;}
 68     </style>
 69 </head>
 70 <body>
 71     <header id="header">
 72         <hgroup class="header_logo l">
 73             <h1 class="l">
 74                 <img src="./img2/logo.png" alt="">
 75             </h1>
 76             <h2 class="l">正达建筑内部管理平台</h2>
 77         </hgroup>
 78         <ul class="header_nav r">
 79             <li>
 80                 <i class="iconfont iconwode"></i>欢迎您,武剑 管理员
 81             </li>
 82             <li>
 83                 <i class="iconfont iconyuechi"></i><a href="#">修改密码</a>
 84             </li>
 85             <li>
 86                 <i class="iconfont iconshouye"></i><a href="#">公司网页</a>
 87             </li>
 88             <li>
 89                 <i class="iconfont iconplus-share"></i><a href="#">退出</a>
 90             </li>
 91         </ul>
 92     </header>
 93     <aside id="menu" class="l">
 94         <ul>
 95             <li class="active">
 96                 <a href="#">
 97                     <i class="iconfont iconloukongguanli"></i>
 98                     <p>项目管理</p>
 99             </a>
100             </li>
101             <li>
102                 <a href="#">
103                     <i class="iconfont iconyonghuxinxi"></i>
104                     <p>用户管理</p>
105                 </a>
106             </li>
107             <li>
108                 <a href="#">
109                     <i class="iconfont iconshezhi"></i>
110                     <p>系统管理</p>
111                 </a>
112             </li>
113         </ul>
114     </aside>
115     <main id="main">
116         <section class="main_container">
117             <section id="porjecttitle" class="clear">
118                 <div class="porjectTitle_text l">
119                     <h2>青田高湾绿园一期、二期工程<i class="iconfont iconbianji"></i></h2>
120                     <p>
121                         项目编号:<span>CN0000507</span>
122                         <br>
123                         项目类型:<span>在建工程</span>
124                         <br>
125                         项目负责人:<span>梅海丽</span>
126                         <br>
127                         手机号码:<span>15869168967</span>
128                     </p>
129                 </div>
130                 <div class="porjectTitle_img r">
131                     <img src="./img2/prpject.jpg" alt="">
132                 </div>
133             </section>
134             <section id="porjectlist">
135                 <div class="porjectlist_btns">
136                     <ul>
137                         <li>视频监控</li>
138                         <li>考勤管理</li>
139                         <li>安全巡查</li>
140                         <li class="active">资料管理</li>
141                     </ul>
142                 </div>
143                 <div class="porjectlist_cons">
144                     <div></div>
145                     <div></div>
146                     <div></div>
147                     <div class="show">
148                         <div class="zl_upload1 l">
149                             <label>
150                                 <input type="file">
151                                 <i class="iconfont iconshangchuan1"></i>&nbsp;&nbsp;&nbsp;单个上传
152                             </label>
153                         </div>
154                         <div class="zl_upload2 l">
155                             <label>
156                                 <input type="file" multiple>
157                                 <i class="iconfont iconshangchuan"></i>&nbsp;&nbsp;&nbsp;批量上传
158                             </label>
159                         </div>
160                         <div class="zl_search r">
161                             <input type="text" placeholder="请输入关键字"><button><i class="iconfont iconsuosou"></i></button>
162                         </div>
163                         <table class="zl_table">
164                             <thead>
165                                 <tr>
166                                     <th width="49"><input type="checkbox"></th>
167                                     <th>文档名称</th>
168                                     <th width="167">文档大小</th>
169                                     <th width="148">上传者</th>
170                                     <th width="168">上传时间</th>
171                                     <th width="81">操作</th>
172                                 </tr>
173                             </thead>
174                             <tbody>
175                                 <tr>
176                                     <td><input type="checkbox"></td>
177                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
178                                     <td>21.3kb</td>
179                                     <td>陈文耀</td>
180                                     <td>2016-03-14</td>
181                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
182                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
183                                 </tr>
184                                 <tr>
185                                     <td><input type="checkbox"></td>
186                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
187                                     <td>21.3kb</td>
188                                     <td>陈文耀</td>
189                                     <td>2016-03-14</td>
190                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
191                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
192                                 </tr>
193                                 <tr>
194                                     <td><input type="checkbox"></td>
195                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
196                                     <td>21.3kb</td>
197                                     <td>陈文耀</td>
198                                     <td>2016-03-14</td>
199                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
200                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
201                                 </tr>
202                                 <tr>
203                                     <td><input type="checkbox"></td>
204                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
205                                     <td>21.3kb</td>
206                                     <td>陈文耀</td>
207                                     <td>2016-03-14</td>
208                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
209                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
210                                 </tr>
211                                 <tr>
212                                     <td><input type="checkbox"></td>
213                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
214                                     <td>21.3kb</td>
215                                     <td>陈文耀</td>
216                                     <td>2016-03-14</td>
217                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
218                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
219                                 </tr>
220                                 <tr>
221                                     <td><input type="checkbox"></td>
222                                     <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
223                                     <td>21.3kb</td>
224                                     <td>陈文耀</td>
225                                     <td>2016-03-14</td>
226                                     <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;
227                                         <i class="iconfont iconshanchushaixuanxiang"></i></td>
228                                 </tr>
229                             </tbody>
230                         </table>
231                         <div class="zl_footer">
232                             <button class="zl_remove">批量删除</button>
233                             <button class="zl_download">批量下载</button>
234                             <div class="zl_page r"> 
235                                 <a href="#">共12条</a>
236                                 <a href="#">首页</a>
237                                 <a href="#">上一页</a>
238                                 <a href="#" class="active">1</a>
239                                 <a href="#">2</a>
240                                 <a href="#">3</a>
241                                 <a href="#">下一页</a>
242                                 <a href="#">尾页</a>
243                             </div>
244                         </div>
245                     </div>
246                 </div>
247             </section>
248         </section>
249         
250     </main>
251     <footer id="footer">
252         Copyright © 2009 -2016 丽水市正达建筑工程有限公司 All rights reserved. 技术支持:红点智能
253     </footer>
254 </body>
255 </html>
 1 /* 通用的css文件 */
 2 /* 基本的初始化 */
 3 *{margin: 0;padding: 0;}
 4 ul{list-style: none;}
 5 img{display: block;}
 6 h1,h2,h3{font-size: 16px; font-weight: normal;}
 7 a{text-decoration: none;color: #333333;}
 8 html,body{font-family: Arial;height: 100%;overflow-y: hidden;}
 9 
10 .l{float: left;}
11 .r{float: right;}
12 .clear:after{content:"";display: block;clear: both;}
13 
14 #header{height: 80px;background: #018ffb;border-top: 5px #424147 solid;}
15 #header .header_logo h1{margin: 19px 14px 0 20px;}
16 #header .header_logo h2{color: white; font-size: 24px;line-height: 25px;margin-top: 28px;}
17 #header .header_nav{color: white;font-size: 14px;line-height: 14px;margin-top: 33px;}
18 #header .header_nav li{float: left;margin-right: 25px;}
19 #header .header_nav a{color: white;} 
20 #header .header_nav i{color: white;margin-right: 8px;}
21 #header .header_nav i.iconwode{font-size: 24px;position: relative;top: 4px;line-height: 8px;}
22 #header .header_nav i.iconshouye{font-size: 20px;position: relative;top: 2px;line-height: 12px;}
23 
24 #menu{width: 200px;background: #424147;height: calc(100% - 85px);}
25 #menu ul{color: #9a999e;text-align: center;}
26 #menu li{height: 140px;border-bottom: 1px #3a393e solid;border-top: 1px #49484e solid;}
27 #menu li.active{color: white;background: #4e4d53;}
28 #menu li a{color: inherit;width: 100%;height: 100%;display: block;padding-top: 35px;box-sizing: border-box;}
29 #menu li i{font-size: 40px;}
30 #menu li p{margin-top: 15px;}
31 
32 #main{overflow: hidden;height: calc(100% - 85px - 50px);}
33 #main .main_container{height: 100%;overflow: auto;}
34 
35 #footer{height: 49px;border-top: 1px #dbe7ed solid;background: #f1f9fc;text-align: right;
36     font-size: 12px;color: #888888;line-height: 49px;margin-right: 20px;}

 

 

标签:zl,margin,nbsp,height,正达,后台,border,porjectlist,首页
来源: https://www.cnblogs.com/krismile-1/p/15273344.html