/************************************* 中国军网 CSS 框架 -------------------------------------- reset/common/layout/hacks/plugin/style chinamil css freamwork *************************************/ /* 关于中国军网 CSS 框架 ---------------------------------------------------------------------------- - 1、 以减少前端工程师页面开发时间，提高工作效率，为目的。 - 2、 该框架提供可靠的 CSS 基础，通过重设和重建浏览器标准，防止枯燥的跨 - 浏览器兼容性测试。 - 3、 框架分为以下几部分： 1、 reset.css HTML基础样式定义。 2、 common.css 全局基础样式 从日常工作抽象出的高可用性、高移植性的代 码组合，该部分也解决一些浏览器兼容问题。 3、 layout.css 页面布局定义。 4、 hacks.css 尝试尽可能的将 hacks 单独分离开来存放，便于兼容性调试。 5、 plugin.css 部分扩展功能 6、 style.css 具体页面的CSS样式 页面中css文件的引用顺序以上述列表为准，在 style.css 中可以对上述样式 进行重写。 - 4、 文档中除 class 和 id 名称外，所以字符统一使用小写字母 中国军网 CSS 书写规范 ---------------------------------------------------------------------------- - 1、 文档中不出现连续空格，必要时可用 Tab 制表符 - 2、 class/id 命名严格遵守 驼峰命名标准，所以命名必须有着严谨的含义 - 3、 CSS 文档结构清晰，按功能或性质区分好各个代码块并注释明确 - 4、 文档中除 class 和 id 名称及 16 进制数字外，所有字符统一使用小写 字母。 - 5、 所有 hacks 必须注释针对的是哪个版本的浏览器 - 6、 CSS 中所有动画时间不得大于 0.3s ---------------------------------------------------------------------------- */ /* RESET.CSS ---------------------------------------------------------------------------- - 对页面基础 HTML 元素样式进行初步定义 ---------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td，article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin: 0;padding: 0;border: 0;outline: 0;text-align: left;vertical-align: baseline;} /* 要注意表单元素并不继承父级 font 的问题 */ body,button,input,select,textarea {font: 14px/20px 'Helvetica Neue','Helvetica','Arial','Sans-serif';color: #333;} input,select,textarea {font-size:100%;} /* 去掉各Table cell 的边距并让其边重合 */ table { border-collapse:collapse; border-spacing:0;} /* IE bug fixed: th 不继承 text-align*/ th {text-align:inherit;} /* 去除默认边框 */ fieldset,img { border:none;} /* ie6 7 8(q) bug 显示为行内表现 */ iframe { display:block;} /* 去掉 firefox 下此元素的边框 */ abbr,acronym {border:none;font-variant:normal;} /* 一致的 del 样式 */ del {text-decoration:line-through;} address,caption,cite,code,dfn,em,th,var {font-style:normal; font-weight:500;} /* 去掉列表前的标识, li 会继承 */ ol,ul { list-style:none;} /* 对齐是排版最重要的因素, 别让什么都居中 */ caption,th {text-align:left;} /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} q:before,q:after , blockquote:before, blockquote:after{ content:'';} /* 统一上标和下标 */ sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;} sup { top:-0.5em;} sub { bottom:-0.25em;} /* 默认不显示下划线，保持页面简洁 */ ins,a { text-decoration:none;} /* 让链接在 hover 状态下显示下划线 */ a:hover { text-decoration:underline;} /* IE6,7焦点点状线去除 */ a:focus,*:focus { outline:none;} /*在所有的外部链接前面添加一个外部链接图表*/ /* a[href^="http:"] {background: url(../images/externalLink.gif) no-repeat right top; padding-right:10px;} a[href^="mailto:"] {background: url(../images/email_link.png) no-repeat right top; padding-right:22px; padding-bottom:5px;} a[href^="aim:"] {background: url(../images/group.png) no-repeat right top; padding-right:22px; padding-bottom:5px;} a[href$=".pdf"] {background: url(../images/page_pdf.png) no-repeat right top; padding-right:22px; padding-bottom:5px;} a[href$=".doc"] {background: url(../images/page_word.png) no-repeat right top; padding-right:22px; padding-bottom:5px;} a[href$=".rss"], a[href$=".rdf"] {background: url(../images/feed.png) no-repeat right top; padding-right:22px; padding-bottom:5px;} */ /* common.css @import url("../css/reset.css"); ---------------------------------------------------------------------------- - 1、该部分是全局基础样式 - 2、原则上确定了色系后不得随意添加颜色 ---------------------------------------------------------------------------- */ .fl {float:left;display:inline;} .fr {float:right;display:inline;} .mt10{ margin-top:10px;} .clearThis {clear:both;} .hide {display:none;} /* 清除浮动 */ .clearfix:before,.clearfix:after { content:""; display:table;} .clearfix:after {clear:both; overflow:hidden;} .clearfix {zoom:1; /* for IE6 IE7 */} /* layuot.css @import url("../css/reset.css"); ---------------------------------------------------------------------------- - 1、该部分是全局基础样式 - 2、原则上确定了色系后不得随意添加颜色 cm chinamil c column l left r right num column number ---------------------------------------------------------------------------- */ .cm_c3_1{ width:280px;_overflow:hidden;} .cm_c3_2{ width:700px;_overflow:hidden;} .cm_c3_2_l,.cm_c3_2_r{width:340px; float:left; display:inline;zoom:1;overflow:hidden;} .cm_c3_2_r{float:right;} .cm_c4,.cm_c4_last{ width: 235px; float:left; margin-right:20px; display:inline;} .cm_c4_last{ margin-right:0;} .cm_c2_l,.cm_c2_r{ width:490px; float:left; margin-right:20px; display:inline;_overflow:hidden;} .cm_c2_r{ margin-right:0;} .side_box{border: 1px solid #e0e0e0;padding-bottom: 15px; overflow:hidden;} .cm_c3_a,.cm_c3_b,.cm_c3_c{ width: 319px;padding: 10px; float:left; display:inline; overflow:hidden;border-right: 1px #ddd solid;height:290px;} .cm_c3_c{float: right;padding:10px 0;border: 0px;width:318px} .cm_c5,.cm_c5_last{ width:184px; float:left; margin-right:20px; display:inline; _overflow:hidden;} .cm_c5_last{ margin-right:0;} .cm_c3_180,.cm_c3_390{ width:180px; float:left; display:inline;} .cm_c3_390{ width:390px;} .cm_700_c5,.cm_700_c5_last{ width:132px; float:left; margin-right:10px; display:inline; _overflow:hidden;} .cm_700_c5_last{ margin-right:0;} /* HACKS.CSS ---------------------------------------------------------------------------- - 尽可能的将兼容代码分离存放 ---------------------------------------------------------------------------- */ /* PLUGIN.CSS ---------------------------------------------------------------------------- - 重写一部分全局样式 - 新增一部分样式定义 ---------------------------------------------------------------------------- */ /* STYLE.CSS ---------------------------------------------------------------------------- - 重写一部分全局样式 - 新增一部分样式定义 ---------------------------------------------------------------------------- */ /* 配色方案 ---------------------------------------------------------------------------- - 1、 页面所有元素的颜色统一在这里定义 - 2、 原则上确定了色系后不得随意添加颜色 ---------------------------------------------------------------------------- */ .black{background:#000;} .white{background:#FFF;} .green{background:#0F0;} .blue{background:#00F;} .bg_red{background:#C00;} .bg_f2{ background:#f2f2f2;} .bg_fff{ background:#FFF;} .bd1{ border:1px solid #ddd;} .red{ color:#C00;}