1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <script src="/Scripts/jquery-1.10.2.min.js"></script> 8 9 <link rel="stylesheet" href=""> 10 <style> 11 *{ 12 padding:0; 13 margin:0; 14 font: 24px/24px "Microsoft Yahei"; 15 color:white; 16 } 17 body{ 18 background:#202020; 19 } 20 .main{ 21 width: 1520px; 22 height:900px; 23 background:#06192A; 24 margin:0 auto; 25 border:2px solid white; 26 } 27 .main header{ 28 height: 150px; 29 border-bottom:2px solid #637382; 30 } 31 .main header h1{ 32 text-align:center; 33 font-weight:bolder; 34 position: relative; 35 bottom:0; 36 padding-top: 104px; 37 } 38 .main section{ 39 width:1350px; 40 /*border-bottom:2px solid #637382;*/ 41 margin:0 auto; 42 /*padding-top:50px; 43 padding-left:98.5px;*/ 44 45 display:inline-block; 46 padding-top: 50px; 47 padding-left: 170px; 48 } 49 50 .main section .round{ 51 width:300px; 52 height:300px; 53 position: relative; 54 /*background:gray;*/ 55 border-radius:50%; 56 57 margin-right: 150px; 58 margin-bottom: 30px; 59 float:left; 60 } 61 62 .main section .round ul{ 63 list-style: none; 64 margin: 0; 65 padding: 0; 66 } 67 68 .main section .round ul.mark li{ 69 width:2px; 70 height:18px; 71 display:block; 72 background:white; 73 position: absolute; 74 top:50%; 75 left:50%; 76 } 77 78 .main section .round ul.mark li:nth-child(odd){ 79 height:26px; 80 top: calc(50% - 4px); 81 } 82 83 .digits::before{ 84 width: 34px; 85 height: 34px; 86 position: absolute; 87 border-radius:50%; 88 top:calc(50% - 8px); 89 left:calc(50% - 17px); 90 content:""; 91 background:#003951; 92 } 93 94 .digits::after{ 95 position: absolute; 96 top: 181px; 97 left: 137px; 98 content:"MPH"; 99 font-size:12px; 100 font-weight:lighter; 101 opacity:0.5; 102 } 103 104 .main section .round ul.digits li{ 105 font-size: 20px; 106 display: block; 107 position: absolute; 108 top: 50%; 109 left: 50%; 110 line-height: 20px; 111 text-align: center; 112 font-weight: lighter; 113 } 114 115 .main section .round ul.digits li:nth-child(1){ 116 transform: translate(-93px, 35px); 117 } 118 .main section .round ul.digits li:nth-child(2){ 119 transform: translate(-95px, -25px); 120 } 121 .main section .round ul.digits li:nth-child(3){ 122 transform: translate(-65px, -70px); 123 } 124 .main section .round ul.digits li:nth-child(4){ 125 transform: translate(-18px, -90px); 126 } 127 .main section .round ul.digits li:nth-child(5){ 128 transform: translate(45px, -70px); 129 } 130 .main section .round ul.digits li:nth-child(6){ 131 transform: translate(60px, -25px); 132 } 133 .main section .round ul.digits li:nth-child(7){ 134 transform: translate(68px, 35px); 135 } 136 137 .main section .round .hand{ 138 width: .2em; 139 height: .2em; 140 background: #c00; 141 border-radius: 50%; 142 position: absolute; 143 top: 157px; 144 left: 148px; 145 146 -webkit-transition: all 1s linear; 147 -moz-transition: all 1s linear; 148 -ms-transition: all 1s linear; 149 -o-transition: all 1s linear; 150 transition: all 1s linear; 151 152 -webkit-transform: rotate(0deg); 153 -moz-transform: rotate(0deg); 154 transform: rotate(0deg); 155 box-shadow: rgba(0, 0, 0, .8) 0 0 .2em; 156 } 157 158 .main section .round .hand:before{ 159 content: ""; 160 width: .2em; 161 height: 128px; 162 border-radius: .2em .2em 0 0/10em 10em 0 0; 163 background: #c00; 164 position: absolute; 165 top: -127px; 166 left: .1em; 167 margin: 0 0 -2em -.1em; 168 } 169 170 .main section .round .digital{ 171 position: absolute; 172 top: 225px; 173 left: 76px; 174 } 175 176 .main section .round .digital input,.main section .round .digital ul{ 177 float:left; 178 } 179 180 .main section .round .digital ul{ 181 width:20px; 182 height: 30px; 183 color: #ddd; 184 font-family: Consolas, monaco, monospace; 185 background:#000009; 186 margin:0 1px !important; 187 text-align:center; 188 overflow:hidden; 189 position: relative; 190 } 191 192 .main section .round .digital ul li{ 193 width:18px; 194 height:26px; 195 margin-top:2px; 196 background:#1A2730; 197 /*font-weight:lighter;*/ 198 position: relative; 199 overflow:hidden; 200 margin-left:1px; 201 } 202 203 .main section .round .digital ul.mph,.main section .round .digital ul.mph li{ 204 background:none; 205 cursor: pointer; 206 overflow:visible; 207 } 208 209 .main section .round .digital ul.mph li{ 210 height: 30px; 211 margin-top:0; 212 } 213 214 .main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{ 215 display:block; 216 position: relative; 217 } 218 .main section .round .digital ul.mph b{ 219 width:16px; 220 height:16px; 221 border-radius:8px; 222 background:white; 223 top:-2px; 224 margin-left:2px; 225 } 226 227 .main section .round .digital ul.mph b.selected:before{ 228 background:red; 229 width:12px; 230 height: 12px; 231 content:""; 232 border-radius:6px; 233 top:2px; 234 left:2px; 235 } 236 237 .main section .round .digital ul.mph span{ 238 width:20px; 239 height:15px; 240 font-size:12px; 241 top:-6px; 242 } 243 244 .main section .round .digital ul.mph:first-child{ 245 margin-right: 10px !important; 246 } 247 248 .main secti
新闻热点
疑难解答
