{ 3 margin: 0 auto; 4 max-width: 980px; 5 position: relative; 6 }

　　2.header

　　　　我遇到的难点是：（1）图片和多行文字水平居中对齐（2）导航中a标签的垂直文字排列以及靠右排列

　　　　解决方法：（1）把图片设置为背景，并且设置位置为左中，然后排列文字居中，然后用padding-left属性分开图片和文字。

　　　　　　　　　（2）a标签内文字垂直方法：把a标签设置为block格式，然后设置block的宽度为width: 18px;因为字体是14px；略大于一个字体，小于两个文字宽度，所以　　　　　　　　　　　可以呈现单字竖直排列。定位方面一定要注意position和float两个的定位原理和文档流的变换。

1 header { 2 position: relative; : 100%; 5 } { 8 width: 100%; 9 height: 215px; 10 } { 14 height: 152px; 15 width: 370px; 16 position: relative; 17 padding-left: 95px; 18 margin-top: 36px; 19 display: inline-block; 20 font-family: FZCCHJW—GB1-0, serif; 21 line-height: 35px; 22 float: left; 23 background: url(images/logo.png) no-repeat left top; 24 } { 27 font-size: 24px; 28 } { 31 font-size: 14px; 32 } { 37 position: absolute; 38 right: 0; 39 } { 42 background-color: rgb(160, 39, 22); 43 color: #fff; 44 } { 48 margin-top: 26px; 49 display: block; 50 width: 18px; 51 text-decoration: none; 52 float: left; 53 margin-right: 20px; 54 color: #000; 55 font-size: 14px; 56 padding: 2px; 57 line-height: 20px; 58 } { 62 color: #fff; 63 background-color: rgb(160, 39, 22); 64 }

　　3.center_content部分

　　　　左侧主要分为三部分，上面的两个div设置为float：left；下面一个div。就不多赘述了，方法差不多。比较简单。比较考验的就是耐心和一直测量各种数据。　　　

1 .left_main { 2 float: left; 3 width: 740px; 4 height: 500px; 5 } { 8 width: 330px; 9 height: 248px; 10 position: relative; 11 float: left; } { 16 position: absolute; 17 z-index: 101; 18 left: 0; 19 bottom: 0; 20 width: 100%; 21 color: #fff; 22 background: rgba(0, 0, 0, .7); 23 height: 30px; 24 line-height: 30px; 25 font-size: 12px; 26 overflow: hidden; 27 } 28 .content{ 29 width: 330px; 30 height: 248px; 31 float: left; 32 margin-left: 40px; 33 position: relative; } { 38 border-bottom: dotted #ccc; 39 height: 36px; 40 } 41 .content .t1_1{ 42 float: left; 43 margin-top: 11px; 44 font-weight:bold; 45 font-size: 14px; 46 47 } { 50 margin-top: 12px; 51 font-size: 12px; 52 line-height: 12px; 53 text-align: center; 54 color: #fff; 55 float: right; 56 width: 53px; 57 height: 12px; 58 -webkit-border-radius: 2px; 59 -moz-border-radius: 2px; 60 border-radius: 2px; 61 background-color: rgb(185,15,16); 62 63 } 64 .boo{ 65 height: 164px; 66 border-bottom: dotted #ccc; 67 } { 70 width: 106px; 71 height: 106px; 72 -webkit-border-radius: 10px; 73 -moz-border-radius: 10px; 74 border-radius: 10px; 75 background-color: #fff; 76 float: left; 77 margin-top: 30px; 78 } { 81 display: block; 82 margin-top: 30px; 83 float: right; 84 font-size: 12px; 85 margin-left: 20px; 86 width: 200px; 87 line-height: 22px; 88 } 89 .boom_1 .detail{ 90 color: red; 91 } 92 .nav2 a{ 93 margin-top: 18px; 94 display: inline-block; 95 margin-right: 8px; 96 font-size: 12px; 97 color: red; 98 text-decoration: none; 99 } { 102 width: 701px; 103 height: 218px; 104 float: left; 105 margin-top: 35px; 106 position: relative; 107 background-color: #fff; 108 } { 111 width: 641px; 112 height: 50px; 113 border-bottom: solid #ccc; 114 margin-left: 20px; 115 } 116 .ty_head .t3_1{ 117 float: left; 118 margin-top: 18px; 119 font-weight: bold; 120 font-size: 14px; 121 } 122 .t3_2{ 123 margin-top: 19px; 124 float: right; 125 font-size: 12px; 126 color: #999; 127 } { 130 width: 641px; 131 margin-left: 20px; 132 } 133 .ty_example{ 134 margin-top: 24px; 135 float: left; 136 margin-left: 10px; 137 text-align: center; 138 139 } 140 .ty_examples a{ 141 font-size: 12px; 142 font-weight: bold; 143 text-decoration: none; 144 color: #000; 145 }

　　　　右侧：