项目管理-css

受bootstrap框架的启发，模块化编写将成为我的偏好。

面板

.m-panel{}
.m-panel .p-panelHd{}
.m-panel .p-panelBd{}
.m-panelDefault{}

common.css

最后，我的reset.css文件

/* 公用样式 */
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;/*包含border,支持IE8+*/}
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; }
body { background-color: #d1d1d1; font: .81em/150% \5FAE\8F6F\96C5\9ED1,Arial, Helvetica, sans-serif; color: #333; font-size: 1.4em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
table{border-collapse:collapse; border-spacing: 0;}
caption,th{text-align: left;}
ol,ul{list-style: none;}
address,caption,cite,code,dfn,em,th,var{ font-style: normal; font-weight: normal;}
img, fieldset,abbr,acronym { border: 0; }
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
a, h1, h2, h3, h4, h5, h6, p { font-family: \5FAE\8F6F\96C5\9ED1; }
h1, h2, h3, h4, h5, h6 { line-height: 1.4em; margin: 0.5em 0; }
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3{ font-size: 1.4em; }
h4{ font-size: 1.2em; }
h5 { font-size: 1.1em;}
h6 { font-size: 1em; }
p { line-height: 1.8em; font-size: 1em;}
/* reset webkit search input styles */
input[type=search] { -webkit-appearance: none; outline: none; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

/***************************  功能 f-  ***************************/
/* 文字排版 */
.f-f12{font-size: 12px;}
.f-f14{font-size: 14px;}
.f-f16{font-size: 16px;}
.f-f18{font-size: 18px;}
.f-f20{font-size: 20px;}
.f-fwb{ font-weight: bold;}
.f-fwn{ font-weight: normal;}
.f-t2{text-indent: 2em;}
.f-lh150{ line-height: 150%;}
.f-lh180{ line-height: 180%;}
.f-lh200{ line-height: 200%;}
.f-unl{text-decoration: underline;}
.f-no-unl{text-decoration:none;}
/* 定位 */
.f-tal{ text-align: left;}
.f-tac{ text-align: center;}
.f-tar{ text-align: right;}
.f-vam{vertical-align: middle;}
.f-vat{vertical-align: top;}
.f-bc{margin-left: auto; margin-right:auto;}
.f-oh{overflow: hidden;}
.f-fl{ float: left; display: inline;}
.f-fr{ float: right; display: inline;}
.f-pr{position: relative;}
.f-pa{position: absolute;}
.f-par{position: absolute; right: 0;}
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after,.clear{ clear: both; }
.clearfix{zoom: 1;}
.zoom{zoom:1;}
.hidden{visibility: hidden;}
.block{display:block;}
.none{display: none;}
/* 长度高度 */
.f-w10{width: 10px;}
.f-w20{width: 20px;}
.f-w30{width: 30px;}
.f-w40{width: 40px;}
.f-w50{width: 50px;}
.f-w60{width: 60px;}
.f-w70{width: 70px;}
.f-w80{width: 80px;}
.f-w90{width: 90px;}
.f-w100{width: 100px;}
.f-w200{width: 200px;}
.f-w250{width: 250px;}
.f-w300{width: 300px;}
.f-w400{width: 400px;}
.f-w500{width: 500px;}
.f-w600{width: 600px;}
.f-w700{width: 700px;}
.f-w800{width: 800px;}
.f-w{width: 100%;}
.f-h50{height: 50px;}
.f-h80{height: 80px;}
.f-h100{height: 100px;}
.f-h200{height: 200px;}
.f-h{height: 100%;}
/* 外边距 */
.f-m5{ margin:5px;}
.f-m10{ margin:10px;}
.f-m15{ margin:15px;}
.f-mt5{ margin-top:5px;}
.f-mt10{ margin-top:10px;}
.f-mt15{ margin-top:15px;}
.f-mr5{ margin-right:5px;}
.f-mr10{ margin-right:10px;}
.f-mr15{ margin-right:15px;}
.f-mb5{ margin-bottom:5px;}
.f-mb10{ margin-bottom:10px;}
.f-mb15{ margin-bottom:15px;}
.f-ml5{ margin-left:5px;}
.f-ml10{ margin-left:10px;}
.f-ml15{ margin-left:15px;}
.f-p5{ padding:5px;}
.f-p10{ padding:10px;}
.f-p15{ padding:15px;}
.f-pt5{ padding-top:5px;}
.f-pt10{ padding-top:10px;}
.f-pt15{ padding-top:15px;}
.f-pr5{ padding-right:5px;}
.f-pr10{ padding-right:10px;}
.f-pl15{ padding-right:15px;}
.f-pb5{ padding-bottom:5px;}
.f-pb10{ padding-bottom:10px;}
.f-pb15{ padding-bottom:15px;}
.f-pl5{ padding-left:5px;}
.f-pl10{ padding-left:10px;}
.f-pl15{ padding-left:15px;}