@charset "utf-8"; /* 陕西金博瑞网络科技有限公司 www.borain.net 400-029-1650 */ /* 样式初始化代码 */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } body { background: #fff; color: #555; font-size: 14px; font-family: "Microsoft YaHei", '黑体', Arial, Helvetica, sans-serif; } td, th, caption { font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } a { color: #555; text-decoration: none; } a:hover { text-decoration: none; } img { border: none; } ol, ul, li { list-style: none; } input, textarea, select, button { font: 14px Verdana, Helvetica, Arial, sans-serif; } table { border-collapse: collapse; } html { overflow-y: scroll; } /* 公用类名 清除浮动与浮动(项目中有实际需要酌情添加)*/ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } .fl { float: left !important; } .fr { float: right !important; } .icon { display: block; } .buy { display: inline-block; background: url("../images/buy.png") no-repeat; padding-left: 15px; width: 53px; height: 22px; color: #fff; text-align: center; } .buy:hover { background-position: 0 -22px; } .operationBtn { display: inline-block; width: 34px; height: 20px; line-height: 22px; border: 1px solid #e2e2e2; font-size: 12px; text-align: center; padding-left: 10px; background: url("../images/buy.png") no-repeat -55px -45px; } .operationBtn:first-child { margin-right: 10px; background-position: 2px -45px; } input[type=button], input[type=submit] { cursor: pointer; } .multiple { vertical-align: middle; } /* css 非公有样式(规范:#顶层盒子(#header #footer...) .指定样式类名{})*/ /* 公用头部 */ #header .content { width: 1000px; margin: 0 auto; } #header .top { background: #eee; border-bottom: 1px solid #dbdbdb; height: 46px; } #header .top span { display: inline-block; line-height: 46px; } #header .top span .hint { color: #d01932; display: inline-block; margin-left: 10px; } #header .top ul { display: block; } #header .top ul li { float: left; line-height: 46px; margin: 0 5px; color: #ccc; } #header .top ul li .icon { float: left; width: 17px; height: 14px; background: url("../images/header_top_icon.png") no-repeat; margin: 16px 3px 0 0; } #header .top ul li .iconA { background-position: 0 0; } #header .top ul li .iconB { background-position: -17px 0; } #header .top ul li .iconC { background-position: -34px 0; } #header .top ul li .iconD { background-position: -48px 0; } #header .top ul li .iconE { background-position: -63px 0; } #header .top ul li a { display: inline-block; } #header .top ul li a:hover { color: #2a7500; } #header .mid .logo { margin: 28px auto; } #header .mid .search { margin: 33px 0 0 34px; } #header .mid .search .inform .icon { width: 14px; height: 14px; background: url("../images/header_top_icon.png") no-repeat top right; } #header .mid .search .inform span { display: block; height: 14px; line-height: 14px; margin-left: 10px; width: 264px; overflow: hidden; } #header .mid .search .inform span font { display: block; width: 10000%; /*用于撑开文字滚动对象*/ height: 14px; position: relative; z-index: 2; left: 0; } #header .mid .search .inform span font a { float: left; display: block; } #header .mid .search .inform span font a:hover { color: #d01932; } #header .mid .search .searchBox { border: 3px solid #2a7500; width: 282px; height: 30px; margin-top: 10px; } #header .mid .search .searchBox form input[type=text] { padding-left: 10px; height: 30px; line-height: 30px; border: none; width: 194px; } #header .mid .search .searchBox form input[type=button] { width: 78px; height: 30px; border: none; background: #2a7500; line-height: 30px; color: #fff; } #header .mid .weChat { width: 177px; height: 96px; background: url("../images/header_weChat.jpg") no-repeat; margin: 15px auto; } #header .nav { background: #2a7500; } #header .nav a { display: block; text-align: center; line-height: 40px; color: #fff; float: left; height: 40px; width: 100px; } #header .nav .headerNavActive { background: #111; color: #fff; } /* 公用底部 */ #footer .content { width: 1000px; margin: 0 auto; } #footer .guarantee { background: #eee; padding: 10px 0; } #footer .guarantee ul li { float: left; border-left: 1px solid #ccc; } #footer .guarantee ul li:first-child { border-left: none; } #footer .guarantee ul li .icon { width: 52px; height: 50px; background: url("../images/footer_icon.png") no-repeat; } #footer .guarantee ul li .iconB { background-position: -54px 0; } #footer .guarantee ul li .iconC { background-position: -108px 0; } #footer .guarantee ul li .iconD { background-position: -162px 0; } #footer .guarantee ul li span { display: inline-block; color: #111; font-size: 16px; margin: 5px 0 0 5px; } #footer .guarantee ul li span font { color: #666; font-size: 14px; } #footer .guarantee ul .liA { width: 225px; } #footer .guarantee ul .liB { width: 245px; padding-left: 45px; } #footer .guarantee ul .liC { width: 245px; padding-left: 45px; } #footer .guarantee ul .liD { width: 142px; padding-left: 45px; } #footer .copyright { background: #000; padding: 10px 0; } #footer .copyright p { color: #ccc; line-height: 20px; font-size: 12px; } /* 右侧悬浮导航 */ #rightNav { position: fixed; right: -80px; bottom: 20px; } #rightNav li { width: 130px; height: 50px; background: #eee; margin: 10px 0; position: relative; } #rightNav li .icon { width: 48px; height: 48px; float: left; margin: 1px; background: url("../images/rightNav_icon.png") no-repeat; } #rightNav li a { color: #fff; line-height: 50px; text-align: center; display: block; } #rightNav .navA { background: #6d6d9f; } #rightNav .navA .icon { background-position: 0 0; } #rightNav .navB { background: #67076f; } #rightNav .navB .icon { background-position: 0 -48px; } #rightNav .navC { background: #8bc48d; } #rightNav .navC .icon { background-position: 0 -96px; } #rightNav .navD { background: #e6776c; } #rightNav .navD .icon { background-position: 0 -144px; } #rightNav .navE { background: #bc3f61; } #rightNav .navE .icon { background-position: 0 -192px; } /* 登录注册(弹窗) */ #mask { position: fixed; width: 0; height: 0; top: 50%; left: 50%; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 99; background: url("../images/footer_mask_bg.png"); } #mask .login { display: none; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); width: 400px; position: fixed; z-index: 100; top: -50%; left: 50%; margin: -232px 0 0 -200px; background: url("../images/footer_mask.jpg") no-repeat; } #mask .login .loginBox { background: url("../images/footer_login.png") no-repeat; width: 400px; height: 464px; } #mask .login .loginBox form { width: 220px; margin: 0 auto; padding-top: 160px; } #mask .login .loginBox form p { width: 100%; margin: 5px auto; } #mask .login .loginBox form p .outline { border: 1px solid; height: 38px; line-height: 38px; border-radius: 5px; } #mask .login .loginBox form p .input { padding-left: 43px; width: 175px; background: #a9d8a9 url("../images/footer_login_icon.png") no-repeat 10px -30px; border-color: #a9d8a9; outline: none; color: #3aa138; } #mask .login .loginBox form p .input:focus { background-color: #fff; border-color: #3fad3d; } #mask .login .loginBox form p .input[name=phone] { background-position: 10px 8px !important; margin-bottom: 10px; } #mask .login .loginBox form p .btn { width: 220px; border-color: #3aa138; background: #3aa138; color: #fff; } #mask .login .loginBox form p font { display: inline-block; vertical-align: middle; } #mask .login .loginBox form p font input[type=checkbox] { display: block; float: left; margin: 5px 2px 0 0; } #mask .login .loginBox form p span { color: #dd1132; } #mask .login .loginBox form p span a { color: #666; } #mask .login .loginBox form p span #goReg { color: #419d0e; margin-left: 5px; } #mask .login .loginBox .other { width: 220px; margin: 30px auto 0; border-top: 1px solid #a9d8a9; padding-top: 20px; } #mask .login .loginBox .other .icon { display: block; width: 41px; height: 34px; float: left; background: url("../images/footer_login_icon.png") no-repeat; } #mask .login .loginBox .other .QQ { background-position: -5px -75px; } #mask .login .loginBox .other .XL { background-position: 0 -116px; margin: 0 14px; } #mask .login .loginBox .other .TB { background-position: 0 -158px; margin: 0 14px; } #mask .login .loginBox .other .BD { background-position: 5px -199px; } #mask .register { display: none; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); width: 400px; position: fixed; z-index: 100; top: -50%; left: 50%; margin: -255px 0 0 -200px; background: url("../images/footer_mask.jpg") no-repeat; padding: 80px 0 10px; } #mask .register .registerBox { background: url("../images/footer_loginBox_bg.png"); width: 380px; margin: 0 auto; } #mask .register .registerBox:before { content: ""; display: block; background: url("../images/footer_register.png") no-repeat; width: 74px; height: 64px; float: left; margin: -64px 0 0 78px; } #mask .register .registerBox .title { display: block; width: 220px; margin: 0 auto; color: #3aa138; height: 54px; line-height: 54px; font-size: 18px; border-bottom: 1px solid #3aa138 ; } #mask .register .registerBox form { width: 220px; margin: 0 auto; padding-bottom: 5px; } #mask .register .registerBox form p { width: 100%; margin: 10px auto; } #mask .register .registerBox form p input[type=text]:focus, #mask .register .registerBox form p input[type=password]:focus { background-color: #fff; border-color: #3fad3d; } #mask .register .registerBox form p .outline { border: 1px solid; height: 38px; line-height: 38px; border-radius: 5px; outline: none; } #mask .register .registerBox form p .input { padding-left: 10px; width: 208px; background: #fff; border-color: #fff; color: #3aa138; } #mask .register .registerBox form p .verify { padding-left: 10px; width: 100px; background: #fff; border-color: #fff; } #mask .register .registerBox form p .gain { width: 93px; height: 40px; line-height: 40px; background: #3aa138; border-color: #3aa138; color: #fff; } #mask .register .registerBox form p .btn { width: 220px; border-color: #3aa138; background: #3aa138; color: #fff; } #mask .register .registerBox form p font { display: inline-block; vertical-align: middle; font-size: 12px; } #mask .register .registerBox form p font input[type=checkbox] { display: block; float: left; margin: 2px 2px 0 0; } #mask .register .registerBox form p font a { color: #000; } #mask .register .registerBox form p font a:hover { color: #3aa138; } #mask .register .registerBox form p span { color: #dd1132; } #mask .register .registerBox form .passIntension { display: block; } #mask .register .registerBox form .passIntension .pw-strength { clear: both; position: relative; z-index: 1; width: 220px; } #mask .register .registerBox form .passIntension .pw-bar { background: url(../images/pwd-1.png) no-repeat; position: relative; top: 1px; height: 6px; overflow: hidden; width: 220px; } #mask .register .registerBox form .passIntension .pw-bar-on { background: url(../images/pwd-2.png) no-repeat; width: 0px; height: 6px; position: absolute; top: 1px; left: 0; } #mask .register .registerBox form .link { height: 40px; line-height: 40px; } #mask .register .registerBox form .link a { color: #3aa138; } #mask .register .registerBox form .link a:hover { color: #248d22; } #mask .close { display: block; position: fixed; top: 10px; right: 10px; width: 34px; height: 34px; background: url("../images/footer_mask_close.png") no-repeat; } #mask .close:hover { background-position: -34px 0; } /* 客服中心 */ #customer { width: 188px; border: 1px solid #e2e2e2; } #customer .title { height: 60px; border-bottom: 1px solid #e2e2e2; background: #2a7500; } #customer .title .icon { width: 30px; height: 32px; background: url("../images/customer.png") no-repeat -42px -15px; float: left; margin: 15px 0 0 18px; } #customer .title span { color: #fff; font-size: 16px; margin: 12px 0 0 5px; float: left; } #customer .title span font { display: block; color: #d5fac0; font-size: 12px; } #customer .time { height: 50px; border-bottom: 1px solid #e2e2e2; } #customer .time span { display: block; text-align: center; color: #9c9c9c; } #customer .time span:first-child { color: #111; margin-top: 10px; } #customer .QQ { height: 38px; border-bottom: 1px solid #e2e2e2; text-align: center; } #customer .QQ a { line-height: 38px; } #customer .phone { height: 60px; background: #2a7500; } #customer .phone .phoneBox { background: url("../images/customer.png") no-repeat -76px 0; width: 140px; height: 60px; float: right; } #customer .phone:before { content: ""; display: block; width: 40px; height: 60px; background: url("../images/customer.png") no-repeat; float: left; } /* 全站搜索 */ #search { width: 188px; height: 228px; border: 1px solid #e2e2e2; } #search .title { background: url("../images/search.png") no-repeat 1px 0; width: 188px; height: 66px; } #search .searchBox { background: #2a7500 url("../images/search.png") no-repeat 1px -66px; width: 188px; height: 162px; } #search .searchBox form { padding-top: 20px; } #search .searchBox form p { color: #fff; display: block; margin: 10px auto; width: 170px; } #search .searchBox form p input[type=text] { width: 100px; border: none; padding-left: 10px; height: 22px; margin-left: 2px; outline: none; font-size: 12px; } #search .searchBox form p font { background: #fff; display: block; width: 50px; color: #999; } #search .searchBox form p font input[type=text] { padding: 0; margin: 0; background: none; border: none; float: right; width: 36px; height: 22px; } #search .searchBox form p input[type=button] { border: none; height: 22px; line-height: 22px; width: 50px; text-align: center; background: #112f00; color: #fff; font-size: 12px; margin-left: 58px; } #search .searchBox form p input[type=button]:hover { background: #419d0e; } #search .searchBox .hotWord { margin-left: 5px; } #search .searchBox .hotWord a { font-size: 12px; color: #fff; margin: 0 5px; } #search .searchBox .hotWord a :hover { color: #d01932; } /* 商品推荐 */ #recommend { width: 190px; } #recommend .details { width: 188px; border: 1px solid #e2e2e2; margin-bottom: 2px; } #recommend .details .picture { display: block; width: 180px; height: 180px; margin: 4px auto; background: #e2e2e2; } #recommend .details .info { padding-bottom: 5px; } #recommend .details .info p { width: 180px; margin: 5px auto; } #recommend .details .info p .price { color: #ff7c79; font-size: 16px; vertical-align: bottom; } #recommend .details .info p .salesVolume { font-size: 12px; vertical-align: bottom; display: block; margin-top: 3px; } #recommend .details .info p .tradeName { font-size: 14px; color: #111; } #recommend .details .info p .tradeName:hover { color: #ff7c79; } #recommend .litimg a { display: block; width: 44px; height: 44px; border: 1px solid #e2e2e2; float: left; margin: 0 2px 2px 0; text-align: center; vertical-align: middle; overflow: hidden; } #recommend .litimg a img { text-align: center; vertical-align: middle; } #recommend .litimg .recActive { border-color: #2a7500; } /* 商品排行 */ #leader { width: 190px; } #leader .title { display: block; width: 190px; height: 26px; line-height: 26px; background: #2a7500; color: #fff; text-indent: 30px; } #leader .changeNav { display: block; width: 168px; height: 26px; border: 1px solid #e2e2e2; border-top: none; padding: 10px 10px 0 10px; } #leader .changeNav a { display: inline-block; float: left; width: 82px; height: 25px; line-height: 25px; border: 1px solid #e2e2e2; text-align: center; color: #999; } #leader .changeNav a:first-child { border-right: none; } #leader .changeNav .changeActive { border-bottom: 1px solid #fff; color: #333; } #leader .changeBox { width: 188px; border: 1px solid #e2e2e2; border-top: none; } #leader .changeBox .goodsBox { width: 168px; margin: 0 auto; } #leader .changeBox .goodsBox ul li { padding: 10px 0; border-bottom: 1px dashed #e2e2e2; } #leader .changeBox .goodsBox ul li .top .litimg { display: block; width: 80px; height: 80px; text-align: center; vertical-align: middle; background: #aaa; } #leader .changeBox .goodsBox ul li .top .litimg img { text-align: center; vertical-align: middle; } #leader .changeBox .goodsBox ul li .top .info { width: 80px; height: 80px; } #leader .changeBox .goodsBox ul li .top .info .sort { width: 70px; height: 16px; } #leader .changeBox .goodsBox ul li .top .info .sort .fl { width: 46px; height: 16px; background: url("../images/leaderboard.png") no-repeat 0 -66px; } #leader .changeBox .goodsBox ul li .top .info .sort .fl .num { background: url("../images/leaderboard.png") no-repeat -56px -3px; width: 40px; height: 12px; margin: 2px 0 0 10px; } #leader .changeBox .goodsBox ul li .top .info .sort .fr { width: 16px; height: 16px; background: url("../images/leaderboard.png") no-repeat 0 -37px; } #leader .changeBox .goodsBox ul li .top .info .price { display: inline-block; color: #ff7c79; margin: 10px auto 5px; font-size: 16px; } #leader .changeBox .goodsBox ul li .top .info input[type=button] { padding: 2px 10px 2px 20px; border: none; background: #fff; font-size: 12px; color: #555; background: url("../images/leaderboard.png") no-repeat 2px -16px; } /* 首页 */ /* 首页焦点图 */ #inSlider .content { width: 1000px; margin: 0 auto; } #inSlider .content .sliderBox { width: 1000px; height: 450px; } #inSlider .content .sliderBox a { display: block; padding: 0; margin: 0; float: left; position: absolute; z-index: -1; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); } #inSlider .content .sliderBox a:first-child { z-index: 1; opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #inSlider .content .changeBtn { display: block; width: 33px; height: 64px; background: url("../images/slider_changeBtn.png") no-repeat; position: relative; z-index: 9; opacity: 0.6; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); } #inSlider .content .changeBtn:hover { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #inSlider .content #sliderL { float: left; left: -64px; top: 193px; } #inSlider .content #sliderR { background-position: -33px 0; float: right; right: -64px; top: -257px; } #inSlider .sliderDot { float: left; position: absolute; z-index: 10; margin-top: -30px; left: 50%; } #inSlider .sliderDot a { display: block; width: 10px; margin: 5px; height: 10px; float: left; background: url("../images/sliderDot.png") no-repeat 0 -11px; } #inSlider .sliderDot .sliderDotAct { background-position: 0 0; } /* 首页正文 */ #inContainer { background: url("../images/containerBg.png") repeat-x; } #inContainer .classifyIn { width: 1000px; margin: 0 auto; font-size: 0; } #inContainer .classifyIn div { margin: 0; border: none; padding: 0; width: 200px; height: 66px; background: #333; float: left; } #inContainer .classifyIn div:first-child { margin-left: 0; } #inContainer .classifyIn .entryA { background: #999; } #inContainer .classifyIn .entryB { background: #666; } #inContainer .classifyIn .entryC { background: #999; } #inContainer .classifyIn .entryD { background: #666; } #inContainer .classifyIn .entryE { background: #999; } #inContainer .content { width: 1000px; margin: 0 auto; padding: 15px 0; } #inContainer .content .conR { width: 190px; } #inContainer .content .conR .module { margin-top: 10px; }