正常的项目当中，应当有一个common.css，就是把一些常用的样式，写入其中。
然后再结合一些特性的css，构造漂亮的页面。 下面欣赏一些海盗商城的common.css。/***样式初始化***/html { margin: 0; padding: 0; border: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}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 { margin: 0; padding: 0; border: 0; font-size: 14px; font: inherit; vertical-align: baseline;}article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section { display: block;}body { font-size: 12px; color: #333; background: #fff; font-family: "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif;}img { border: 0;}::-webkit-input-placeholder { color: #999;}:-moz-placeholder { color: #999;}::-moz-placeholder { color: #999;}:-ms-input-placeholder { color: #ccc;}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0;}textarea { overflow: auto;}/*a{text-decoration: none;}*/b, strong { font-weight: bold;}input:focus, textarea:focus, button:focus, select:focus { outline: none;}input::-ms-clear { display: none;}button[disabled], html input[disabled] { cursor: default;}table { border-collapse: collapse; border-spacing: 0;}/*清除浮动*/.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clear { clear: both;}/***样式初始化 END***//***float***/.fl { float: left !important;}.fr { float: right !important;}/***隐藏与显示***/.show { display: block !important;}.hidden { display: none !important;}.visible-hidden { visibility: hidden;}.over-initial { overflow: initial !important;}/***动画过渡时间***/.transition-0-3s { transition: all 0.3s;}.transition-0-5s { transition: all 0.5s;}.transition-0-8s { transition: all 0.8s;}.transition-1-0s { transition: all 1s;}.transition-1-5s { transition: all 1.5s;}.transition-2-0s { transition: all 2s;}.no-transition { transition: none !important;}/***文本类容***//*标题*/h1, .h1 { font-size: 28px;}h2, .h2 { font-size: 24px;}h3, .h3 { font-size: 18px;}h4, .h4 { font-size: 16px;}h5, .h5 { font-size: 14px;}h6, .h6 { font-size: 12px;}h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small { font-size: 60%; filter: alpha(opacity=60); opacity: .6;}h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small { font-size: 12px; filter: alpha(opacity=60); opacity: .6;}/*自定义链接颜色(可自由更换)*/a { color: #333; text-decoration: none;}/*链接-颜色*/a:hover { color: #1380cb;}/*链接-悬浮颜色*/.text-underline:hover { text-decoration: underline;}/*段落*/p, .p { line-height: 25px;}.text-indent, .text-indent p, .text-indent div { text-indent: 2em;}/*粗体*/.strong { font-weight: bold;}.text-normal { font-weight: normal;}/*对齐*/.text-left { text-align: left !important;}.text-center { text-align: center !important;}.text-right { text-align: right !important;}.text-justify { text-align: justify !important;}/*文本省略*/.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.no-ellipsis { overflow: auto; text-overflow: initial; white-space: normal;}/*字号*/.text-large { font-size: 24px !important;}.text-big { font-size: 16px !important;}.text-default { font-size: 14px !important;}.text-small { font-size: 12px !important;}.text-little { font-size: 10px !important;}/*字体颜色*/.text-main { color: #2a95de;}/*主色*/.text-sub { color: #1380cb;}/*辅色*/.text-dot { color: #ff5a00;}/*点缀色*/.text-mix { color: #d93600;}/*融合色*/.text-white { color: #fff;}/*白色*/.text-black { color: #000;}/*黑色*/.text-gray { color: #999;}/*浅灰色*/.text-drak-grey { color: #3a3a3a;}/*深灰色*/.text-red { color: #b10;}.text-orange { color: #f60;}.text-blue { color: #0ae;}.text-green { color: green;}/*行高*/.text-lh-little { line-height: 16px;}.text-lh-small { line-height: 18px;}.text-lh { line-height: 22px;}.text-lh-big { line-height: 24px;}.text-lh-large { line-height: 28px;}/***input***/.input { font-size: 14px; padding: 6px; border: solid 1px #ccc; width: 100%; height: 34px; line-height: 20px; display: block; background-color: #fff; -webkit-appearance: none; /*transition:all 1s;*/}.input:focus, .input-focus { border-color: #2a95de; background-color: #f5f8fd; /*transition:all 0.3s*/}.input:hover, .input-hover { border-color: #2a95de;}.input-error, .input-error:hover { border-color: #d93600;}.input-error:focus { border-color: #d93600; background-color: #fff;}.input-disabled, .input-disabled:hover, .input[disabled], .input[disabled]:hover { border-color: #999; background-color: #eee;}.input-readonly, .input[readonly], .input[readonly]:hover { border-color: #ccc; background-color: #fff;}/***Button***/.button { display: inline-block; padding: 6px 20px; border: 1px solid #ddd; border-radius: 3px; color: #3a3a3a; font-size: 12px; line-height: 22px; text-align: center; background: transparent; /*transition: all 0.3s;*/ cursor: pointer;}.button-full { display: block; width: 100%;}.button:hover { background: #f1f1f1;}.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 { color: #fff; border: 0;}.button.bg-black:hover { background: #222;}.button.bg-dark-grey:hover { background: #444;}.button.bg-main:hover { background: #1380cb;}.button.bg-dot:hover { background: #d93600;}.button.bg-gray:hover { background: #aaa;}.button.bg-light-gray:hover { background: #aaa;}.button.bg-sub:hover { background: #2a95de;}.button.bg-mix:hover { background: #ff5a00;}.button.bg-white:hover { background: #f1f1f1;}.button.bg-gray-white:hover { background: #fff;}.button.bg-pink:hover { background: #e13538;}.button.bg-red:hover { background: #d10;}.button.bg-orange:hover { background: #f60;}.button.bg-blue:hover { background: #0ae;}.button.bg-green:hover { background: green;}.button.border-gray:hover, .button.border-main:hover, .button.border-dot:hover, .button.border-mix:hover, .button.border-sub:hover, .button.border-black:hover { color: #fff;}.button.border-gray-white:hover { background: #eee;}.button.border-light-gray:hover { background: #ccc;}.button.border-gray:hover { background: #999;}.button.border-black:hover { background: #000;}.button.border-main:hover { background: #2a95de;}.button.border-sub:hover { background: #1380cb;}.button.border-mix:hover { background: #d93600;}.button.border-dot:hover { background: #ff5a00;}/***select***/.select { width: 100%; height: 26px; border: 1px solid #ccc;}.select:focus, .select:hover { border-color: #2a95de;}/***textarea***/.textarea { border: 1px solid #ccc; resize: none;}.textarea:hover { border-color: #2a95de;}.textarea:focus { border-color: #2a95de; background-color: #f5f8fd;}/***margin***//***border***/.border { border: solid 1px #ddd;}.border-top { border-top: solid 1px #ddd;}.border-right { border-right: solid 1px #ddd;}.border-bottom { border-bottom: solid 1px #ddd;}.border-left { border-left: solid 1px #ddd;}.border-top-bottom { border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}.border-left-right { border-left: solid 1px #ddd; border-right: solid 1px #ddd;}/*边框样式*/.border-dashed { border-style: dashed;}.border-dotted { border-style: dotted;}.border-double { border-style: double;}.border-inset { border-style: inset;}.border-outset { border-style: outset;}/*边框大小*/.border-large { border-width: 10px;}.border-big { border-width: 5px;}.border-middle { border-width: 3px;}.border-small { border-width: 2px;}.border-none { border: none !important;}/*边框颜色*/.border-gray-white { border-color: #eee;}.border-light-gray { border-color: #ccc;}.border-gray { border-color: #999;}.border-main { border-color: #2a95de;}.border-sub { border-color: #1380cb;}.border-mix { border-color: #d93600;}.border-dot { border-color: #ff5a00;}.border-white { border-color: #fff;}.border-black { border-color: #000;}/***border radius***/.radius-none { border-radius: 0;}.radius-small { border-radius: 2px;}.radius { border-radius: 4px;}.radius-big { border-radius: 6px;}.radius-rounded { border-radius: 2em;}.radius-circle { border-radius: 50%;}/***boxshadow***/.box-shadow { box-shadow: 0 3px 5px #ccc;}/***background***/.bg { background: #eee;}.bg-gray { background: #999;}.bg-dark-grey { background: #3a3a3a;}.bg-black { background: #000;}.bg-white { background: #fff;}.bg-gray-white { background: #f7f7f7;}.bg-main { background: #2a95de;}.bg-sub { background: #1380cb;}.bg-mix { background: #d93600;}.bg-dot { background: #ff5a00;}.bg-pink { background: #e13538;}.bg-red { background: #d10;}.bg-orange { background: #f60;}.bg-blue { background: #0ae;}.bg-green { background: green;}.bg-inverse, .bg-inverse a { color: #fff;}.bg-none { background: none !important;}.bg-light-red { background: #f00;}/*内边距,全,上,下,左,右*/.padding-large { padding: 30px;}.padding-large-top { padding-top: 30px;}.padding-large-right { padding-right: 30px;}.padding-large-bottom { padding-bottom: 30px;}.padding-large-left { padding-left: 30px;}.padding-big { padding: 20px;}.padding-big-top { padding-top: 20px;}.padding-big-right { padding-right: 20px;}.padding-big-bottom { padding-bottom: 20px;}.padding-big-left { padding-left: 20px;}.padding { padding: 10px;}.padding-tb { padding: 10px 0;}.padding-lr { padding: 0 10px;}.padding-top { padding-top: 10px;}.padding-right { padding-right: 10px;}.padding-bottom { padding-bottom: 10px;}.padding-left { padding-left: 10px;}.padding-small { padding: 5px;}.padding-small-top { padding-top: 5px;}.padding-small-right { padding-right: 5px;}.padding-small-bottom { padding-bottom: 5px;}.padding-small-left { padding-left: 5px;}.padding-little { padding: 2px;}.padding-little-top { padding-top: 2px;}.padding-little-right { padding-right: 2px;}.padding-little-bottom { padding-bottom: 2px;}.padding-little-left { padding-left: 2px;}.padding-none { padding: 0 !important;}/*外边距,全,上,下,左,右*/.margin-large { margin: 30px;}.margin-large-top { margin-top: 30px;}.margin-large-right { margin-right: 30px;}.margin-large-bottom { margin-bottom: 30px;}.margin-large-left { margin-left: 30px;}.margin-big { margin: 20px;}.margin-big-top { margin-top: 20px;}.margin-big-right { margin-right: 20px;}.margin-big-bottom { margin-bottom: 20px;}.margin-big-left { margin-left: 20px;}.margin { margin: 10px !important; clear: both;}.margin-tb { margin: 10px 0;}.margin-lr { margin: 0 10px;}.margin-top { margin-top: 10px;}.margin-right { margin-right: 10px;}.margin-bottom { margin-bottom: 10px;}.margin-left { margin-left: 10px;}.margin-around { margin: 0 10px;}.margin-small { margin: 5px;}.margin-small-top { margin-top: 5px;}.margin-small-right { margin-right: 5px;}.margin-small-bottom { margin-bottom: 5px;}.margin-small-left { margin-left: 5px;}.margin-little { margin: 2px;}.margin-little-top { margin-top: 2px;}.margin-little-right { margin-right: 2px;}.margin-little-bottom { margin-bottom: 2px;}.margin-little-left { margin-left: 2px;}.margin-none { margin: 0 !important;}/*无序有序列表*/ul { list-style: none;}ol { padding-left: 24px;}.list-cn { list-style-type: cjk-ideographic;}.list-alpha { list-style-type: upper-alpha;}.list-unstyle { list-style: none; padding-left: 0;}.list-unstyle ul { list-style: disc;}.list-inline li { display: inline-block; padding: 0 10px; width: auto;}/***布局***/.layout { width: 100%;}.container { margin: 0 auto; width: 1200px;}/*宽度比例*/.w10 { width: 10%;}.w20 { width: 20%;}.w30 { width: 30%;}.w40 { width: 40%;}.w50 { width: 50%;}.w60 { width: 60%;}.w70 { width: 70%;}.w80 { width: 80%;}.w90 { width: 90%;}.w5 { width: 5%;}.w15 { width: 15%;}.w25 { width: 25%;}.w35 { width: 35%;}.w45 { width: 45%;}.w55 { width: 55%;}.w65 { width: 65%;}.w75 { width: 75%;}.w85 { width: 85%;}.w95 { width: 95%;}/*HR*/.hr-gray { width: 100%; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #fff;}.hr-black { width: 100%; border-top: 1px solid #171717; border-bottom: 1px solid #707070;}.hr-blue { width: 100%; border-top: 1px solid #2969a6; border-bottom: 1px solid #488bcb;}/*spacer*/.spacer-gray { border-left: 1px solid #d6d6d6; border-right: 1px solid #fff;}/*广告*/.roof { width: 1200px; height: 90px; overflow: hidden; margin: 0 auto; display: none;}.mask { opacity: 0.7; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 1030; background: rgb(0, 0, 0); display: none; overflow: hiden;}.ads { position: absolute; top: 23%; left: 23%;}.ads a { position: absolute; top: 0; right: 0;}/* 订单支付 */.order-container .border, .pay-checkbox:hover { cursor: pointer;} 类名称通俗易懂，样式多样且全面。支持各种手机端布局。很棒。值得借鉴。