正常的项目当中，应当有一个common.css，就是把一些常用的样式，写入其中。

然后再结合一些特性的css，构造漂亮的页面。

下面欣赏一些海盗商城的common.css。

  1. /***样式初始化***/
  3. html {
  4.     margin: 0;
  5.     padding: 0;
  6.     border: 0;
  7.     -webkit-text-size-adjust: 100%;
  8.     -ms-text-size-adjust: 100%;
  9.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  10. }
  11. body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, input, fieldset, form, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     font-size: 14px;
  16.     font: inherit;
  17.     vertical-align: baseline;
  18. }
  19. article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {
  20.     display: block;
  21. }
  22. body {
  23.     font-size: 12px;
  24.     color: #333;
  25.     background: #fff;
  26.     font-family: "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif;
  27. }
  28. img {
  29.     border: 0;
  30. }
  31. ::-webkit-input-placeholder {
  32.     color: #999;
  33. }
  34. :-moz-placeholder {
  35.     color: #999;
  36. }
  37. ::-moz-placeholder {
  38.     color: #999;
  39. }
  40. :-ms-input-placeholder {
  41.     color: #ccc;
  42. }
  43. * {
  44.     -webkit-box-sizing: border-box;
  45.     -moz-box-sizing: border-box;
  46.     box-sizing: border-box;
  47. }
  48. *:before, *:after {
  49.     -webkit-box-sizing: border-box;
  50.     -moz-box-sizing: border-box;
  51.     box-sizing: border-box;
  52. }
  53. button::-moz-focus-inner, input::-moz-focus-inner {
  54.     padding: 0;
  55.     border: 0;
  56. }
  57. textarea {
  58.     overflow: auto;
  59. }
  61. /*a{text-decoration: none;}*/
  63. b, strong {
  64.     font-weight: bold;
  65. }
  66. input:focus, textarea:focus, button:focus, select:focus {
  67.     outline: none;
  68. }
  69. input::-ms-clear {
  70.     display: none;
  71. }
  72. button[disabled], html input[disabled] {
  73.     cursor: default;
  74. }
  75. table {
  76.     border-collapse: collapse;
  77.     border-spacing: 0;
  78. }
  80. /*清除浮动*/
  82. .clearfix:after {
  83.     visibility: hidden;
  84.     display: block;
  85.     font-size: 0;
  86.     content: " ";
  87.     clear: both;
  88.     height: 0;
  89. }
  90. .clear {
  91.     clear: both;
  92. }
  94. /***样式初始化 END***/
  96. /***float***/
  98. .fl {
  99.     float: left !important;
  100. }
  101. .fr {
  102.     float: right !important;
  103. }
  105. /***隐藏与显示***/
  107. .show {
  108.     display: block !important;
  109. }
  110. .hidden {
  111.     display: none !important;
  112. }
  113. .visible-hidden {
  114.     visibility: hidden;
  115. }
  116. .over-initial {
  117.     overflow: initial !important;
  118. }
  120. /***动画过渡时间***/
  122. .transition-0-3s {
  123.     transition: all 0.3s;
  124. }
  125. .transition-0-5s {
  126.     transition: all 0.5s;
  127. }
  128. .transition-0-8s {
  129.     transition: all 0.8s;
  130. }
  131. .transition-1-0s {
  132.     transition: all 1s;
  133. }
  134. .transition-1-5s {
  135.     transition: all 1.5s;
  136. }
  137. .transition-2-0s {
  138.     transition: all 2s;
  139. }
  140. .no-transition {
  141.     transition: none !important;
  142. }
  144. /***文本类容***/
  146. /*标题*/
  148. h1, .h1 {
  149.     font-size: 28px;
  150. }
  151. h2, .h2 {
  152.     font-size: 24px;
  153. }
  154. h3, .h3 {
  155.     font-size: 18px;
  156. }
  157. h4, .h4 {
  158.     font-size: 16px;
  159. }
  160. h5, .h5 {
  161.     font-size: 14px;
  162. }
  163. h6, .h6 {
  164.     font-size: 12px;
  165. }
  166. h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small {
  167.     font-size: 60%;
  168.     filter: alpha(opacity=60);
  169.     opacity: .6;
  170. }
  171. h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small {
  172.     font-size: 12px;
  173.     filter: alpha(opacity=60);
  174.     opacity: .6;
  175. }
  177. /*自定义链接颜色(可自由更换)*/
  179. a {
  180.     color: #333;
  181.     text-decoration: none;
  182. }
  184. /*链接-颜色*/
  186. a:hover {
  187.     color: #1380cb;
  188. }
  190. /*链接-悬浮颜色*/
  192. .text-underline:hover {
  193.     text-decoration: underline;
  194. }
  196. /*段落*/
  198. p, .p {
  199.     line-height: 25px;
  200. }
  201. .text-indent, .text-indent p, .text-indent div {
  202.     text-indent: 2em;
  203. }
  205. /*粗体*/
  207. .strong {
  208.     font-weight: bold;
  209. }
  210. .text-normal {
  211.     font-weight: normal;
  212. }
  214. /*对齐*/
  216. .text-left {
  217.     text-align: left !important;
  218. }
  219. .text-center {
  220.     text-align: center !important;
  221. }
  222. .text-right {
  223.     text-align: right !important;
  224. }
  225. .text-justify {
  226.     text-align: justify !important;
  227. }
  229. /*文本省略*/
  231. .text-ellipsis {
  232.     overflow: hidden;
  233.     text-overflow: ellipsis;
  234.     white-space: nowrap;
  235. }
  236. .no-ellipsis {
  237.     overflow: auto;
  238.     text-overflow: initial;
  239.     white-space: normal;
  240. }
  242. /*字号*/
  244. .text-large {
  245.     font-size: 24px !important;
  246. }
  247. .text-big {
  248.     font-size: 16px !important;
  249. }
  250. .text-default {
  251.     font-size: 14px !important;
  252. }
  253. .text-small {
  254.     font-size: 12px !important;
  255. }
  256. .text-little {
  257.     font-size: 10px !important;
  258. }
  260. /*字体颜色*/
  262. .text-main {
  263.     color: #2a95de;
  264. }
  266. /*主色*/
  268. .text-sub {
  269.     color: #1380cb;
  270. }
  272. /*辅色*/
  274. .text-dot {
  275.     color: #ff5a00;
  276. }
  278. /*点缀色*/
  280. .text-mix {
  281.     color: #d93600;
  282. }
  284. /*融合色*/
  286. .text-white {
  287.     color: #fff;
  288. }
  290. /*白色*/
  292. .text-black {
  293.     color: #000;
  294. }
  296. /*黑色*/
  298. .text-gray {
  299.     color: #999;
  300. }
  302. /*浅灰色*/
  304. .text-drak-grey {
  305.     color: #3a3a3a;
  306. }
  308. /*深灰色*/
  310. .text-red {
  311.     color: #b10;
  312. }
  313. .text-orange {
  314.     color: #f60;
  315. }
  316. .text-blue {
  317.     color: #0ae;
  318. }
  319. .text-green {
  320.     color: green;
  321. }
  323. /*行高*/
  325. .text-lh-little {
  326.     line-height: 16px;
  327. }
  328. .text-lh-small {
  329.     line-height: 18px;
  330. }
  331. .text-lh {
  332.     line-height: 22px;
  333. }
  334. .text-lh-big {
  335.     line-height: 24px;
  336. }
  337. .text-lh-large {
  338.     line-height: 28px;
  339. }
  341. /***input***/
  343. .input {
  344.     font-size: 14px;
  345.     padding: 6px;
  346.     border: solid 1px #ccc;
  347.     width: 100%;
  348.     height: 34px;
  349.     line-height: 20px;
  350.     display: block;
  351.     background-color: #fff;
  352.     -webkit-appearance: none;
  353.     /*transition:all 1s;*/
  354. }
  355. .input:focus, .input-focus {
  356.     border-color: #2a95de;
  357.     background-color: #f5f8fd;
  358.     /*transition:all 0.3s*/
  359. }
  360. .input:hover, .input-hover {
  361.     border-color: #2a95de;
  362. }
  363. .input-error, .input-error:hover {
  364.     border-color: #d93600;
  365. }
  366. .input-error:focus {
  367.     border-color: #d93600;
  368.     background-color: #fff;
  369. }
  370. .input-disabled, .input-disabled:hover, .input[disabled], .input[disabled]:hover {
  371.     border-color: #999;
  372.     background-color: #eee;
  373. }
  374. .input-readonly, .input[readonly], .input[readonly]:hover {
  375.     border-color: #ccc;
  376.     background-color: #fff;
  377. }
  379. /***Button***/
  381. .button {
  382.     display: inline-block;
  383.     padding: 6px 20px;
  384.     border: 1px solid #ddd;
  385.     border-radius: 3px;
  386.     color: #3a3a3a;
  387.     font-size: 12px;
  388.     line-height: 22px;
  389.     text-align: center;
  390.     background: transparent;
  391.     /*transition: all 0.3s;*/
  392.     cursor: pointer;
  393. }
  394. .button-full {
  395.     display: block;
  396.     width: 100%;
  397. }
  398. .button:hover {
  399.     background: #f1f1f1;
  400. }
  401. .button.bg-black, .button.bg-dark-grey, .button.bg-main, .button.bg-dot, .button.bg-gray, .button.bg-light-gray, .button.bg-sub, .button.bg-mix, .button.bg-pink, .button.bg-red, .button.bg-orange, .button.bg-blue, .button.bg-green {
  402.     color: #fff;
  403.     border: 0;
  404. }
  405. .button.bg-black:hover {
  406.     background: #222;
  407. }
  408. .button.bg-dark-grey:hover {
  409.     background: #444;
  410. }
  411. .button.bg-main:hover {
  412.     background: #1380cb;
  413. }
  414. .button.bg-dot:hover {
  415.     background: #d93600;
  416. }
  417. .button.bg-gray:hover {
  418.     background: #aaa;
  419. }
  420. .button.bg-light-gray:hover {
  421.     background: #aaa;
  422. }
  423. .button.bg-sub:hover {
  424.     background: #2a95de;
  425. }
  426. .button.bg-mix:hover {
  427.     background: #ff5a00;
  428. }
  429. .button.bg-white:hover {
  430.     background: #f1f1f1;
  431. }
  432. .button.bg-gray-white:hover {
  433.     background: #fff;
  434. }
  435. .button.bg-pink:hover {
  436.     background: #e13538;
  437. }
  438. .button.bg-red:hover {
  439.     background: #d10;
  440. }
  441. .button.bg-orange:hover {
  442.     background: #f60;
  443. }
  444. .button.bg-blue:hover {
  445.     background: #0ae;
  446. }
  447. .button.bg-green:hover {
  448.     background: green;
  449. }
  450. .button.border-gray:hover, .button.border-main:hover, .button.border-dot:hover, .button.border-mix:hover, .button.border-sub:hover, .button.border-black:hover {
  451.     color: #fff;
  452. }
  453. .button.border-gray-white:hover {
  454.     background: #eee;
  455. }
  456. .button.border-light-gray:hover {
  457.     background: #ccc;
  458. }
  459. .button.border-gray:hover {
  460.     background: #999;
  461. }
  462. .button.border-black:hover {
  463.     background: #000;
  464. }
  465. .button.border-main:hover {
  466.     background: #2a95de;
  467. }
  468. .button.border-sub:hover {
  469.     background: #1380cb;
  470. }
  471. .button.border-mix:hover {
  472.     background: #d93600;
  473. }
  474. .button.border-dot:hover {
  475.     background: #ff5a00;
  476. }
  478. /***select***/
  480. .select {
  481.     width: 100%;
  482.     height: 26px;
  483.     border: 1px solid #ccc;
  484. }
  485. .select:focus, .select:hover {
  486.     border-color: #2a95de;
  487. }
  489. /***textarea***/
  491. .textarea {
  492.     border: 1px solid #ccc;
  493.     resize: none;
  494. }
  495. .textarea:hover {
  496.     border-color: #2a95de;
  497. }
  498. .textarea:focus {
  499.     border-color: #2a95de;
  500.     background-color: #f5f8fd;
  501. }
  503. /***margin***/
  505. /***border***/
  507. .border {
  508.     border: solid 1px #ddd;
  509. }
  510. .border-top {
  511.     border-top: solid 1px #ddd;
  512. }
  513. .border-right {
  514.     border-right: solid 1px #ddd;
  515. }
  516. .border-bottom {
  517.     border-bottom: solid 1px #ddd;
  518. }
  519. .border-left {
  520.     border-left: solid 1px #ddd;
  521. }
  522. .border-top-bottom {
  523.     border-top: solid 1px #ddd;
  524.     border-bottom: solid 1px #ddd;
  525. }
  526. .border-left-right {
  527.     border-left: solid 1px #ddd;
  528.     border-right: solid 1px #ddd;
  529. }
  531. /*边框样式*/
  533. .border-dashed {
  534.     border-style: dashed;
  535. }
  536. .border-dotted {
  537.     border-style: dotted;
  538. }
  539. .border-double {
  540.     border-style: double;
  541. }
  542. .border-inset {
  543.     border-style: inset;
  544. }
  545. .border-outset {
  546.     border-style: outset;
  547. }
  549. /*边框大小*/
  551. .border-large {
  552.     border-width: 10px;
  553. }
  554. .border-big {
  555.     border-width: 5px;
  556. }
  557. .border-middle {
  558.     border-width: 3px;
  559. }
  560. .border-small {
  561.     border-width: 2px;
  562. }
  563. .border-none {
  564.     border: none !important;
  565. }
  567. /*边框颜色*/
  569. .border-gray-white {
  570.     border-color: #eee;
  571. }
  572. .border-light-gray {
  573.     border-color: #ccc;
  574. }
  575. .border-gray {
  576.     border-color: #999;
  577. }
  578. .border-main {
  579.     border-color: #2a95de;
  580. }
  581. .border-sub {
  582.     border-color: #1380cb;
  583. }
  584. .border-mix {
  585.     border-color: #d93600;
  586. }
  587. .border-dot {
  588.     border-color: #ff5a00;
  589. }
  590. .border-white {
  591.     border-color: #fff;
  592. }
  593. .border-black {
  594.     border-color: #000;
  595. }
  597. /***border radius***/
  599. .radius-none {
  600.     border-radius: 0;
  601. }
  602. .radius-small {
  603.     border-radius: 2px;
  604. }
  605. .radius {
  606.     border-radius: 4px;
  607. }
  608. .radius-big {
  609.     border-radius: 6px;
  610. }
  611. .radius-rounded {
  612.     border-radius: 2em;
  613. }
  614. .radius-circle {
  615.     border-radius: 50%;
  616. }
  618. /***boxshadow***/
  620. .box-shadow {
  621.     box-shadow: 0 3px 5px #ccc;
  622. }
  624. /***background***/
  626. .bg {
  627.     background: #eee;
  628. }
  629. .bg-gray {
  630.     background: #999;
  631. }
  632. .bg-dark-grey {
  633.     background: #3a3a3a;
  634. }
  635. .bg-black {
  636.     background: #000;
  637. }
  638. .bg-white {
  639.     background: #fff;
  640. }
  641. .bg-gray-white {
  642.     background: #f7f7f7;
  643. }
  644. .bg-main {
  645.     background: #2a95de;
  646. }
  647. .bg-sub {
  648.     background: #1380cb;
  649. }
  650. .bg-mix {
  651.     background: #d93600;
  652. }
  653. .bg-dot {
  654.     background: #ff5a00;
  655. }
  656. .bg-pink {
  657.     background: #e13538;
  658. }
  659. .bg-red {
  660.     background: #d10;
  661. }
  662. .bg-orange {
  663.     background: #f60;
  664. }
  665. .bg-blue {
  666.     background: #0ae;
  667. }
  668. .bg-green {
  669.     background: green;
  670. }
  671. .bg-inverse, .bg-inverse a {
  672.     color: #fff;
  673. }
  674. .bg-none {
  675.     background: none !important;
  676. }
  677. .bg-light-red {
  678.     background: #f00;
  679. }
  681. /*内边距,全,上,下,左,右*/
  683. .padding-large {
  684.     padding: 30px;
  685. }
  686. .padding-large-top {
  687.     padding-top: 30px;
  688. }
  689. .padding-large-right {
  690.     padding-right: 30px;
  691. }
  692. .padding-large-bottom {
  693.     padding-bottom: 30px;
  694. }
  695. .padding-large-left {
  696.     padding-left: 30px;
  697. }
  698. .padding-big {
  699.     padding: 20px;
  700. }
  701. .padding-big-top {
  702.     padding-top: 20px;
  703. }
  704. .padding-big-right {
  705.     padding-right: 20px;
  706. }
  707. .padding-big-bottom {
  708.     padding-bottom: 20px;
  709. }
  710. .padding-big-left {
  711.     padding-left: 20px;
  712. }
  713. .padding {
  714.     padding: 10px;
  715. }
  716. .padding-tb {
  717.     padding: 10px 0;
  718. }
  719. .padding-lr {
  720.     padding: 0 10px;
  721. }
  722. .padding-top {
  723.     padding-top: 10px;
  724. }
  725. .padding-right {
  726.     padding-right: 10px;
  727. }
  728. .padding-bottom {
  729.     padding-bottom: 10px;
  730. }
  731. .padding-left {
  732.     padding-left: 10px;
  733. }
  734. .padding-small {
  735.     padding: 5px;
  736. }
  737. .padding-small-top {
  738.     padding-top: 5px;
  739. }
  740. .padding-small-right {
  741.     padding-right: 5px;
  742. }
  743. .padding-small-bottom {
  744.     padding-bottom: 5px;
  745. }
  746. .padding-small-left {
  747.     padding-left: 5px;
  748. }
  749. .padding-little {
  750.     padding: 2px;
  751. }
  752. .padding-little-top {
  753.     padding-top: 2px;
  754. }
  755. .padding-little-right {
  756.     padding-right: 2px;
  757. }
  758. .padding-little-bottom {
  759.     padding-bottom: 2px;
  760. }
  761. .padding-little-left {
  762.     padding-left: 2px;
  763. }
  764. .padding-none {
  765.     padding: 0 !important;
  766. }
  768. /*外边距,全,上,下,左,右*/
  770. .margin-large {
  771.     margin: 30px;
  772. }
  773. .margin-large-top {
  774.     margin-top: 30px;
  775. }
  776. .margin-large-right {
  777.     margin-right: 30px;
  778. }
  779. .margin-large-bottom {
  780.     margin-bottom: 30px;
  781. }
  782. .margin-large-left {
  783.     margin-left: 30px;
  784. }
  785. .margin-big {
  786.     margin: 20px;
  787. }
  788. .margin-big-top {
  789.     margin-top: 20px;
  790. }
  791. .margin-big-right {
  792.     margin-right: 20px;
  793. }
  794. .margin-big-bottom {
  795.     margin-bottom: 20px;
  796. }
  797. .margin-big-left {
  798.     margin-left: 20px;
  799. }
  800. .margin {
  801.     margin: 10px !important;
  802.     clear: both;
  803. }
  804. .margin-tb {
  805.     margin: 10px 0;
  806. }
  807. .margin-lr {
  808.     margin: 0 10px;
  809. }
  810. .margin-top {
  811.     margin-top: 10px;
  812. }
  813. .margin-right {
  814.     margin-right: 10px;
  815. }
  816. .margin-bottom {
  817.     margin-bottom: 10px;
  818. }
  819. .margin-left {
  820.     margin-left: 10px;
  821. }
  822. .margin-around {
  823.     margin: 0 10px;
  824. }
  825. .margin-small {
  826.     margin: 5px;
  827. }
  828. .margin-small-top {
  829.     margin-top: 5px;
  830. }
  831. .margin-small-right {
  832.     margin-right: 5px;
  833. }
  834. .margin-small-bottom {
  835.     margin-bottom: 5px;
  836. }
  837. .margin-small-left {
  838.     margin-left: 5px;
  839. }
  840. .margin-little {
  841.     margin: 2px;
  842. }
  843. .margin-little-top {
  844.     margin-top: 2px;
  845. }
  846. .margin-little-right {
  847.     margin-right: 2px;
  848. }
  849. .margin-little-bottom {
  850.     margin-bottom: 2px;
  851. }
  852. .margin-little-left {
  853.     margin-left: 2px;
  854. }
  855. .margin-none {
  856.     margin: 0 !important;
  857. }
  859. /*无序有序列表*/
  861. ul {
  862.     list-style: none;
  863. }
  864. ol {
  865.     padding-left: 24px;
  866. }
  867. .list-cn {
  868.     list-style-type: cjk-ideographic;
  869. }
  870. .list-alpha {
  871.     list-style-type: upper-alpha;
  872. }
  873. .list-unstyle {
  874.     list-style: none;
  875.     padding-left: 0;
  876. }
  877. .list-unstyle ul {
  878.     list-style: disc;
  879. }
  880. .list-inline li {
  881.     display: inline-block;
  882.     padding: 0 10px;
  883.     width: auto;
  884. }
  886. /***布局***/
  888. .layout {
  889.     width: 100%;
  890. }
  891. .container {
  892.     margin: 0 auto;
  893.     width: 1200px;
  894. }
  896. /*宽度比例*/
  898. .w10 {
  899.     width: 10%;
  900. }
  901. .w20 {
  902.     width: 20%;
  903. }
  904. .w30 {
  905.     width: 30%;
  906. }
  907. .w40 {
  908.     width: 40%;
  909. }
  910. .w50 {
  911.     width: 50%;
  912. }
  913. .w60 {
  914.     width: 60%;
  915. }
  916. .w70 {
  917.     width: 70%;
  918. }
  919. .w80 {
  920.     width: 80%;
  921. }
  922. .w90 {
  923.     width: 90%;
  924. }
  925. .w5 {
  926.     width: 5%;
  927. }
  928. .w15 {
  929.     width: 15%;
  930. }
  931. .w25 {
  932.     width: 25%;
  933. }
  934. .w35 {
  935.     width: 35%;
  936. }
  937. .w45 {
  938.     width: 45%;
  939. }
  940. .w55 {
  941.     width: 55%;
  942. }
  943. .w65 {
  944.     width: 65%;
  945. }
  946. .w75 {
  947.     width: 75%;
  948. }
  949. .w85 {
  950.     width: 85%;
  951. }
  952. .w95 {
  953.     width: 95%;
  954. }
  956. /*HR*/
  958. .hr-gray {
  959.     width: 100%;
  960.     border-top: 1px solid #d6d6d6;
  961.     border-bottom: 1px solid #fff;
  962. }
  963. .hr-black {
  964.     width: 100%;
  965.     border-top: 1px solid #171717;
  966.     border-bottom: 1px solid #707070;
  967. }
  968. .hr-blue {
  969.     width: 100%;
  970.     border-top: 1px solid #2969a6;
  971.     border-bottom: 1px solid #488bcb;
  972. }
  974. /*spacer*/
  976. .spacer-gray {
  977.     border-left: 1px solid #d6d6d6;
  978.     border-right: 1px solid #fff;
  979. }
  981. /*广告*/
  983. .roof {
  984.     width: 1200px;
  985.     height: 90px;
  986.     overflow: hidden;
  987.     margin: 0 auto;
  988.     display: none;
  989. }
  990. .mask {
  991.     opacity: 0.7;
  992.     position: fixed;
  993.     left: 0px;
  994.     top: 0px;
  995.     width: 100%;
  996.     height: 100%;
  997.     overflow: hidden;
  998.     z-index: 1030;
  999.     background: rgb(0, 0, 0);
  1000.     display: none;
  1001.     overflow: hiden;
  1002. }
  1003. .ads {
  1004.     position: absolute;
  1005.     top: 23%;
  1006.     left: 23%;
  1007. }
  1008. .ads a {
  1009.     position: absolute;
  1010.     top: 0;
  1011.     right: 0;
  1012. }
  1014. /* 订单支付 */
  1016. .order-container .border, .pay-checkbox:hover {
  1017.     cursor: pointer;
  1018. }

类名称通俗易懂，样式多样且全面。支持各种手机端布局。很棒。值得借鉴。

common.css 值得学习的css样式布局的更多相关文章

  1. 值得学习的CSS知识

    这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...

  2. 微信小程序开发：学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  3. css案例学习之层叠样式

    代码 <html> <head> <title>层叠特性</title> <style type="text/css"> ...

  4. （3）《Head First HTML与CSS》学习笔记---CSS入门

    1.O‘Reilly的<CSS PocketReference>是一本不错的CSS参考小书,记录了常用的元素属性. 2.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(以下所有讨论 ...

  5. CSS基础学习 21.CSS居中总结

    注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...

  6. CSS基础学习-2.CSS选择器（上）

    元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一.元素选择符 1.通配符:*{ } 2.类选择符:.类名称{ } 3.id选择符::#id名称{ } 4.类型选择符(标签选择符):标签 ...

  7. CSS基础学习 20.CSS媒体查询

  8. CSS基础学习 19.CSS hack

  9. CSS基础学习 18.CSS多列

    四种常见的浏览器内核:

随机推荐

  1. Map 对象

    1.创建一个Map对象 var map=new Map(); 2.size属性 //给map添加一些值 map.set("name","张三"); map.se ...

  2. 07_控制线程_join_线程插队

    [join线程简述] join()方法:Thread提供的让一个线程去等待另一个线程完成.当在某个程序执行流中(如main线程)调用其它线程(如t2线程)的join方法(t2.join()),调用线程 ...

  3. 01_SpringMVC流程架构图

    [组件说明] 以下组件通常使用框架提供实现: 1.DisPatcherServlet:前端控制器(不需要程序员开发) 用户请求到达前端控制器,它相当于MVC模式中的C(Controller),Disp ...

  4. Android_Chronometer计时器

    最近做一个项目用到Handler 和Message ,开始时不是很明白,不了解其中的内部机制,所以开发起来有点难度,之后自己找了Android 时间服务 这一节的内容,总结了一点关于时间的知识,在这里 ...

  5. discuz 重新定义jquery的$

    最近做个小插件 发现加了这个代码不执行: $.ajax({ url:'plugin.php?id=register:regeist_jiangsu', type:'post', data:{ 'mob ...

  6. 《C和指针》读书笔记——第二章 基本概念

    1.编译过程: source code→Compiler→Object code→Linker←Lib ↓ Exe 2.经过初始化的静态变量(static)在程序执行前能获得他们的值. 3.绝大多数环 ...

  7. codeforces edu round3

    B. The Best Gift  传送门:http://codeforces.com/problemset/problem/609/B Emily's birthday is next week a ...

  8. 【已解决】Vmware无法创建虚拟网卡的问题

    最近因为各种需要,要在虚拟机里使用桥接方式连接.但是不管怎么操作,都无法添加虚拟网卡.连续好多天需要用到桥接上网,今儿多方搜索,找到了解决方案. 参考资料:http://tieba.baidu.com ...

  9. android正在运行进程和后台缓存进程的区别

    正在运行的进程:需要占用一定的cpu资源和RAM(内存)空间,多少的话看是什么应用,要消耗一定的电量,影响手机速度等性能. 后台缓存的进程:不需要占用cpu资源,会在RAM中写入一部分数据,当下次打开 ...

  10. Java练习题

    1.实现一个类似于ConcurrentHashMap的分段加锁 import java.util.HashMap; import java.util.Map; import java.util.con ...