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> 单个上传
152 </label>
153 </div>
154 <div class="zl_upload2 l">
155 <label>
156 <input type="file" multiple>
157 <i class="iconfont iconshangchuan"></i> 批量上传
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>
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>
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>
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>
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>
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>
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;}