/** * 描述:重置页面元素,设置布局样式及公共模块 * 作用范围:公共 */ body { font: 14px/1.5 "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei", sans-serif; color:#404040; background-color:#fff; } ::-webkit-scrollbar-track { background-color:transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #c3c3c3; } body,p,pre,blockquote, h1,h2,h3,h4,h5,h6, dl,dt,dd,ul,ol,li, form,fieldset,legend,select, input,textarea,button, table,caption,tr,th,td { margin:0; padding:0; } ol,ul { list-style:none; } fieldset,img { border:0 none; } img { max-width: 100%; } a { color: #4097ce; text-decoration:none; } a:hover{ text-decoration:none; color:#58b4ef } input,button,textarea,select,option { font-family:inherit; font-size:100%; outline: 0; } textarea { overflow: auto; resize: none; } /* 布局样式 */ .cf,.nav { *zoom: 1; } .cf:before, .cf:after, .nav:before, .nav:after, .media:before, .media:after, .form-item:before,.form-item:after { display: table; content: ""; } .cf:after, .nav:after, .media:after, .form-item:after { clear: both; } .cf,.nav,.media, .form-item { *zoom: 1; } .fl { float: left; } .fr { float: right; } .wrapper { margin-left: auto; margin-right: auto; width: 1000px; } .cont-container { float: left; width: 720px; } .side-container { float: right; width: 270px; } .columns .hd { padding: 0 15px; height: 45px; line-height: 45px; font-size: 16px; color: #333; border-bottom: 1px solid #ebebeb; } .columns .bd { padding: 10px; } .m_10{ margin:10px;} .mt_10{ margin-top:10px} .ml_10{ margin-left:10px;} .mb_10{ margin-bottom:10px;} /* 公共独立类名 */ .hidden { display: none!important; } .block { display: block; } .mod { margin-bottom: 10px; border: 1px solid #ebebeb; } .pillar { display: inline-block; width: 0; height: 100%; vertical-align: middle; } .ellipsis, .ellipsis li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 导航列表 */ .nav li { float: left; } .nav-list { float: none; } .nav li a, .nav li a:hover, .nav-list li a, .nav-list li a:hover { display: block; text-decoration: none; } /* 表单样式 */ select { padding: 2px; height: 27px; line-height: 27px; font-size: 14px; border: 1px solid #ebebeb; } .radio,.checkbox { display: inline-block; font-size: 14px; min-height: 20px; line-height: 20px; vertical-align: middle; } .radio input, .checkbox input { float: left; margin: 4px 4px 0 0; *margin: 0 2px 0 0; } .radio + .radio, .checkbox + .checkbox { margin-left: 15px; } .must { margin: 0 4px; color: #f00; } /* 按钮 集成bootstrap */ .btn-small { padding: 3px 12px; font-size: 14px; } .btn-mini { padding: 1px 8px; font-size: 14px; } /* 左右两列的媒体结构 */ .media { margin-bottom: 15px; } .media .media-avatar, .media .media-side { float: left; margin-right: 15px; } .media .media-avatar, .media .media-avatar img { width: 52px; height: 52px; border-radius: 50%; } .media .media-avatar img, .media .media-side img { display: block; } .media .media-body { overflow: hidden; line-height: 1.8; word-break: break-all; } /* 实心小三角 */ .arrow { display: inline-block; width: 0; height: 0; line-height: 0; vertical-align: middle; border: 4px dashed transparent; } .arrow-down { border-top-style: solid; border-top-color: #000; border-bottom-width: 0; } .arrow-up { border-bottom-style: solid; border-bottom-color: #000; border-top-width: 0; } .arrow-left { border-right-style: solid; border-right-color: #000; border-left-width: 0; } .arrow-right { border-left-style: solid; border-left-color: #000; border-right-width: 0; } /* 表单美化 */ .regular-checkbox { display: none; } .regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative; margin:0 10px 0 0; vertical-align:middle } .regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .regular-checkbox:checked + label { background-color: #e9ecee; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #99a1a7; } .regular-checkbox:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 3px; color: #99a1a7; } .big-checkbox + label { padding: 18px; } .big-checkbox:checked + label:after { font-size: 28px; left: 6px; } .tag { font-family: Arial, sans-serif; width: 200px; position: relative; top: 5px; font-weight: bold; text-transform: uppercase; display: block; float: left; } .radio-1 { width: 193px; } .button-holder { float: left; } /* RADIO */ .regular-radio { display: none; } .regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative; vertical-align: middle; margin-right: 5px; } .regular-radio:checked + label:after { content: ' '; width: 12px; height: 12px; border-radius: 50px; position: absolute; top: 3px; background: #99a1a7; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); text-shadow: 0px; left: 3px; font-size: 32px; } .regular-radio:checked + label { background-color: #e9ecee; color: #99a1a7; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1); } .regular-radio + label:active, .regular-radio:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .big-radio + label { padding: 16px; } .big-radio:checked + label:after { width: 24px; height: 24px; left: 4px; top: 4px; } .pl_5{ padding-left:5px;}