采用CSS制作的图书堆叠

经典文件结构 html---CSS---JS

HTML中内容:

<div class="container isActive">

    <div class="book">

        <div class="book-paper">

            <div class="book-paper-shadow"></div>

        </div>

    </div>

    <div class="book">

        <div class="book-paper">

            <div class="book-paper-shadow"></div>

        </div>

    </div>

    <div class="book">

        <div class="book-paper">

            <div class="book-paper-shadow"></div>

        </div>

    </div>

</div>

<footer id="footer" class="footer hidden">

    <a href="http://codepen.io/WithAnEs/" target="_blank" class="withanes"><span class="withanes-name">Pen by WithAnEs</span>

    </a>

</footer>

  CSS中内容:

  1 @import url(//fonts.googleapis.com/css?family=Quicksand:400,700);
  2
  3 a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  4
  5   margin: 0;
  6
  7   padding: 0;
  8
  9   border: 0;
 10
 11   font-size: 100%;
 12
 13   font-weight: inherit;
 14
 15   font-style: inherit;
 16
 17   font-family: inherit;
 18
 19   vertical-align: baseline;
 20
 21 }
 22
 23
 24
 25 body {
 26
 27   line-height: 1;
 28
 29 }
 30
 31
 32
 33 ol, ul {
 34
 35   list-style: none;
 36
 37 }
 38
 39
 40
 41 blockquote, q {
 42
 43   quotes: none;
 44
 45 }
 46
 47
 48
 49 blockquote:after, blockquote:before, q:after, q:before {
 50
 51   content: ‘‘;
 52
 53   content: none;
 54
 55 }
 56
 57
 58
 59 table {
 60
 61   border-collapse: collapse;
 62
 63   border-spacing: 0;
 64
 65 }
 66
 67
 68
 69 :focus {
 70
 71   outline: 0;
 72
 73 }
 74
 75
 76
 77 html {
 78
 79   -webkit-text-size-adjust: 100%;
 80
 81   -ms-text-size-adjust: 100%;
 82
 83 }
 84
 85
 86
 87 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
 88
 89   display: block;
 90
 91 }
 92
 93
 94
 95 audio, canvas, picture, progress, video {
 96
 97   display: inline-block;
 98
 99 }
100
101
102
103 template {
104
105   display: none;
106
107 }
108
109
110
111 input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
112
113   -webkit-appearance: none;
114
115 }
116
117
118
119 input[type=search] {
120
121   -webkit-appearance: none;
122
123   -webkit-box-sizing: content-box;
124
125   -moz-box-sizing: content-box;
126
127   box-sizing: content-box;
128
129 }
130
131
132
133 textarea {
134
135   overflow: auto;
136
137   vertical-align: top;
138
139   resize: vertical;
140
141 }
142
143
144
145 ::-moz-focus-inner {
146
147   border: 0;
148
149   padding: 0;
150
151 }
152
153
154
155 body {
156
157   background-color: #333;
158
159   font-family: ‘Quicksand‘, sans-serif;
160
161 }
162
163
164
165 .hidden {
166
167   display: none;
168
169 }
170
171
172
173 .u-isVisuallyHidden {
174
175   width: 1px;
176
177   height: 1px;
178
179   padding: 0;
180
181   margin: -1px;
182
183   border: 0;
184
185   position: absolute;
186
187   clip: rect(0 0 0 0);
188
189   overflow: hidden;
190
191 }
192
193
194
195 .footer {
196
197   position: fixed;
198
199   right: 0;
200
201   bottom: 0;
202
203   left: 0;
204
205 }
206
207
208
209 .withanes {
210
211   display: block;
212
213   position: absolute;
214
215   right: 5px;
216
217   bottom: 5px;
218
219   width: 24px;
220
221   height: 32px;
222
223 }
224
225 .withanes:after {
226
227   content: ‘‘;
228
229   position: absolute;
230
231   top: -2px;
232
233   left: -2px;
234
235   width: 2px;
236
237   height: 2px;
238
239   box-shadow: 8px 2px #795f41, 10px 2px #795f41, 12px 2px #795f41, 14px 2px #795f41, 16px 2px #795f41, 18px 2px #795f41, 6px 4px #795f41, 8px 4px #795f41, 10px 4px #795f41, 12px 4px #795f41, 14px 4px #795f41, 16px 4px #795f41, 18px 4px #795f41, 20px 4px #795f41, 4px 6px #795f41, 6px 6px #795f41, 8px 6px #e9d8bc, 10px 6px #795f41, 12px 6px #795f41, 14px 6px #795f41, 16px 6px #795f41, 18px 6px #cbb490, 20px 6px #795f41, 22px 6px #795f41, 4px 8px #795f41, 6px 8px #e9d8bc, 8px 8px #e0c9a4, 10px 8px #e0c9a4, 12px 8px #e0c9a4, 14px 8px #e0c9a4, 16px 8px #e0c9a4, 18px 8px #cbb490, 20px 8px #cbb490, 22px 8px #795f41, 2px 10px #7e6f5d, 4px 10px #e9d8bc, 6px 10px #e0c9a4, 8px 10px #e0c9a4, 10px 10px #e0c9a4, 12px 10px #e0c9a4, 14px 10px #e0c9a4, 16px 10px #e0c9a4, 18px 10px #e0c9a4, 20px 10px #cbb490, 22px 10px #cbb490, 24px 10px #7e6f5d, 2px 12px #7e6f5d, 4px 12px #e9d8bc, 6px 12px #e0c9a4, 8px 12px #e0c9a4, 10px 12px #e0c9a4, 12px 12px #e0c9a4, 14px 12px #e0c9a4, 16px 12px #e0c9a4, 18px 12px #e0c9a4, 20px 12px #e0c9a4, 22px 12px #cbb490, 24px 12px #7e6f5d, 2px 14px #7e6f5d, 4px 14px #e9d8bc, 6px 14px #e0c9a4, 8px 14px #cbb490, 10px 14px #cbb490, 12px 14px #e0c9a4, 14px 14px #e0c9a4, 16px 14px #cbb490, 18px 14px #cbb490, 20px 14px #e0c9a4, 22px 14px #cbb490, 24px 14px #7e6f5d, 2px 16px #b6a281, 4px 16px #e9d8bc, 6px 16px #e0c9a4, 8px 16px #000000, 10px 16px #000000, 12px 16px #e9d8bc, 14px 16px #e0c9a4, 16px 16px #000000, 18px 16px #000000, 20px 16px #e0c9a4, 22px 16px #cbb490, 24px 16px #b6a281, 2px 18px #cbb490, 4px 18px #e9d8bc, 6px 18px #e0c9a4, 8px 18px #e0c9a4, 10px 18px #e0c9a4, 12px 18px #e9d8bc, 14px 18px #e0c9a4, 16px 18px #e0c9a4, 18px 18px #e0c9a4, 20px 18px #e0c9a4, 22px 18px #cbb490, 24px 18px #cbb490, 4px 20px #795f41, 6px 20px #e0c9a4, 8px 20px #e0c9a4, 10px 20px #e0c9a4, 12px 20px #e9d8bc, 14px 20px #e0c9a4, 16px 20px #e0c9a4, 18px 20px #e0c9a4, 20px 20px #e0c9a4, 22px 20px #795f41, 4px 22px #795f41, 6px 22px #e0c9a4, 8px 22px #e0c9a4, 10px 22px #e0c9a4, 12px 22px #cbb490, 14px 22px #cbb490, 16px 22px #e0c9a4, 18px 22px #e0c9a4, 20px 22px #cbb490, 22px 22px #795f41, 4px 24px #795f41, 6px 24px #795f41, 8px 24px #795f41, 10px 24px #795f41, 12px 24px #795f41, 14px 24px #795f41, 16px 24px #795f41, 18px 24px #795f41, 20px 24px #795f41, 22px 24px #795f41, 6px 26px #795f41, 8px 26px #795f41, 10px 26px #e0c9a4, 12px 26px #e0c9a4, 14px 26px #e0c9a4, 16px 26px #b6a281, 18px 26px #795f41, 20px 26px #795f41, 8px 28px #7e6f5d, 10px 28px #e0c9a4, 12px 28px #7e6f5d, 14px 28px #7e6f5d, 16px 28px #b6a281, 18px 28px #7e6f5d, 8px 30px #7e6f5d, 10px 30px #795f41, 12px 30px #7e6f5d, 14px 30px #7e6f5d, 16px 30px #795f41, 18px 30px #7e6f5d, 10px 32px #7e6f5d, 12px 32px #7e6f5d, 14px 32px #7e6f5d, 16px 32px #7e6f5d;
240
241 }
242
243
244
245 .withanes-name {
246
247   box-sizing: border-box;
248
249   position: absolute;
250
251   bottom: 4px;
252
253   right: 16px;
254
255   padding: 5px 7px;
256
257   width: 0;
258
259   text-align: center;
260
261   font-size: 12px;
262
263   font-weight: 700;
264
265   background-color: white;
266
267   opacity: 0;
268
269   transform: translateX(0);
270
271   color: black;
272
273   overflow: hidden;
274
275   transition: opacity 250ms ease-in-out, width 0 linear 250ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
276
277 }
278
279 .withanes-name:after {
280
281   width: 0;
282
283   height: 0;
284
285   content: ‘‘;
286
287   position: absolute;
288
289   z-index: 2;
290
291   border-top: 5px solid transparent;
292
293   border-bottom: 5px solid transparent;
294
295   border-left: 8px solid white;
296
297   position: absolute;
298
299   top: calc(50% - 5px);
300
301   right: -6px;
302
303 }
304
305
306
307 .withanes:hover .withanes-name {
308
309   width: 120px;
310
311   overflow: visible;
312
313   opacity: 1;
314
315   transform: translateX(-20px) rotate(0deg);
316
317   box-shadow: 0 0 16px rgba(0, 0, 0, 0.33);
318
319   transition: opacity 125ms ease-in-out 100ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
320
321 }
322
323
324
325 .grid {
326
327   display: block;
328
329   /* IE9 fallback for Flex */
330
331   display: flex;
332
333   /* Using Flex for equal height containers */
334
335   flex-wrap: wrap;
336
337   /* Children need to wrap */
338
339   margin-top: -20px;
340
341   margin-left: -20px;
342
343   align-items: stretch;
344
345   /* For equal height */
346
347   font-size: 0;
348
349   /* Horiontal gap fix for inline-block fallback */
350
351 }
352
353
354
355 .grid + .grid {
356
357   margin-top: 0;
358
359   /* reset margin on stacked grids */
360
361 }
362
363
364
365 .grid-col {
366
367   box-sizing: border-box;
368
369   /* Using box-sizing so padding doesn‘t affect width */
370
371   display: inline-block;
372
373   /* IE9 fallback */
374
375   width: 100%;
376
377   padding-top: 20px;
378
379   padding-left: 20px;
380
381   vertical-align: top;
382
383   font-size: 16px;
384
385   /* Resetting font-size for horizontal gap fix */
386
387 }
388
389
390
391 .grid-col_1of12 {
392
393   width: 8.33333%;
394
395 }
396
397
398
399 .grid-col_2of12 {
400
401   width: 16.66667%;
402
403 }
404
405
406
407 .grid-col_3of12 {
408
409   width: 25%;
410
411 }
412
413
414
415 .grid-col_4of12 {
416
417   width: 33.33333%;
418
419 }
420
421
422
423 .grid-col_5of12 {
424
425   width: 41.66667%;
426
427 }
428
429
430
431 .grid-col_6of12 {
432
433   width: 50%;
434
435 }
436
437
438
439 .grid-col_7of12 {
440
441   width: 58.33333%;
442
443 }
444
445
446
447 .grid-col_8of12 {
448
449   width: 66.66667%;
450
451 }
452
453
454
455 .grid-col_9of12 {
456
457   width: 75%;
458
459 }
460
461
462
463 .grid-col_10of12 {
464
465   width: 83.33333%;
466
467 }
468
469
470
471 .grid-col_11of12 {
472
473   width: 91.66667%;
474
475 }
476
477
478
479 .grid-col_12of12 {
480
481   width: 100%;
482
483 }
484
485
486
487 @media (min-width: 768px) {
488
489   .grid-col_1of12SM {
490
491     width: 8.33333%;
492
493   }
494
495
496
497   .grid-col_2of12SM {
498
499     width: 16.66667%;
500
501   }
502
503
504
505   .grid-col_3of12SM {
506
507     width: 25%;
508
509   }
510
511
512
513   .grid-col_4of12SM {
514
515     width: 33.33333%;
516
517   }
518
519
520
521   .grid-col_5of12SM {
522
523     width: 41.66667%;
524
525   }
526
527
528
529   .grid-col_6of12SM {
530
531     width: 50%;
532
533   }
534
535
536
537   .grid-col_7of12SM {
538
539     width: 58.33333%;
540
541   }
542
543
544
545   .grid-col_8of12SM {
546
547     width: 66.66667%;
548
549   }
550
551
552
553   .grid-col_9of12SM {
554
555     width: 75%;
556
557   }
558
559
560
561   .grid-col_10of12SM {
562
563     width: 83.33333%;
564
565   }
566
567
568
569   .grid-col_11of12SM {
570
571     width: 91.66667%;
572
573   }
574
575
576
577   .grid-col_12of12SM {
578
579     width: 100%;
580
581   }
582
583 }
584
585 @media (min-width: 960px) {
586
587   .grid-col_1of12MD {
588
589     width: 8.33333%;
590
591   }
592
593
594
595   .grid-col_2of12MD {
596
597     width: 16.66667%;
598
599   }
600
601
602
603   .grid-col_3of12MD {
604
605     width: 25%;
606
607   }
608
609
610
611   .grid-col_4of12MD {
612
613     width: 33.33333%;
614
615   }
616
617
618
619   .grid-col_5of12MD {
620
621     width: 41.66667%;
622
623   }
624
625
626
627   .grid-col_6of12MD {
628
629     width: 50%;
630
631   }
632
633
634
635   .grid-col_7of12MD {
636
637     width: 58.33333%;
638
639   }
640
641
642
643   .grid-col_8of12MD {
644
645     width: 66.66667%;
646
647   }
648
649
650
651   .grid-col_9of12MD {
652
653     width: 75%;
654
655   }
656
657
658
659   .grid-col_10of12MD {
660
661     width: 83.33333%;
662
663   }
664
665
666
667   .grid-col_11of12MD {
668
669     width: 91.66667%;
670
671   }
672
673
674
675   .grid-col_12of12MD {
676
677     width: 100%;
678
679   }
680
681 }
682
683 .u-srOnly {
684
685   width: 1px;
686
687   height: 1px;
688
689   padding: 0;
690
691   margin: -1px;
692
693   border: 0;
694
695   position: absolute;
696
697   clip: rect(0 0 0 0);
698
699   overflow: hidden;
700
701 }
702
703
704
705 body {
706
707   background-color: #737373;
708
709 }
710
711
712
713 .container {
714
715   position: absolute;
716
717   top: 50%;
718
719   left: 50%;
720
721   transform: translate(-50%, -50%);
722
723   cursor: pointer;
724
725 }
726
727 .container:after {
728
729   content: ‘‘;
730
731   position: absolute;
732
733   right: -19px;
734
735   bottom: -6px;
736
737   left: -5px;
738
739   height: 9px;
740
741   border-radius: 50%;
742
743   background-color: rgba(0, 0, 0, 0.25);
744
745   z-index: -1;
746
747   transition: background-color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
748
749 }
750
751
752
753 .book {
754
755   position: relative;
756
757   width: 120px;
758
759   height: 30px;
760
761   margin-left: 6px;
762
763   background-color: #FF5420;
764
765   border-radius: 5px;
766
767   box-shadow: inset 0 -5px #ff4007;
768
769   transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
770
771 }
772
773 .book:before, .book:after {
774
775   content: ‘‘;
776
777   width: 12px;
778
779   height: 5px;
780
781   position: absolute;
782
783   left: -6px;
784
785   border-radius: 5px;
786
787   background-color: #FF5420;
788
789 }
790
791 .book:after {
792
793   bottom: 0;
794
795   background-color: #ff4007;
796
797 }
798
799
800
801 .book-paper {
802
803   position: absolute;
804
805   top: 5px;
806
807   bottom: 5px;
808
809   width: 40px;
810
811   background-color: #f1f1f1;
812
813   border-top-right-radius: 3px;
814
815   border-bottom-right-radius: 3px;
816
817 }
818
819 .book-paper:before, .book-paper:after {
820
821   content: ‘‘;
822
823   position: absolute;
824
825   right: 0;
826
827   width: 20px;
828
829   height: 6px;
830
831   background-color: #dddddd;
832
833   border-radius: 3px;
834
835 }
836
837 .book-paper:before {
838
839   border-bottom-right-radius: 0;
840
841 }
842
843 .book-paper:after {
844
845   bottom: 0;
846
847   border-top-right-radius: 0;
848
849 }
850
851
852
853 .book-paper-shadow {
854
855   position: absolute;
856
857   top: 6px;
858
859   right: 0;
860
861   width: 13px;
862
863   height: 8px;
864
865   background-color: #dddddd;
866
867 }
868
869 .book-paper-shadow:before {
870
871   content: ‘‘;
872
873   position: absolute;
874
875   top: 0;
876
877   bottom: 0;
878
879   left: -3px;
880
881   width: 8px;
882
883   border-radius: 3px;
884
885   background-color: #f1f1f1;
886
887 }
888
889
890
891 .book:nth-child(1) {
892
893   left: 6px;
894
895 }
896
897
898
899 .book:nth-child(2) {
900
901   background-color: #4D4D4D;
902
903   box-shadow: inset 0 -5px #404040;
904
905 }
906
907 .book:nth-child(2):before {
908
909   background-color: #4D4D4D;
910
911 }
912
913 .book:nth-child(2):after {
914
915   background-color: #404040;
916
917 }
918
919
920
921 .book:nth-child(3) {
922
923   left: 8px;
924
925   background-color: #2BA7FF;
926
927   box-shadow: inset 0 -5px #129cff;
928
929 }
930
931 .book:nth-child(3):before {
932
933   background-color: #2BA7FF;
934
935 }
936
937 .book:nth-child(3):after {
938
939   background-color: #129cff;
940
941 }
942
943
944
945 .container:hover:after,
946
947 .container:focus:after {
948
949   background-color: rgba(0, 0, 0, 0.18);
950
951 }
952
953 .container:hover .book:nth-child(1),
954
955 .container:focus .book:nth-child(1) {
956
957   transform: translate(6px, -37px) rotateZ(-13deg);
958
959 }
960
961 .container:hover .book:nth-child(2),
962
963 .container:focus .book:nth-child(2) {
964
965   transform: translate(9px, -11px) rotateZ(11deg);
966
967 }

原文地址:https://www.cnblogs.com/mhxy13867806343/p/8447169.html

时间: 2024-11-08 19:50:15

采用CSS制作的图书堆叠的相关文章

如何使用纯 CSS 制作四子连珠游戏

序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指正. 原文:How the Roman Empire Made Pure CSS Connect 4 Possible 翻译:nzbin 实验是学习新技巧.思考新想法.并突破自身极限的有趣的方式."纯 CSS"演示很早就有了,但是随着浏览器和

CSS制作水平垂直居中对齐 多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

利用CSS制作图形效果

前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型的CSS,只要它至少在一个浏览器中支持. 一. 实现一个心形 #heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 5

CSS制作水平垂直居中对齐

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

DIV CSS制作网页时易犯的错误总结

CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常 为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的 方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 Webjx.Com 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 网页教学

转 CSS制作水平垂直居中对齐各种方法总结

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

css制作三角形,下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容