body, ul, li, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, nav, section, summary, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: content-box; } ol, ul, li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } label { margin-right: 12px; } body { line-height: 1; background: url(../images/page-bg.png) repeat-x top left; font: 14px Helvetica, Arial, "Microsoft Yahei", SimSun, sans-serif; } .cl { zoom: 1; content: ''; } .cl:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } input:focus, textarea:focus { outline: none; } img { border: 0 none; } a:link, a:visited, a:hover, a:active { color: #333; text-decoration: none; } /**通用**/ .wrap { width: 982px; margin: 0 auto; } .pr { position: relative; } .fl { float: left; } .fr { float: right; } .offset-parent { position: relative; } /*通用顶部*/ .header-bar { height: 50px; } .header-bar { overflow: visible; } .header-bar .logo { width: 184px; height: 49px; margin: 6px 0 0 8px; float: left; } .header-bar .user-nav { margin-top: 2px; float: right; /**************导航tab对应icon 开始 *********************/ /**************导航tab对应icon 结束*********************/ } .header-bar .user-nav .icon-index { width: 23px; background-position: 0 0; } .header-bar .user-nav .icon-order { width: 26px; background-position: 0 -44px; } .header-bar .user-nav .icon-12306 { width: 24px; background-position: 0 -84px; } .header-bar .user-nav .icon-user { width: 24px; background-position: 0 -122px; } .header-bar .user-nav li { padding-top: 8px; width: 104px; height: 50px; text-align: center; color: #fff; float: left; cursor: pointer; position: relative; } .header-bar .user-nav li > a { display: block; color: #fff; } .header-bar .user-nav li:after { content: ''; width: 1px; height: 40px; background-color: #d26405; position: absolute; top: 10px; right: -1px; } .header-bar .user-nav li .icon { display: inline-block; height: 26px; margin-bottom: 2px; } .header-bar .user-nav li.selected { border-radius: 5px; color: #f17206; background: #fff; padding-bottom: 10px; } .header-bar .user-nav li:hover div, .header-bar .user-nav li:hover p, .header-bar .user-nav li:hover i { opacity: 0.75; } .header-bar .user-nav li:active div, .header-bar .user-nav li:active p, .header-bar .user-nav li:active i { opacity: 0.4; } .header-bar .user-nav li.selected .icon-index { background-position: 0 -164px; } .header-bar .user-nav li.selected .icon-order { background-position: 0 -207px; } .header-bar .user-nav li.selected .icon-12306 { background-position: 0 -45px; } .header-bar .user-nav li.selected .icon-user { background-position: 0 -284px; } .header-bar .user-nav .user-nav-user { position: relative; width: 50px; margin: 0 auto; } .header-bar .user-nav .user-nav-user:after { content: ''; border-top: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; width: 0; height: 0; position: absolute; right: -8px; top: 7px; } .header-bar .user-nav li .user-nav-menu { background-color: #fff; margin: 0; border: 1px solid #c8c7c7; border-radius: 4px; position: relative; top: 0; box-shadow: 3px 3px 5px rgba(150,150,150,0.2); z-index: 100; display: none; transition: linear all 0.2s; padding-top: 5px; padding-bottom: 5px; } .header-bar .user-nav li:hover .user-nav-menu { transition: linear all 0.2s; top: 0; display: block; } .header-bar .user-nav .user-nav-menu dd { margin-left: 0; } .header-bar .user-nav .user-nav-menu a { display: block; padding: 10px; } .header-bar .user-nav .user-nav-menu a:hover { background-color: #fff0d9; } .header-bar .user-nav .user-nav-menu a:active { background-color: #f7f1e8; } input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; border: 0; -webkit-appearance: none; border-radius: 3px; display: inline-block; margin-bottom: 0; margin-top: 0; position: relative; vertical-align: middle; background: url(../images/icon.png) no-repeat 0 -560px; } input[type="checkbox"]:checked, input[type="radio"]:checked { background-position: 0 -582px; } input[type=number] { border-radius: 5px; border: 1px solid #ccc; padding: 3px 5px; text-align: center; width: 50px; } select { border-radius: 5px; padding: 3px 5px; border: 1px solid #ccc; } div.text-input-wrap { border: 1px solid #c9c9c9; display: inline-block; padding: 0 5px; } div.text-input-wrap > input { border: none; line-height: 22px; padding: 2px 5px 2px 5px; margin: 0; background: transparent; color: #6f7379; display: inline-block; }