CSS源码main.css:
/** *common style */ body { font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } .btn-red { padding: 5px 10px; color: #fff !important; background: #E92322; } img { display: block; } span.line { color: #ccc; padding: 0 4px; position: relative; top: -1px; } ul { list-style: none; } a, a:hover { text-decoration: none; color: #414141; } /** *Bootstrap extend */ .panel-xxc { border-color: #ddd; border: none; border-radius: 0; box-shadow: 1px 1px 5px #ccc; } .panel-xxc > .panel-heading { width: 120px; float: right; height: 150px; border-left: 1px dashed #c0c0c0; text-align: center; position: relative; padding: 40px 0; } .panel-xxc > .panel-heading strong { font-size: 36px; } .panel-xxc.actived { background-color: #e9232c; color: #fff; } .panel-xxc.disabled { background-color: #e0e0e0; } .panel-xxc > .panel-body { margin-right: 120px; height: 150px; } .panel-xxc > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; } .navbar-xxc { background-color: #fff; border-color: #f5f5f5; height: 80px; margin-bottom: 0; } .navbar-xxc .navbar-brand:focus, .navbar-xxc .navbar-brand:hover { color: #5e5e5e; background-color: transparent; } .navbar-xxc .navbar-text { color: #777; } .navbar-xxc .navbar-nav > li > a { line-height: 48px; font-size: 16px; } .navbar-xxc .navbar-nav > li > a:focus, .navbar-xxc .navbar-nav > li > a:hover { background-color: transparent; border-bottom: 2px solid #E92322; } .navbar-xxc .navbar-nav > .active > a, .navbar-xxc .navbar-nav > .active > a:focus, .navbar-xxc .navbar-nav > .active > a:hover { border-bottom: 2px solid #E92322; } .navbar-xxc .navbar-nav > .disabled > a, .navbar-xxc .navbar-nav > .disabled > a:focus, .navbar-xxc .navbar-nav > .disabled > a:hover { background-color: transparent; } .navbar-xxc .navbar-toggle { border-color: #ddd; } .navbar-xxc .navbar-toggle:focus, .navbar-xxc .navbar-toggle:hover { background-color: #ddd; } .navbar-xxc .navbar-toggle .icon-bar { background-color: #888; } .navbar-xxc .navbar-collapse, .navbar-xxc .navbar-form { border-color: #e7e7e7; } .navbar-xxc .navbar-nav > .open > a, .navbar-xxc .navbar-nav > .open > a:focus, .navbar-xxc .navbar-nav > .open > a:hover { background-color: #e7e7e7; } /** *font */ @font-face { font-family: 'MiFie-Website-Font'; src: url('../font/MiFie-Website-Font.eot?7kyxez'); src: url('../font/MiFie-Website-Font.eot?7kyxez#iefix') format('embedded-opentype'), url('../font/MiFie-Website-Font.ttf?7kyxez') format('truetype'), url('../font/MiFie-Website-Font.woff?7kyxez') format('woff'), url('../font/MiFie-Website-Font.svg?7kyxez#MiFie-Website-Font') format('svg'); font-weight: normal; font-style: normal } [class^="icon-"], [class*=" icon-"] { font-family: 'MiFie-Website-Font' !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-telephone:before { content: "\e926" } .icon-service-o:before { content: "\e941" } .icon-service:before { content: "\e942" } .icon-mobile-2:before { content: "\e943" } .icon-wechat-o:before { content: "\e933" } .icon-money-bag:before { content: "\e936" } .icon-logo:before { content: "\e945" } .icon-weijinsuo:before { content: "\e946" } .icon-voice:before { content: "\e93e" } .icon-book:before { content: "\e940" } .icon-usd-barchart:before { content: "\e934" } .icon-pay-square:before { content: "\e937" } .icon-usd:before { content: "\e928" } .icon-insurance:before { content: "\e92d" } .icon-wechat:before { content: "\e932" } .icon-weibo:before { content: "\e93f" } .icon-union-pay:before { content: "\e930" } .icon-huaxing:before { content: "\e98d" } .icon-china-life:before { content: "\e92a" } .icon-reuters:before { content: "\e92e" } .icon-cfca:before { content: "\e931" } .icon-baidu:before { content: "\e92c" } .icon-cis:before { content: "\e929" } .icon-safe360:before { content: "\e92b" } .icon-icann:before { content: "\e94a" } .icon-industry:before { content: "\e94b" } .icon-360:before { content: "\e947" } .icon-inquiry:before { content: "\e94d" } .icon-netChina:before { content: "\e94c" } .icon-trusted:before { content: "\e94e" } .icon-authentication:before { content: "\e97c" } /** *header */ #header { font-size: 12px; } /*为了兼容ie67hover层级不够*/ #header .topbar { position: relative; z-index: 1001; } #header .topbar { height: 40px; line-height: 40px; border-bottom: 1px solid #c0c0c0; } #header .mobileapp, #header .wechat { position: relative; } #header .mobileapp > img, #header .wechat > img { display: none; position: absolute; top: 30px; left: 50%; margin-left: -60px; z-index: 1001; width: 120px; height: 136px; } #header .mobileapp:hover > img, #header .wechat:hover > img { display: block; } #header .icon-logo { color: #dd3137; font-size: 38px; margin-right: 8px; } #header .icon-weijinsuo { color: #424242; font-size: 24px; top: -20px; } #header .register { margin-right: 7px; } #header .account { display: inline-block; vertical-align: middle; width: 35px; height: 35px; background: url("../img/anonymous.jpg") center no-repeat; background-size: contain; margin-right: 8px; } /** *main_ad */ #main_ad .carousel-inner div.item { height: 310px; background-position: center top; background-size: auto 100%; } /** *notice */ #notice .top { height: 60px; line-height: 60px; border-bottom: 1px solid #c0c0c0; } #notice .top span:nth-of-type(1) { margin-right: 20px; } #notice .bottom { padding: 60px 0; } #notice .bottom .first, #notice .bottom .second { float: left; } #notice .bottom .unit { display: inline-block; width: 170px; } #notice .bottom .unit:last-of-type { border-right: 1px solid #EFEFEF; } #notice .bottom .unit span { display: block; font-size: 80px; color: #666; height: 80px; } #notice .bottom .unit i { position: absolute; transition: all .5s ease-out; } #notice .bottom .unit i:hover { transform: rotate(360deg); } #notice .bottom .unit h3 { font-size: 20px; color: #475b66; } #notice .bottom .first .unit p { font-size: 14px; color: #666; } #notice .bottom .second { padding-left: 60px; } #notice .bottom .second div { width: 180px; float: left; } #notice .bottom .second div.blank { height: 40px; } #notice .bottom .second p { font-size: 14px; color: #999; margin-bottom: 5px; } #notice .bottom .second h3 { font-size: 26px; color: #dd3137; margin-top: 0; margin-bottom: 0; } #notice .bottom .second .right { text-align: right; } /** *product */ #products { background: #f0f0f0; padding: 50px 0; } #products .nav-tabs { border-bottom: transparent; } #products .nav-tabs a { border: transparent; color: #555; font-size: 18px; } #products .nav-tabs .active a { border-bottom: 4px solid #e9232c; background: #f0f0f0; } #products .tab-content { padding: 20px 0; } .panel-xxc .panel-heading::before, .panel-xxc .panel-heading::after { content: ' '; width: 16px; height: 16px; border-radius: 8px; background: #f0f0f0; position: absolute; } .panel-xxc .panel-heading::before { top: -8px; left: -8px; } .panel-xxc .panel-heading::after { bottom: -8px; left: -8px; box-shadow: 0 1px 1px #ccc inset; } #products .recommend { width: 1250px; } #products .recommend > div { margin-top: 20px; } #products .recommend .dqlh { background: url("../img/short.png") repeat-y 0 10px; } #products .recommend .zqwj { background: url("../img/medium.png") repeat-y 0 10px; } #products .recommend .cqsx { background: url("../img/long.png") repeat-y 0 10px; } #products .recommend .media-left { display: inline-block; width: 160px; height: 260px; color: #fff; text-align: center; padding-top: 5px; } #products .recommend .media-left p.tag { padding: 2px 0; width: 100px; margin: 20px 30px; border-radius: 10px; background-color: #6FB2E0; } #products .recommend .media-left p.more { margin-top: 120px; } #products .recommend .media-left a { color: #fff; } #products .recommend .media-body { display: inline-block; width: 1050px; height: 260px; background-color: #E6E6E6; } #products .recommend .media-body .row > div { width: 350px; height: 245px; padding: 5px 25px; position: relative; } #products .recommend .media-body .row div:nth-of-type(2) { border-right: 1px dashed #c0c0c0; border-left: 1px dashed #c0c0c0; } #products .recommend .media-body ul { width: 300px; height: 100px; padding: 20px 0; } #products .recommend .media-body li { float: left; text-align: center; color: #999; width: 110px; vertical-align: bottom; } #products .recommend .media-body li.right { padding-top: 15px; float: right; } #products .recommend .media-body li.left strong { font-size: 36px; } #products .recommend .media-body li.left sub { font-size: 20px; } #products .recommend .media-body li.right strong { font-size: 24px; } #products .recommend .media-body li.right sub { font-size: 12px; } #products .recommend .media-body .item { border-top: 1px solid #c0c0c0; } #products .recommend .media-body .item li { width: 100px; } #products .recommend .media-body .item dd b { font-size: 21px; } #products a.tooltipa { position: absolute; top: 14px; right: 10px; border-radius: 11px; width: 22px; height: 22px; border: 1px solid #c0c0c0; text-align: center; color: #c0c0c0; } /** *news */ #news { background-color: #F0F0F0; } #news .panel-heading a { color: #dd3137; } #news .panel-body a { color: #333; font-size: 16px; } #news .container { margin-left: 30px; width: 1300px; } #news .panel-tt { width: 510px; } #news .panel-heading { height: 60px; line-height: 60px; font-size: 18px; } #news .panel-body .media-left { height: 90px; width: 130px; background: no-repeat center center; background-size: cover; } #news .panel-body .media .media-heading { font-size: 16px; } #news .panel-body .media .media-body { width: 502px; margin-left: 10px; } #news .panel-body .media .media-body p { color: #999; line-height: 23px; overflow: hidden; font-size: 14px; } #news .gg p { height: 30px; line-height: 30px; } /** *footer */ footer { background-color: #333; padding: 40px 0; color: #fff; } footer a { color: #ccc; } footer a:hover { color: #ccc; } footer .footer-wjs { color: #fff; } footer .footer-fw { color: #ccc; position: relative; } footer .footer-wjs h3 { padding: 5px 10px; border: 1px solid #fff; width: 215px; font-size: 25px; text-align: center; letter-spacing: 2px; } footer .icon-logo { font-size: 28px; margin-right: 5px; } footer .icon-weijinsuo { font-size: 17px; } footer .footer-fw .fwrx { display: block; height: 26px; line-height: 20px; } footer .icon-service { margin-right: 5px; } footer .wj { position: absolute; left: 160px; bottom: 5px; } footer .footer-about{ margin-left: -42px; margin-right: 42px; } footer .footer-about dl { float: left; width: 120px; } footer .footer-about dt { font-size: 18px; } footer .footer-about dt a { color: #fff; } footer .footer-about dd { margin: 10px 0; font-size: 14px; line-height: 28px; } footer .footer-corp h4 { margin-top: 0; } footer .footer-corp a { display: block; width: 75px; height: 75px; background-color: #ccc; border-radius: 10px; float: left; margin: 6px; text-align: center; } footer .footer-corp i { display: block; color: #585453; font-size: 58px; width: 75px; height: 75px; padding: 10px 0; } footer .footer-corp i:hover { color: #df3232; } footer .footer-bot { height: 120px; margin-top: 40px; border-top: 1px dashed #c0c0c0; padding-left: 20px; } footer .footer-bot .first ul { margin-right: 100px; } footer .footer-bot .first li { float: left; height: 60px; width: 90px; line-height: 60px; } footer .footer-bot .first span { float: left; height: 60px; line-height: 60px; margin-left: 110px; color: #c0c0c0; } footer .police { display: inline-block; width: 20px; height: 20px; background: url("../img/police.png") no-repeat; } footer .second { clear: both; } footer .second li { float: left; font-size: 34px; background: #BCBCBC; margin-right: 30px; text-align: center; } footer .second li.zx a { display: block; width: 125px; height: 50px; } footer .second li a { color: #333; } footer .second li i { display: inline-block; width: 125px; height: 50px; padding-top: 5px; } footer .second li i:hover { color: #fff; } footer .second li:nth-child(1) i:hover { background-color: #00314B; } footer .second li:nth-child(2) i:hover { background-color: #B38D39; } footer .second li:nth-child(4) i:hover { background-color: #58A433; } footer .second li:nth-child(5) i:hover { background-color: #0C6493; } footer .second li:nth-child(6) i:hover { background-color: #62B52F; } footer .second li:nth-child(7) i:hover { background-color: #D01029; } footer .second li:nth-child(8) i:hover { background-color: #E40000; }
js源码:
/** * Created by xxc on 2018/10/4. */ $(function () { function resize(){ var screenWidth = $(window).width(); var isSmallScreen = screenWidth<768; $("#main_ad > .carousel-inner > .item").each(function (i,item) { var $item = $(item);//把DOM对象进行转换 var imgSrc = $item.data(isSmallScreen?'image-xs':'image-lg'); $item.css("backgroundImage","url("+imgSrc+")"); }) } $(window).on('resize',resize).trigger('resize'); $('[data-toggle="tooltip"]').tooltip(); $(".zx a").hover(function () { $(this).css("backgroundImage","url(img/zx-hover.jpg)"); },function(){ $(this).css("backgroundImage","url(img/zx.jpg)"); }) })