1 /*网站： http://www.wufangbo.com/normalize-css/*/ 2 3 4 5 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 6 7 /** 8 * 1. Set default font family to sans-serif. 9 * 2. Prevent iOS and IE text size adjust after device orientation change, 10 * without disabling user zoom. 11 */ 12 13 input{ 14 border:none; 15 outline: none; 16 } 17 18 html { 19 font-family: sans-serif; /* 1 */ 20 -ms-text-size-adjust: 100%; /* 2 */ 21 -webkit-text-size-adjust: 100%; /* 2 */ 22 color: #222; 23 font-size: 100%; 24 line-height: 1.4; 25 } 26 27 /* HTML5 display definitions 28 ========================================================================== */ 29 30 /** 31 * Correct `block` display not defined for any HTML5 element in IE 8/9. 32 * Correct `block` display not defined for `details` or `summary` in IE 10/11 33 * and Firefox. 34 * Correct `block` display not defined for `main` in IE 11. 35 */ 36 37 article, 38 aside, 39 details, 40 figcaption, 41 figure, 42 footer, 43 header, 44 hgroup, 45 main, 46 menu, 47 nav, 48 section, 49 summary { 50 display: block; 51 } 52 53 /** 54 * 1. Correct `inline-block` display not defined in IE 8/9. 55 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 56 */ 57 58 audio, 59 canvas, 60 progress, 61 video { 62 display: inline-block; /* 1 */ 63 vertical-align: baseline; /* 2 */ 64 } 65 66 /** 67 * Prevent modern browsers from displaying `audio` without controls. 68 * Remove excess height in iOS 5 devices. 69 */ 70 71 audio:not([controls]) { 72 display: none; 73 height: 0; 74 } 75 76 /** 77 * Address `[hidden]` styling not present in IE 8/9/10. 78 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 79 */ 80 81 [hidden], 82 template { 83 display: none; 84 } 85 86 /* Links 87 ========================================================================== */ 88 89 /** 90 * Remove the gray background color from active links in IE 10. 91 */ 92 93 a { 94 background-color: transparent; 95 } 96 97 /** 98 * Improve readability of focused elements when they are also in an 99 * active/hover state. 100 */ 101 102 a:active, 103 a:hover { 104 outline: 0; 105 } 106 107 /* Text-level semantics 108 ========================================================================== */ 109 110 /** 111 * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 112 */ 113 114 abbr[title] { 115 border-bottom: 1px dotted; 116 } 117 118 /** 119 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 120 */ 121 122 b, 123 strong { 124 font-weight: bold; 125 } 126 127 /** 128 * Address styling not present in Safari and Chrome. 129 */ 130 131 dfn { 132 font-style: italic; 133 } 134 135 /** 136 * Address variable `h1` font-size and margin within `section` and `article` 137 * contexts in Firefox 4+, Safari, and Chrome. 138 */ 139 140 h1 { 141 font-size: 2em; 142 margin: 0.67em 0; 143 } 144 145 /** 146 * Address styling not present in IE 8/9. 147 */ 148 149 mark { 150 background: #ff0; 151 color: #000; 152 } 153 154 /** 155 * Address inconsistent and variable font size in all browsers. 156 */ 157 158 small { 159 font-size: 80%; 160 } 161 162 /** 163 * Prevent `sub` and `sup` affecting `line-height` in all browsers. 164 */ 165 166 sub, 167 sup { 168 font-size: 75%; 169 line-height: 0; 170 position: relative; 171 vertical-align: baseline; 172 } 173 174 sup { 175 top: -0.5em; 176 } 177 178 sub { 179 bottom: -0.25em; 180 } 181 182 /* Embedded content 183 ========================================================================== */ 184 185 /** 186 * Remove border when inside `a` element in IE 8/9/10. 187 */ 188 189 img { 190 border: 0; 191 } 192 193 /** 194 * Correct overflow not hidden in IE 9/10/11. 195 */ 196 197 svg:not(:root) { 198 overflow: hidden; 199 } 200 201 /* Grouping content 202 ========================================================================== */ 203 204 /** 205 * Address margin not present in IE 8/9 and Safari. 206 */ 207 208 figure { 209 margin: 1em 40px; 210 } 211 212 /** 213 * Address differences between Firefox and other browsers. 214 */ 215 216 hr { 217 box-sizing: content-box; 218 height: 0; 219 } 220 221 /** 222 * Contain overflow in all browsers. 223 */ 224 225 pre { 226 overflow: auto; 227 } 228 229 /** 230 * Address odd `em`-unit font size rendering in all browsers. 231 */ 232 233 code, 234 kbd, 235 pre, 236 samp { 237 font-family: monospace, monospace; 238 font-size: 1em; 239 } 240 241 /* Forms 242 ========================================================================== */ 243 244 /** 245 * Known limitation: by default, Chrome and Safari on OS X allow very limited 246 * styling of `select`, unless a `border` property is set. 247 */ 248 249 /** 250 * 1. Correct color not being inherited. 251 * Known issue: affects color of disabled elements. 252 * 2. Correct font properties not being inherited. 253 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 254 */ 255 256 button, 257 input, 258 optgroup, 259 select, 260 textarea { 261 color: inherit; /* 1 */ 262 font: inherit; /* 2 */ 263 margin: 0; /* 3 */ 264 } 265 266 /** 267 * Address `overflow` set to `hidden` in IE 8/9/10/11. 268 */ 269 270 button { 271 overflow: visible; 272 } 273 274 /** 275 * Address inconsistent `text-transform` inheritance for `button` and `select`. 276 * All other form control elements do not inherit `text-transform` values. 277 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 278 * Correct `select` style inheritance in Firefox. 279 */ 280 281 button, 282 select { 283 text-transform: none; 284 } 285 286 /** 287 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 288 * and `video` controls. 289 * 2. Correct inability to style clickable `input` types in iOS. 290 * 3. Improve usability and consistency of cursor style between image-type 291 * `input` and others. 292 */ 293 294 button, 295 html input[type="button"], /* 1 */ 296 input[type="reset"], 297 input[type="submit"] { 298 -webkit-appearance: button; /* 2 */ 299 cursor: pointer; /* 3 */ 300 } 301 302 /** 303 * Re-set default cursor for disabled elements. 304 */ 305 306 button[disabled], 307 html input[disabled] { 308 cursor: default; 309 } 310 311 /** 312 * Remove inner padding and border in Firefox 4+. 313 */ 314 315 button::-moz-focus-inner, 316 input::-moz-focus-inner { 317 border: 0; 318 padding: 0; 319 } 320 321 /** 322 * Address Firefox 4+ setting `line-height` on `input` using `!important` in 323 * the UA stylesheet. 324 */ 325 326 input { 327 line-height: normal; 328 } 329 330 /** 331 * It's recommended that you don't attempt to style these elements. 332 * Firefox's implementation doesn't respect box-sizing, padding, or width. 333 * 334 * 1. Address box sizing set to `content-box` in IE 8/9/10. 335 * 2. Remove excess padding in IE 8/9/10. 336 */ 337 338 input[type="checkbox"], 339 input[type="radio"] { 340 box-sizing: border-box; /* 1 */ 341 padding: 0; /* 2 */ 342 } 343 344 /** 345 * Fix the cursor style for Chrome's increment/decrement buttons. For certain 346 * `font-size` values of the `input`, it causes the cursor style of the 347 * decrement button to change from `default` to `text`. 348 */ 349 350 input[type="number"]::-webkit-inner-spin-button, 351 input[type="number"]::-webkit-outer-spin-button { 352 height: auto; 353 } 354 355 /** 356 * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 357 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 358 */ 359 360 input[type="search"] { 361 -webkit-appearance: textfield; /* 1 */ 362 box-sizing: content-box; /* 2 */ 363 } 364 365 /** 366 * Remove inner padding and search cancel button in Safari and Chrome on OS X. 367 * Safari (but not Chrome) clips the cancel button when the search input has 368 * padding (and `textfield` appearance). 369 */ 370 371 input[type="search"]::-webkit-search-cancel-button, 372 input[type="search"]::-webkit-search-decoration { 373 -webkit-appearance: none; 374 } 375 376 /** 377 * Define consistent border, margin, and padding. 378 */ 379 380 fieldset { 381 border: 1px solid #c0c0c0; 382 margin: 0 2px; 383 padding: 0.35em 0.625em 0.75em; 384 } 385 386 /** 387 * 1. Correct `color` not being inherited in IE 8/9/10/11. 388 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 389 */ 390 391 legend { 392 border: 0; /* 1 */ 393 padding: 0; /* 2 */ 394 } 395 396 /** 397 * Remove default vertical scrollbar in IE 8/9/10/11. 398 */ 399 400 textarea { 401 overflow: auto; 402 } 403 404 /** 405 * Don't inherit the `font-weight` (applied by a rule above). 406 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 407 */ 408 409 optgroup { 410 font-weight: bold; 411 } 412 413 /* Tables 414 ========================================================================== */ 415 416 /** 417 * Remove most spacing between table cells. 418 */ 419 420 table { 421 border-collapse: collapse; 422 border-spacing: 0; 423 } 424 425 td, 426 th { 427 padding: 0; 428 } 429 430 431 /* 432 * Remove text-shadow in selection highlight: 433 * https://twitter.com/miketaylr/status/12228805301 434 * 435 * These selection rule sets have to be separate. 436 * Customize the background color to match your design. 437 */ 438 439 ::-moz-selection { 440 background: #b3d4fc; 441 text-shadow: none; 442 } 443 444 ::selection { 445 background: #b3d4fc; 446 text-shadow: none; 447 } 448 449 /* 450 * A better looking default horizontal rule 451 */ 452 453 hr { 454 display: block; 455 height: 1px; 456 border: 0; 457 border-top: 1px solid #ccc; 458 margin: 1em 0; 459 padding: 0; 460 } 461 462 /* 463 * Remove the gap between audio, canvas, iframes, 464 * images, videos and the bottom of their containers: 465 * https://github.com/h5bp/html5-boilerplate/issues/440 466 */ 467 468 audio, 469 canvas, 470 iframe, 471 img, 472 svg, 473 video { 474 vertical-align: middle; 475 } 476 477 /* 478 * Remove default fieldset styles. 479 */ 480 481 fieldset { 482 border: 0; 483 margin: 0; 484 padding: 0; 485 } 486 487 /* 488 * Allow only vertical resizing of textareas. 489 */ 490 491 textarea { 492 resize: vertical; 493 } 494 495 /* ========================================================================== 496 Browser Upgrade Prompt 497 ========================================================================== */ 498 499 .browserupgrade { 500 margin: 0.2em 0; 501 background: #ccc; 502 color: #000; 503 padding: 0.2em 0; 504 } 505 506 507 508 /* ========================================================================== 509 Helper classes 510 ========================================================================== */ 511 512 /* 513 * Hide visually and from screen readers: 514 */ 515 516 .hidden { 517 display: none !important; 518 } 519 520 /* 521 * Hide only visually, but have it available for screen readers: 522 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 523 */ 524 525 .visuallyhidden { 526 border: 0; 527 clip: rect(0 0 0 0); 528 height: 1px; 529 margin: -1px; 530 overflow: hidden; 531 padding: 0; 532 position: absolute; 533 width: 1px; 534 } 535 536 /* 537 * Extends the .visuallyhidden class to allow the element 538 * to be focusable when navigated to via the keyboard: 539 * https://www.drupal.org/node/897638 540 */ 541 542 .visuallyhidden.focusable:active, 543 .visuallyhidden.focusable:focus { 544 clip: auto; 545 height: auto; 546 margin: 0; 547 overflow: visible; 548 position: static; 549 width: auto; 550 } 551 552 /* 553 * Hide visually and from screen readers, but maintain layout 554 */ 555 556 .invisible { 557 visibility: hidden; 558 } 559 560 /* 561 * Clearfix: contain floats 562 * 563 * For modern browsers 564 * 1. The space content is one way to avoid an Opera bug when the 565 * `contenteditable` attribute is included anywhere else in the document. 566 * Otherwise it causes space to appear at the top and bottom of elements 567 * that receive the `clearfix` class. 568 * 2. The use of `table` rather than `block` is only necessary if using 569 * `:before` to contain the top-margins of child elements. 570 */ 571 572 .clearfix:before, 573 .clearfix:after { 574 content: " "; /* 1 */ 575 display: table; /* 2 */ 576 } 577 578 .clearfix:after { 579 clear: both; 580 } 581 582 /* ========================================================================== 583 EXAMPLE Media Queries for Responsive Design. 584 These examples override the primary ('mobile first') styles. 585 Modify as content requires. 586 ========================================================================== */ 587 588 589 @media print, 590 (-webkit-min-device-pixel-ratio: 1.25), 591 (min-resolution: 1.25dppx), 592 (min-resolution: 120dpi) { 593 /* Style adjustments for high resolution devices */ 594 } 595 596 /* ========================================================================== 597 Print styles. 598 Inlined to avoid the additional HTTP request: 599 http://www.phpied.com/delay-loading-your-print-css/ 600 ========================================================================== */ 601 602 @media print { 603 *, 604 *:before, 605 *:after, 606 *:first-letter, 607 *:first-line { 608 background: transparent !important; 609 color: #000 !important; /* Black prints faster: 610 http://www.sanbeiji.com/archives/953 */ 611 box-shadow: none !important; 612 text-shadow: none !important; 613 } 614 615 a, 616 a:visited { 617 text-decoration: underline; 618 } 619 620 a[href]:after { 621 content: " (" attr(href) ")"; 622 } 623 624 abbr[title]:after { 625 content: " (" attr(title) ")"; 626 } 627 628 /* 629 * Don't show links that are fragment identifiers, 630 * or use the `javascript:` pseudo protocol 631 */ 632 633 a[href^="#"]:after, 634 a[href^="javascript:"]:after { 635 content: ""; 636 } 637 638 pre, 639 blockquote { 640 border: 1px solid #999; 641 page-break-inside: avoid; 642 } 643 644 /* 645 * Printing Tables: 646 * http://css-discuss.incutio.com/wiki/Printing_Tables 647 */ 648 649 thead { 650 display: table-header-group; 651 } 652 653 tr, 654 img { 655 page-break-inside: avoid; 656 } 657 658 img { 659 max-width: 100% !important; 660 } 661 662 p, 663 h2, 664 h3 { 665 orphans: 3; 666 widows: 3; 667 } 668 669 h2, 670 h3 { 671 page-break-after: avoid; 672 } 673 }