├── css
    └── 01.css
├── images
    ├── 1.jpg
    ├── 2020实训成果展.png
    ├── dilireba.jpg
    ├── huge.jpg
    ├── icon-slides.png
    ├── pengyuyan.jpg
    ├── slide-1.jpg
    ├── slide-2.jpg
    ├── weixin.jpg
    ├── wuyanzu.jpg
    ├── zhangjie.jpg
    ├── zhangmanyu.jpg
    └── 想你所想.png
└── work.html


/css/01.css:
--------------------------------------------------------------------------------
  1 | *{margin: 0;padding: 0};
  2 | .content{
  3 |     cursor: pointer;
  4 |     position: relative;
  5 |     width:1902px;height:865px;
  6 |     margin-left: auto;margin-right: auto;
  7 | }
  8 | #list img{
  9 |     width:1902px;
 10 |     height:865px;
 11 | }
 12 | #list{
 13 |     position: absolute;
 14 |     width:1902px;
 15 |     height:865px;
 16 | }
 17 | #list img,#prev,#next,#btns{
 18 |     position: absolute;
 19 | }
 20 | #list img:not(:first-child){
 21 |     display: none;
 22 | }
 23 | #prev,#next{
 24 |     cursor: pointer;
 25 |     top:50%;transform: translateY(-50%);
 26 |     z-index: 100;width:40px;height:70px;
 27 |     background:url("../images/icon-slides.png");
 28 |     border:none;
 29 | }
 30 | #prev{
 31 |     background-position-x:-86px
 32 | }
 33 | #prev:hover{
 34 |     background-position: 0;
 35 | }
 36 | #next:hover{background-position-x: -43px}
 37 | #next{
 38 |     right:15px;
 39 |     background-position-x:-125px;
 40 | }
 41 | #btns{z-index: 101;
 42 |     transform: translateX(-50%);
 43 |     position: absolute;
 44 |     top: 835px;
 45 |     left:950px;
 46 | }
 47 | #btns .current{
 48 |     background:rgb(247, 2, 255);
 49 | }    
 50 | #btns>span{
 51 |     cursor: pointer;
 52 |     width:20px;
 53 |     height:20px;
 54 |     display: inline-block;
 55 |     border-radius: 10%;
 56 |     border:1px solid #fff;
 57 |     background-color:rgba(44,44,44,.3);
 58 | }
 59 | .zhezhao{
 60 |     width: 1902px;
 61 |     height: 865px;
 62 |     background-color: rgba(0, 0, 0, 0.6);
 63 |     position: relative;
 64 |     text-align: center;
 65 | }
 66 | .zhezhao::before{
 67 |     content: "";
 68 |     display: table;
 69 | }
 70 | .zhezhao h1{
 71 |     color: white;
 72 |     margin-top: 12%;
 73 |     font-size: 80px;
 74 | }
 75 | .zhezhao h2{
 76 |     color: white;
 77 |     margin-top: 2%;
 78 |     font-size: 60px;
 79 | }
 80 | .zhezhao img{
 81 |     position: relative;
 82 |     margin-right: -75px;
 83 |     margin-top: 30px;
 84 | }
 85 | .zhezhao h3{
 86 |     color: white;
 87 |     position: relative;
 88 |     left: 860px;
 89 |     top: 180px;
 90 |     width: 200px;
 91 | }
 92 | .daohang{
 93 |     width: 1902px;
 94 |     height: 70px;
 95 |     background-color:rgba(0, 0, 0,0.6);
 96 |     position: fixed;
 97 |     top: 0;
 98 |     z-index: 100;
 99 | }
100 | .daohangleft{
101 |     width: 300px;
102 |     height: 70px;
103 |     background-color:rgba(92, 111, 125,0.6);
104 |     text-align: center;
105 | }
106 | .daohangleft::before{
107 |     display: table;
108 |     content: "";
109 | }
110 | .text{
111 |     color:white;
112 |     font-size: 20px;
113 |     margin-top: 6px;
114 | }
115 | .daohangright {
116 |     position: absolute;
117 |     top: 0;
118 |     right: 0;
119 |     height: 70px;
120 |     width: 1200px;
121 | }
122 | .daohangright ul{
123 |     overflow: hidden;
124 |     text-align: center;
125 |     height: 70px;
126 | }
127 | .daohangright li{
128 |     float: right;
129 |     width: 250px;
130 |     height: 70px;
131 |     color:white;
132 |     font-size: 20px;
133 |     list-style: none;
134 | }
135 | .hjk1{
136 |     background-color: rgba(88, 94, 92,0.7);
137 | }
138 | .hjk2{
139 |     background-color: rgba(77, 64, 93, 0.7);
140 | }
141 | .hjk3{
142 |     background-color: rgba(69, 79, 76, 0.7);
143 | }
144 | .hjk4{
145 |     background-color: rgba(89, 61, 67,0.7);
146 | }
147 | .introduction{
148 |     width: 1902px;
149 |     height: 730px;
150 | 
151 | }
152 | .int1{
153 |     width: 1170px;
154 |     height: 730px;
155 |     margin-right: auto;
156 |     margin-left: auto;
157 |     text-align: center;
158 | }
159 | .int1::before{
160 |     content: "";
161 |     display: table;
162 | }
163 | .int1 h1{
164 |     margin-top: 50px;
165 |     font-size: 40px;
166 | }
167 | .int1 h4{
168 |     margin-top: 10px;
169 |     font-size: 20px;
170 | }
171 | .int1>p{
172 | margin-top: 10px;
173 | color: #555;
174 | text-indent: 18px;
175 | }
176 | .line{
177 |     width: 30px;
178 |     height: 4px;
179 |     background-color: red;
180 |     position: relative;
181 |     left: 585px;
182 |     margin-top: 10px;
183 |     margin-bottom: 10px;
184 | }
185 | .one{
186 |     width: 280px;
187 |     height: 485px;
188 |     text-align: center;
189 |     margin-top: 50px;
190 |     position: relative;
191 | }
192 | .one::before{
193 |     content: "";
194 |     display: table;
195 | }
196 | .skill1{
197 |     width: 130px;
198 |     height: 130px;
199 |     border-radius: 50%;
200 |     border: 2px solid red;
201 |     text-align: center;
202 |     position: absolute;
203 |     top: 50px;
204 |     left: 28%;
205 | }
206 | .skill1 span{
207 |     display: block;
208 |     margin-top: 15px;
209 |     font-size: 50px;
210 | }
211 | .skill1 p{
212 |     font-size: 20px;
213 |     margin-top: 10px;
214 | }
215 | .skill1:hover{
216 |     background-color: red;
217 | }
218 | .onep{
219 |     position: absolute;
220 |     top: 200px;
221 |     color: #555;
222 | }
223 | .two{
224 |     width: 280px;
225 |     height: 485px;
226 |     text-align: center;
227 |     margin-top: 50px;
228 |     position: relative;
229 |     top: -535px;
230 |     left: 320px;
231 | }
232 | .three{
233 |     width: 280px;
234 |     height: 485px;
235 |     text-align: center;
236 |     margin-top: 50px;
237 |     position: relative;
238 |     top: -1070px;
239 |     left: 637px;
240 | }
241 | .four{
242 |     width: 280px;
243 |     height: 485px;
244 |     text-align: center;
245 |     margin-top: 50px;
246 |     position: relative;
247 |     top: -1605px;
248 |     left: 954px;
249 | }
250 | .jieshao{
251 |     width: 1902px;
252 |     height: 1044px;
253 |     background-color: rgb(35, 42, 52);
254 | }
255 | .int2{
256 |     width: 1170px;
257 |     height: 964px;
258 |     margin-right: auto;
259 |     margin-left: auto;
260 |     text-align: center;
261 | }
262 | .int2::before{
263 |     content: "";
264 |     display: table;
265 | }
266 | .int2 h1{
267 |     margin-top: 50px;
268 |     font-size: 40px;
269 |     color: white;
270 | }
271 | .int2 h4{
272 |     margin-top: 10px;
273 |     font-size: 20px;
274 |     color: white;
275 | }
276 | .int2>p{
277 | margin-top: 10px;
278 | color: rgb(214, 214, 214);
279 | text-indent: 18px;
280 | }
281 | .line1{
282 |     width: 30px;
283 |     height: 4px;
284 |     background-color: rgb(0, 204, 255);
285 |     position: relative;
286 |     left: 585px;
287 |     margin-top: 10px;
288 |     margin-bottom: 10px;
289 | }
290 | .int-y{
291 |     margin-top: 50px;
292 |     width: 360px;
293 |     height: 315px;
294 |     background-color: rgb(199, 199, 199);
295 |     transition: all 2s;
296 |     border-radius: 8px;
297 | }
298 | .int-y:hover{
299 |     transform: translateY(-30px);
300 |     box-shadow: 0 0 5px 4px #777;
301 |     background-color: rgb(0, 204, 255);
302 | }
303 | .int-y::before{
304 |     content: "";
305 |     display: table;
306 | }
307 | .int-y span{
308 |     display: block;
309 |     margin-top: 10px;
310 |     font-size: 200px;
311 | }
312 | .int-y p{
313 |     font-size: 20px;
314 | }
315 | .int-e{
316 |     margin-top: 50px;
317 |     width: 360px;
318 |     height: 315px;
319 |     background-color: rgb(199, 199, 199);
320 |     transition: all 2s;
321 |     border-radius: 8px;
322 |     position: relative;
323 |     top: -365px;
324 |     left: 405px;
325 | }
326 | .int-e:hover{
327 |     transform: translateY(-30px);
328 |     box-shadow: 0 0 5px 4px #777;
329 |     background-color: rgb(0, 204, 255);
330 | }
331 | .int-e::before{
332 |     content: "";
333 |     display: table;
334 | }
335 | .int-e span{
336 |     display: block;
337 |     margin-top: 10px;
338 |     font-size: 200px;
339 | }
340 | .int-e p{
341 |     font-size: 20px;
342 | }
343 | .int-s{
344 |     margin-top: 50px;
345 |     width: 360px;
346 |     height: 315px;
347 |     background-color: rgb(199, 199, 199);
348 |     transition: all 2s;
349 |     border-radius: 8px;
350 |     position: relative;
351 |     top: -730px;
352 |     left: 810px;
353 | }
354 | .int-s:hover{
355 |     transform: translateY(-30px);
356 |     box-shadow: 0 0 5px 4px #777;
357 |     background-color: rgb(0, 204, 255);
358 | }
359 | .int-s::before{
360 |     content: "";
361 |     display: table;
362 | }
363 | .int-s span{
364 |     display: block;
365 |     margin-top: 10px;
366 |     font-size: 200px;
367 | }
368 | .int-s p{
369 |     font-size: 20px;
370 | }
371 | .int-p{
372 |     margin-top: 50px;
373 |     width: 360px;
374 |     height: 315px;
375 |     background-color: rgb(199, 199, 199);
376 |     transition: all 2s;
377 |     border-radius: 8px;
378 |     position: relative;
379 |     top: -730px;
380 | }
381 | .int-p:hover{
382 |     transform: translateY(-30px);
383 |     box-shadow: 0 0 5px 4px #777;
384 |     background-color: rgb(0, 204, 255);
385 | }
386 | .int-p::before{
387 |     content: "";
388 |     display: table;
389 | }
390 | .int-p span{
391 |     display: block;
392 |     margin-top: 10px;
393 |     font-size: 200px;
394 | }
395 | .int-p p{
396 |     font-size: 20px;
397 | }
398 | .int-w{
399 |     margin-top: 50px;
400 |     width: 360px;
401 |     height: 315px;
402 |     background-color: rgb(199, 199, 199);
403 |     transition: all 2s;
404 |     border-radius: 8px;
405 |     position: relative;
406 |     top: -1095px;
407 |     left: 405px;
408 | }
409 | .int-w:hover{
410 |     transform: translateY(-30px);
411 |     box-shadow: 0 0 5px 4px #777;
412 |     background-color: rgb(0, 204, 255);
413 | }
414 | .int-w::before{
415 |     content: "";
416 |     display: table;
417 | }
418 | .int-w span{
419 |     display: block;
420 |     margin-top: 10px;
421 |     font-size: 200px;
422 | }
423 | .int-w p{
424 |     font-size: 20px;
425 | }
426 | .int-l{
427 |     margin-top: 50px;
428 |     width: 360px;
429 |     height: 315px;
430 |     background-color: rgb(199, 199, 199);
431 |     transition: all 2s;
432 |     border-radius: 8px;
433 |     position: relative;
434 |     top: -1460px;
435 |     left: 810px;
436 | }
437 | .int-l:hover{
438 |     transform: translateY(-30px);
439 |     box-shadow: 0 0 5px 4px #777;
440 |     background-color: rgb(0, 204, 255);
441 | }
442 | .int-l::before{
443 |     content: "";
444 |     display: table;
445 | }
446 | .int-l span{
447 |     display: block;
448 |     margin-top: 10px;
449 |     font-size: 200px;
450 | }
451 | .int-l p{
452 |     font-size: 20px;
453 | }
454 | .team1{
455 |     width: 1902px;
456 |     height: 1080px;
457 | }
458 | .imp1{
459 |     width: 1170px;
460 |     height: 1080px;
461 |     margin-right: auto;
462 |     margin-left: auto;
463 |     text-align: center;
464 | }
465 | .imp1::before{
466 |     content: "";
467 |     display: table;
468 | }
469 | .imp1 h1{
470 |     margin-top: 50px;
471 |     font-size: 40px;
472 |     color: black;
473 | }
474 | .imp1 h4{
475 |     margin-top: 10px;
476 |     font-size: 20px;
477 |     color: black;
478 | }
479 | .imp1>p{
480 | margin-top: 10px;
481 | color: #555;
482 | text-indent: 18px;
483 | }
484 | .pl1{
485 |     width: 360px;
486 |     height: 370px;
487 |     background-color: #999;
488 | 
489 | }
490 | .pl1img{
491 |     width: 360px;
492 |     height: 300px;
493 |     overflow: hidden;
494 |     position: relative;
495 |     margin-top: 50px;
496 | }
497 | .pl1img img{
498 |     width: 360px;
499 |     position: absolute;
500 |     top: 0px;
501 |     left: 0px;
502 |     
503 | }
504 | .pl1 h3{
505 |     margin-top: 10px;
506 | }
507 | .pl2{
508 |     width: 360px;
509 |     height: 370px;
510 |     background-color: #999;
511 |     position: relative;
512 |     top: -420px;
513 |     left: 405px;
514 | 
515 | }
516 | .pl2 h3{
517 |     margin-top: 10px;
518 | }
519 | .pl3{
520 |     width: 360px;
521 |     height: 370px;
522 |     background-color: #999;
523 |     position: relative;
524 |     top: -840px;
525 |     left: 810px;
526 | 
527 | }
528 | .pl3 h3{
529 |     margin-top: 10px;
530 | }
531 | .pl4{
532 |     width: 360px;
533 |     height: 370px;
534 |     background-color: #999;
535 |     position: relative;
536 |     top: -840px;
537 | 
538 | }
539 | .pl4 h3{
540 |     margin-top: 10px;
541 | }
542 | .pl5{
543 |     width: 360px;
544 |     height: 370px;
545 |     background-color: #999;
546 |     position: relative;
547 |     top: -1260px;
548 |     left: 405px;
549 | 
550 | }
551 | .pl5 h3{
552 |     margin-top: 10px;
553 | }
554 | .pl6{
555 |     width: 360px;
556 |     height: 370px;
557 |     background-color: #999;
558 |     position: relative;
559 |     top: -1680px;
560 |     left: 810px;
561 | 
562 | }
563 | .pl6 h3{
564 |     margin-top: 10px;
565 | }
566 | .past3{
567 |     width: 1902px;
568 |     height: 1000px;
569 |     background-color: rgb(223, 222, 222);
570 | }
571 | .last{
572 |     width: 1170px;
573 |     height: 1000px;
574 |     margin-left: auto;
575 |     margin-right: auto;
576 |     text-align: center;
577 | }
578 | .last::before{
579 |     content: "";
580 |     display: table;
581 | }
582 | .last h1{
583 |     margin-top: 50px;
584 |     font-size: 40px;
585 |     color: black;
586 | }
587 | .last h4{
588 |     margin-top: 10px;
589 |     font-size: 20px;
590 |     color: black;
591 | }
592 | .last>p{
593 | margin-top: 10px;
594 | color: #000;
595 | text-indent: 18px;
596 | }
597 | #asd{
598 |     text-align: left;
599 |     position: relative;
600 | }
601 | #asd li{
602 |     float: left;
603 |     width: 500px;
604 |     list-style: none;
605 | }
606 | #asd input{
607 |     width: 500px;
608 |     height: 50px;
609 |     font-size: 15px;
610 |     padding-left: 10px;
611 | }
612 | .ghj{
613 |     margin-top: 30px;
614 | }
615 | #fda{
616 |     margin-top: 40px;
617 |     width: 1170px;
618 |     height: 200px;
619 |     color: #999;
620 |     font-size: 20px;
621 | }
622 | .pop{
623 |     margin-right: 155px;
624 | }
625 | #asd button{
626 |     width: 100px;
627 |     height: 50px;
628 |     background-color: white;
629 |     border: none;
630 |     font-size: 18px;
631 |     outline: none;
632 |     position: relative;
633 |     left: 1070px;
634 | }
635 | .line2{
636 |     width: 30px;
637 |     height: 4px;
638 |     background-color: rgb(0, 255, 0);
639 |     position: relative;
640 |     left: 585px;
641 |     margin-top: 10px;
642 |     margin-bottom: 10px;
643 | }
644 | .line3{
645 |     width: 30px;
646 |     height: 4px;
647 |     background-color: rgb(38, 0, 255);
648 |     position: relative;
649 |     left: 585px;
650 |     margin-top: 10px;
651 |     margin-bottom: 10px;
652 | }
653 | a{
654 |     color: black;
655 |     text-decoration: none;
656 | }


--------------------------------------------------------------------------------
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/1.jpg


--------------------------------------------------------------------------------
/images/2020实训成果展.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/2020实训成果展.png


--------------------------------------------------------------------------------
/images/dilireba.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/dilireba.jpg


--------------------------------------------------------------------------------
/images/huge.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/huge.jpg


--------------------------------------------------------------------------------
/images/icon-slides.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/icon-slides.png


--------------------------------------------------------------------------------
/images/pengyuyan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/pengyuyan.jpg


--------------------------------------------------------------------------------
/images/slide-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/slide-1.jpg


--------------------------------------------------------------------------------
/images/slide-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/slide-2.jpg


--------------------------------------------------------------------------------
/images/weixin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/weixin.jpg


--------------------------------------------------------------------------------
/images/wuyanzu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/wuyanzu.jpg


--------------------------------------------------------------------------------
/images/zhangjie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/zhangjie.jpg


--------------------------------------------------------------------------------
/images/zhangmanyu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/zhangmanyu.jpg


--------------------------------------------------------------------------------
/images/想你所想.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dingzhiyuan123/Team-Introduction/e6be28b301dcde4d367232495d911b7a62256352/images/想你所想.png


--------------------------------------------------------------------------------
/work.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="css/01.css">
  8 |     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  9 |     <link rel="stylesheet" href="https://at.alicdn.com/t/font_2112023_fd5d8vx0mns.css">
 10 | <body>
 11 |         <div class="content">
 12 |             <div id="list">
 13 |                 <img src="images/1.jpg" alt="">
 14 |                 <img src="images/slide-1.jpg" alt="">
 15 |                 <img src="images/slide-2.jpg" alt="">
 16 |             </div>
 17 |             <button id="prev"></button>
 18 |             <button id="next"></button>
 19 |             <div id="btns">
 20 |                 <span class="current"></span>
 21 |                 <span></span>
 22 |                 <span></span>
 23 |             </div>
 24 |         </div>
 25 |         <div class="zhezhao">
 26 |             <h1>HELLO WE'RE FAMILY</h1>
 27 |             <h2>H5 极客影视</h2>
 28 |             <img class="img1" src="images/想你所想.png" alt="">
 29 |             <h3>2020实训成果展</h3>
 30 |         </div>
 31 |         <div class="daohang">
 32 |             <div class="daohangleft">
 33 |                 <p class="text"> 回到顶部<br>Back to top</p>
 34 |             </div>
 35 |             <div class="daohangright">
 36 |                 <ul>
 37 |                     <li class="hjk1">联系合作<br>Contact and cooperation</li>
 38 |                     <li class="hjk2">团队成员<br>Team members</li>
 39 |                     <li class="hjk3">项目开发<br>Project development</li>
 40 |                     <li class="hjk4">团队介绍<br>Team Introduction</li>
 41 |                 </ul>
 42 |             </div>
 43 |         </div>
 44 |         <div class="introduction">
 45 |             <div class="int1">
 46 |                 <h1>团队介绍</h1>
 47 |                 <h4>Team Introduction</h4>
 48 |                 <div class="line"></div>
 49 |                 <p>我们的团队不光在技术上处于行业前端，我们更注重将客户的产品表达的清楚与准确，我们成员百分之百是理科出身，在机械、游戏、电子、物理等各学科都有研究，能轻松理解客户的构思，所以我们能更好的将客户的意图表现出来。我们拥有自己的专业制作团队。在技术层面不断创新与提高，运用尖端的技术，不断满足客户对数字体验服务的需求。我们的目标是将本团队打造成国内前端行业第一品牌。</p>
 50 |                 <div class="one">
 51 |                     <div class="skill1">
 52 |                         <span class="iconfont icon-dc-icon-keyanyuansuo"></span>
 53 |                         <p>开发</p>
 54 |                     </div>
 55 |                     <p class="onep">Web开发 小程序开发 网页设计<br><br>我们重视开发，拥有专业的团队为您量身定制各种需求</p>
 56 |                 </div>
 57 |                 <div class="two">
 58 |                     <div class="skill1">
 59 |                         <span class="iconfont icon-yewutubiao_keyanxitong"></span>
 60 |                         <p>创新</p>
 61 |                     </div>
 62 |                     <p class="onep">重视创新 培养人才 注入生命力<br><br>我们注重创新，想法大胆，走在互联网前沿，项目经常让客户感到赞叹</p>
 63 |                 </div>
 64 |                 <div class="three">
 65 |                     <div class="skill1">
 66 |                         <span class="iconfont icon-hulianwang"></span>
 67 |                         <p>互联网+</p>
 68 |                     </div>
 69 |                     <p class="onep">大数据分析 精准定位<br><br>本团队建立已有十余年积累了大量经验更能审时度势</p>
 70 |                 </div>
 71 |                 <div class="four">
 72 |                     <div class="skill1">
 73 |                         <span class="iconfont icon-team-fill"></span>
 74 |                         <p>合作共赢</p>
 75 |                     </div>
 76 |                     <p class="onep">合作共赢<br><br>注重客户使用感受用心雕刻每一个细节反复打磨</p>
 77 |                 </div>
 78 |             </div>
 79 |         </div>
 80 |         <div class="jieshao">
 81 |             <div class="int2">
 82 |                 <h1>项目开发</h1>
 83 |                 <h4>Project development</h4>
 84 |                 <div class="line1"></div>
 85 |                 <p>召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工。明确需求目的，考虑当前需求设计是否可满足目的，整理流程中如果涉及的其他人员，则召集商讨。如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审。<br>以下是公司业务</p>
 86 |                 <div class="int-y">
 87 |                     <span class="iconfont icon-weixin"></span>
 88 |                     <p>微信小程序开发</p>
 89 |                 </div>
 90 |                 <div class="int-e">
 91 |                     <span class="iconfont icon-jquery"></span>
 92 |                     <p>实时通讯项目开发</p>
 93 |                 </div>
 94 |                 <div class="int-s">
 95 |                     <span class="iconfont icon-hulianwang"></span>
 96 |                     <p>物联网项目</p>
 97 |                 </div>
 98 |                 <div class="int-p">
 99 |                     <span class="iconfont icon-html5"></span>
100 |                     <p>网页维护与开发</p>
101 |                 </div>
102 |                 <div class="int-w">
103 |                     <span class="iconfont icon-PCtaishiji"></span>
104 |                     <p>Java软件开发</p>
105 |                 </div>
106 |                 <div class="int-l">
107 |                     <span class="iconfont icon-hongzhizhu"></span>
108 |                     <p>网络爬虫技术</p>
109 |                 </div>
110 |             </div>
111 |         </div>
112 |         <div class="team1">
113 |             <div class="imp1">
114 |                 <h1>团队成员</h1>
115 |                 <h4>Team members</h4>
116 |                 <div class="line2"></div>
117 |                 <p>本团队核心成员有6人，均为本公司的重要技术人员，善于开发各种软件，解决各种问题。拥有数年的工作经验。</p>
118 |                 <a href="https://ding-zhiyuan.gitee.io/homework7676">
119 |                 <div class="pl1">
120 |                     <div class="pl1img">
121 |                         <img src="images/pengyuyan.jpg" alt="">
122 |                     </div>
123 |                     <h3>丁志远</h3>
124 |                     <h5>微信小程序开发项目经理</h5>
125 |                 </div>
126 |                 </a>
127 |                 <div class="pl2">
128 |                     <div class="pl1img">
129 |                         <img src="images/wuyanzu.jpg" alt="">
130 |                     </div>
131 |                     <h3>梁寅</h3>
132 |                     <h5>亚太地区实时通讯项目开发项目经理</h5>
133 |                 </div>
134 |                 <div class="pl3">
135 |                     <div class="pl1img">
136 |                         <img src="images/zhangmanyu.jpg" alt="">
137 |                     </div>
138 |                     <h3>张宁远</h3>
139 |                     <h5>物联网项目中国区董事</h5>
140 |                 </div>
141 |                 <a href=" https://durian-girl.gitee.io/personal-introduction
142 |                 ">
143 |                     <div class="pl4">
144 |                         <div class="pl1img">
145 |                             <img src="images/zhangjie.jpg" alt="">
146 |                         </div>
147 |                         <h3>刘新宇</h3>
148 |                         <h5>网页维护与开发部门经理</h5>
149 |                     </div>
150 |                 </a>
151 |                 <div class="pl5">
152 |                     <div class="pl1img">
153 |                         <img src="images/dilireba.jpg" alt="">
154 |                     </div>
155 |                     <h3>王薛</h3>
156 |                     <h5>Java软件开发主管</h5>
157 |                 </div>
158 |                 <a href="https://su-qingqing.gitee.io/big-assignment-demo
159 |                 ">
160 |                 <div class="pl6">
161 |                     <div class="pl1img">
162 |                         <img src="images/huge.jpg" alt="">
163 |                     </div>
164 |                     <h3>苏青青</h3>
165 |                     <h5>网络爬虫技术执行经理</h5>
166 |                 </div>
167 |                 </a>
168 |             </div>
169 |             <div class="past3">
170 |                 <div class="last">
171 |                     <h1>联系合作</h1>
172 |                     <h4>Contact and cooperation</h4>
173 |                     <div class="line3"></div>
174 |                     <p>我们将会竭诚为您服务，期待创造辉煌的成果，共同蜕变，我们期待您的来访和来电！</p>
175 |                     <div id="asd">
176 |                         <h1>联系我们</h1>
177 |                         <p>contact us</p>
178 |                         <h2>位置：</h2>
179 |                         <p>position:</p>
180 |                         <h3>安徽省淮北市烈山区烈山镇淮北师范大学</h3>
181 |                         <h2>传真：</h2>
182 |                         <p>Fax:</p>
183 |                         <h3>05575828968</h3>
184 |                         <h2>电话：</h2>
185 |                         <p>Tel:</p>
186 |                         <h3>0561-3802652</h3>
187 |                         <ul class="ghj">
188 |                             <li class="pop">
189 |                                 <input type="text" placeholder="姓名">
190 |                             </li>
191 |                             <li>
192 |                                 <input type="text" placeholder="你的邮箱">
193 |                             </li>
194 |                         </ul>
195 |                         <textarea name="aaa" id="fda" cols="30" rows="10">写信息</textarea>
196 |                         <button>提交</button>
197 | 
198 |                     </div>
199 |                 </div>
200 |             </div>
201 |         </div>
202 |     <script>
203 |         $(".daohangleft").click(function(){
204 |             $("html").animate({scrollTop:"0px"},1000)
205 |         })
206 |         $(".hjk4").click(function(){
207 |             $("html").animate({scrollTop:"790px"},1000)
208 |         })
209 |         $(".hjk3").click(function(){
210 |             $("html").animate({scrollTop:"1520px"},1000)
211 |         })
212 |         $(".hjk2").click(function(){
213 |             $("html").animate({scrollTop:"2550px"},1000)
214 |         })
215 |         $(".hjk1").click(function(){
216 |             $("html").animate({scrollTop:"3650px"},1000)
217 |         })
218 |         $(function () {
219 |             var index = 0;
220 |             var timer;
221 |             // 1.点击next
222 |             $("#next").click(function () {
223 |                 index++;
224 |                 if (index > 2) {
225 |                     index = 0;
226 |                 }
227 |                 animate(index);
228 |             })
229 |             // 2.点击prev
230 |             $("#prev").click(function () {
231 |                 index--;
232 |                 console.log(index);
233 |                 if (index < 0) {
234 |                     index = 2;
235 |                 }
236 |                 animate(index);
237 |             })
238 |             // 3.焦点随左右按钮变化
239 |             function animate(index) {
240 |                 $("#list img").eq(index).fadeIn(2000).siblings().fadeOut(2000);
241 |                 $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
242 |             }
243 |             // 4.点击按钮,让对应的图片出现
244 |             $("#btns span").click(function () {
245 |                 $(this).addClass("current").siblings().removeClass("current");
246 |                 index = $(this).index();
247 |                 $("#list img").eq(index).fadeIn(2000).siblings().fadeOut(2000);
248 | 
249 |             })
250 |             //5.自动播放
251 |             function play() {
252 |                 timer = setInterval(function () {
253 |                     $("#next").click()
254 |                 }, 3000)
255 |             }
256 |             function stop() {
257 |                 clearInterval(timer)
258 |             }
259 |             $(".content").mouseover(function(){
260 |                 stop();
261 |             })
262 |             $(".content").mouseout(function(){
263 |                 play();
264 |             })
265 |             play();
266 |         })
267 |     </script>
268 | </body>
269 | </html>


--------------------------------------------------------------------------------