1 .content{ 2 width: 1000px; 3 margin: 0 auto; 4 /* 元素居中 */ 5 } 6 .content h1{ 7 color: #de4767; 8 text-align: center; 9 font-size: 44px; 10 font-weight: normal; 11 } 12 .content ul{ 13 padding-left: 0px; 14 text-align: center; 15 } 16 .content ul li:hover{ 17 background-position: center -95px; 18 } 19 .content ul li{ 20 /* 类似于float浮动效果 */ 21 display: inline-block; 22 /* css精灵图重点使用 23 background-image: url(../img/buyer/mod_circle.png); 24 background-position: center 5px; 25 background-repeat: no-repeat; 26 width: 80px; 27 height: 30px;*/ 28 background-image: url(../img/buyer/mod_circle.png); 29 background-position: center 5px; 30 background-repeat: no-repeat; 31 width: 80px; 32 height: 30px; 33 } 34 .content ul li a{ 35 padding-top: 40px; 36 display: block; 37 text-align: center; 38 text-decoration: none; 39 color: #333; 40 } 41 .content ul li a:hover{ 42 color: #DE4767; 43 } 44 .content .type h3{ 45 background-image: url(../img/buyer/mod_title.png); 46 background-position: 0px -190px; 47 background-repeat: no-repeat; 48 width: 300px; 49 height: 50px; 50 } 51 .content .type .text{ 52 border: 1px solid #ccc; 53 border-radius:15px ; 54 padding: 25px 20px; 55 text-align: center; 56 } 57 .content .type .text p{ 58 text-align: left; 59 font-size: 14px; 60 text-indent: 2em; 61 line-height: 2em; 62 margin: 0; 63 } 64 .content .type2 h3{ 65 background-image: url(../img/buyer/mod_title.png); 66 background-position: 0px 0px; 67 background-repeat: no-repeat; 68 width: 300px; 69 height: 50px; 70 } 71 .content .type2 .text{ 72 border: 1px solid #ccc; 73 border-radius:15px ; 74 padding: 25px 20px; 75 text-align: center; 76 } 77 .content .type2 .text p{ 78 text-align: left; 79 font-size: 14px; 80 text-indent: 2em; 81 line-height: 2em; 82 margin: 0; 83 } 84 .content .type3 h3{ 85 background-image: url(../img/buyer/mod_title.png); 86 background-position: 0px -89px; 87 background-repeat: no-repeat; 88 width: 300px; 89 height: 50px; 90 } 91 .content .type3 .text{ 92 border: 1px solid #ccc; 93 border-radius:15px ; 94 padding: 25px 20px; 95 text-align: center; 96 } 97 .content .type3 .text p{ 98 text-align: left; 99 font-size: 14px; 100 text-indent: 2em; 101 line-height: 2em; 102 margin: 0; 103 } 104 .content .type4 h3{ 105 background-image: url(../img/buyer/mod_title.png); 106 background-position: 0px -287px; 107 background-repeat: no-repeat; 108 width: 300px; 109 height: 50px; 110 } 111 .content .type4 .text{ 112 border: 1px solid #ccc; 113 border-radius:15px ; 114 padding: 25px 20px; 115 text-align: center; 116 } 117 .content .type4 .text p{ 118 text-align: left; 119 font-size: 14px; 120 text-indent: 2em; 121 line-height: 2em; 122 margin: 0; 123 } 124 .content .type5 h3{ 125 background-image: url(../img/buyer/mod_title.png); 126 background-position: 0px -592px; 127 background-repeat: no-repeat; 128 width: 300px; 129 height: 50px; 130 } 131 .content .type5 .text{ 132 border: 1px solid #ccc; 133 border-radius:15px ; 134 padding: 25px 20px; 135 text-align: center; 136 } 137 .content .type5 .text p{ 138 text-align: left; 139 font-size: 14px; 140 text-indent: 2em; 141 line-height: 2em; 142 margin: 0; 143 } 144 .content .type5 .text p span{ 145 color: #DE4767; 146 } 147 .content .type5 .text p.p1{ 148 background-color: #DE4767; 149 color: white; 150 font-family: "新宋体"; 151 }