.gongsijies{width:320px; height: auto;} @media (max-width: 640px){ .gongsijies{width:97%; height: auto; overflow: hidden;} } /* 本例子css */ .gongsijies .slideBox{ width:100%; height:100%; overflow:hidden; position:relative; border:1px solid #ddd; } .gongsijies .slideBox .hd{ display: none;height:15px; overflow:hidden; position:absolute; right:40%; bottom:5px; z-index:1; } .gongsijies .slideBox .hd ul{ overflow:hidden; zoom:1;} .gongsijies .slideBox .hd ul li{ float:left; margin-right:5px; width:10px; height:10px; border-radius: 10px; text-align:center; background:#fff; cursor:pointer; } .gongsijies .slideBox .hd ul li.on{ background:#f00; color:#fff; } .gongsijies .slideBox .bd{ position:relative; height:100%; z-index:0; } .gongsijies .slideBox .bd li{ zoom:1; vertical-align:middle; } .gongsijies .slideBox .bd img{ width:100%; height:100%; display:block; } /* 下面是前/后按钮代码,如果不需要删除即可 */ .gongsijies .slideBox .prev, .gongsijies .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5; } .gongsijies .slideBox .next{ left:auto; right:3%; background-position:8px 5px; } .gongsijies .slideBox .prev:hover, .gongsijies .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; } .gongsijies .slideBox .prevStop{ display:none; } .gongsijies .slideBox .nextStop{ display:none; } /* 本例子css */ .gongsijies .slideBox1{ width:100%; height:100%; overflow:hidden; position:relative; border:1px solid #ddd; } .gongsijies .slideBox1 .hd{ display: none;height:15px; overflow:hidden; position:absolute; right:40%; bottom:5px; z-index:1; } .gongsijies .slideBox1 .hd ul{ overflow:hidden; zoom:1;} .gongsijies .slideBox1 .hd ul li{ float:left; margin-right:5px; width:10px; height:10px; border-radius: 10px; text-align:center; background:#fff; cursor:pointer; } .gongsijies .slideBox1 .hd ul li.on{ background:#f00; color:#fff; } .gongsijies .slideBox1 .bd{ position:relative; height:100%; z-index:0; } .gongsijies .slideBox1 .bd li{ zoom:1; vertical-align:middle; } .gongsijies .slideBox1 .bd img{ width:100%; height:100%; display:block; } /* 下面是前/后按钮代码,如果不需要删除即可 */ .gongsijies .slideBox1 .prev, .gongsijies .slideBox1 .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5; } .gongsijies .slideBox1 .next{ left:auto; right:3%; background-position:8px 5px; } .gongsijies .slideBox1 .prev:hover, .gongsijies .slideBox1 .next:hover{ filter:alpha(opacity=100);opacity:1; } .gongsijies .slideBox1 .prevStop{ display:none; } .gongsijies .slideBox1 .nextStop{ display:none; } /* GLOBAL */ * { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size:12px; font-family: "微软雅黑"; color: #333; } ul , li { list-style: none; } h2,h3,h4 { font-weight:normal; } a { color: #333; text-decoration: none; } a:hover { color:#e00012; } .clear { clear: both; } .relative { position: relative; } .absolute { position: absolute; } .justify { text-align: justify; } .textleft { text-align: left; } .textcenter { text-align: center; } .f14 { font-size:14px; } .lineheight2 { line-height: 2; } .wrapper { min-width: 1000px; width: 1000px; margin: 0 auto; } /* Header */ .wrapper-header { height: 80px; position: relative; } .wrapper-header .logo { position:absolute; height:50px; top:16px; } .wrapper-header .logo img { height:50px; } .mobile-nav-icon { display:none; position:absolute; width: 48px; height: 40px; background: url(../cssimg/menu.png) scroll no-repeat center center; right: 0px; top: 7px; z-index:99; } .wrapper-header .menu { height:32px; /*width: 452px;*/ width: 542px; position:absolute; top:32px; right: 123px; } .wrapper-header .menu li { width: 90px; position:relative; float:left; line-height:32px; letter-spacing:1px; text-align:center; border-left:1px solid #ddd; font-size:14px; } .wrapper-header .menu li:first-child { border-left:0px solid #ddd; } .wrapper-header .menu li:first-child ul { height:0; padding:0; margin:0; } .wrapper-header .menu li a { color:#222; } .wrapper-header .menu ul { position:absolute; z-index:999; left:-1px; display:none; background-color:rgba(255,255,255,0.85); padding-bottom:6px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; } .wrapper-header .menu ul:before { display:block; width:64px; height:1px; background:#e00012; position:absolute; top:0; left:12px; content: ""; } .wrapper-header .menu ul li { height:30px; text-align:center; border:0px solid transparent; font-size:12px; } .wrapper-header .menu ul li a { width:100%; height:30px; line-height:30px; font-weight:normal; text-decoration: none; display:block; color:#444; } .wrapper-header .menu ul li a:hover { color:#e00012; } .wrapper-header .submenu { height:32px; width: 124px; position:absolute; top:34px; right: 0; } .wrapper-header .submenu li { float:left; height:32px; width:40px; position:relative; border-right:1px solid #eee; text-align:center; line-height:32px; } .wrapper-header .submenu li:first-child { border-left:1px solid #eee; line-height:28px; } .wrapper-header .submenu li a { color:#999; font-size:11px; } /* Banner */ .wrapper-banner { height:320px; position:relative; text-align: center; overflow: hidden; background: url(../cssimg/banner.jpg) scroll no-repeat center center; position: relative; } /* homepage-content */ .homepage-content { height: 400px; margin:20px auto; letter-spacing:0.6px; } .homepage-content .left { width:300px; height: 400px; float:left; position:relative; } .homepage-content .middle { width:400px; height: 400px; float:left; position:relative; } .homepage-content .right { width:300px; height: 400px; float:right; position:relative; } .homepage-content .border { width:298px; border:1px solid #ddd; height: 398px; } .homepage-content .middle .border { width:92%; border:1px solid #ddd; height: 398px; margin:0 auto; } .homepage-content .down { width:100%; height: 198px; left:0; bottom:0; } .homepage-content .down img { width:100%; height: 100%; } .homepage-content .title { width:100%; height: 50px; line-height:60px; margin-left:24px; color:#222; background:url(../cssimg/title_bg.png) scroll no-repeat -28px 5px; font-weight:bold; font-size:14px; } .homepage-content .title2 { background:url(../cssimg/title-bg2.png) scroll no-repeat -20px center; } .homepage-content .nobg { background:none; color:#333; text-indent:0; } .homepage-content .title:after { display:block; width:30px; height:2px; background:#e00012; position:absolute; top:58px; content: ""; } .homepage-content .txt { margin-top:10px; height: 140px; padding: 15px 24px; line-height:1.8; } .homepage-content .right ul li { height:20px; margin-bottom:4px; background:url(../cssimg/icon-news.png) scroll no-repeat left 7px; text-indent: 10px; overflow:hidden; } .homepage-content .middle ul { margin-top:10px; padding: 15px 24px; line-height:1.8; } .homepage-content .middle ul li { height:52px; background:url(../cssimg/icon-news.png) scroll no-repeat left 7px; text-indent: 10px; border-bottom:1px dashed #ddd; margin-bottom:15px; } .homepage-content .middle ul li:last-child { border-bottom:0 dashed #ddd; } .homepage-content .middle ul li h3{ font-weight:normal; font-size:12px; height:20px; overflow:hidden; } .homepage-content .middle ul li a{ height:22px; display:block; overflow:hidden; } .homepage-content .middle ul li i{ display:block; height:14px; width:100%; color:#999; font-size:12px; font-style:normal; } /** footer **/ .wrapper-footer { position:relative; background-color:#f6f6f6; color:#fff; text-align:center; height:200px; } .wrapper-footer .block { position:relative; } .wrapper-footer .block p { color:#888; text-align:left; text-indent:0; margin-left:30px; line-height:1.56; } .wrapper-footer .lh2 p { line-height:2; text-indent:16px; background:url(../cssimg/location.png) scroll no-repeat left center; } .wrapper-footer .block a { color:#777; } .wrapper-footer .block a:hover { color:#e00000; } .wrapper-footer h1 { height: 28px; color:#666; font-size:16px; margin-right:30px; font-weight:normal; } .wrapper-footer h3 { height: 36px; line-height:36px; color:#666; font-size:12px; margin-right:30px; margin-top:15px; margin-bottom:2px; } .wrapper-footer .title { height: 36px; line-height:36px; color:#666; font-weight:bold; font-size:14px; text-align: left; margin-left:30px; margin-top:15px; margin-bottom:16px; } .wrapper-footer .title:after { display:block; width:30px; height:2px; background:#666; position:absolute; top:54px; content: ""; } .wrapper-footer .block1 { float:left;width:300px; } .wrapper-footer .block2 { float:left;width:240px; } .wrapper-footer .block3 { float:left;width:136px; } .wrapper-footer .block3 img { width:88px; height:88px; } .wrapper-footer .block4 { float:right;width:300px;text-align:right; } /** Banner Switch **/ .wrapper-banner .switch { position: absolute; width: 300px; left: 50%; margin-left: -150px; bottom: 10px; } .wrapper-banner .img { width: 500%; } .wrapper-banner .banner-item { float: left; width: 20%; } .wrapper-banner .banner-item img { width: 1000px; height:320px; } .wrapper-banner i { border: 1px solid #fff; border-radius: 50%; box-shadow: 1px 1px 2px 1px rgba(0,0,0,.3); width: 10px; height: 10px; margin: 0 5px; display: inline-block; cursor: pointer; opacity: .6; } .wrapper-banner i.active,.banner i:hover{ background: #e00012; opacity: 1; } .banner-1{ background: url(../cssimg/banner1.jpg) no-repeat center center; display: block; height: 320px; } .banner-2{ background: url(../cssimg/banner2.jpg) no-repeat center center; display: block; height: 320px; } .banner-3{ background: url(../cssimg/banner3.jpg) no-repeat center center; display: block; height: 320px; } .banner-4{ background: url(../cssimg/banner4.jpg) no-repeat center center; display: block; height: 320px; } .secondmenu { height: 44px; background:#fff; border-bottom:1px solid #eee; text-align:center; font-size:14px; color:#888; margin:0; } .secondmenu li { line-height:40px; display:inline-block; margin:0 20px; padding:0 10px; } .secondmenu li a { color:#888; transition: all 0.2s ease-out 0.1s; } .secondmenu li a:hover { color:#e00012; border-bottom: 1px solid red; display: block; text-decoration: none; } .secondmenu li .selected { color:#e00012; border-bottom: 2px solid red; display: block; text-decoration: none; } .banner-inner { position:relative; height:200px; background-size:100% 100%; font-size:20px; text-align:left; color:#fff; font-style: italic; font-weight:bold; text-shadow: 0 2px 4px #336; } .banner-inner span { position:absolute; top:140px; left:30px; } .banner-inner .kh { text-align: center; } .content-wrapper { margin-bottom: 20px; } .category-title { text-align:center; font-size: 14px; font-weight:normal; padding-bottom:16px; color:#666; } .category-title:before { width: 30px; height: 1px; content: ""; background: #666; display: inline-block; margin: 0px 14px 0px 0px; top: -5px; position: relative; } .category-title:after { width: 30px; height: 1px; content: ""; background: #666; display: inline-block; margin: 0px 0px 0px 14px; top: -5px; position: relative; } .categroy-content { margin:-3px 0 0 0; padding:0; min-height:280px; line-height:2; border:1px solid #eee; background:#fefefe; } .categroy-content-bordered { background:#fff; border:1px solid #eee; } .categroy-content .content { width:90%; margin:0 auto; padding:20px; } .categroy-content .content-tiny { width:70%; margin:0 auto; padding:10px 0; padding:20px; } .categroy-content .inherit { margin:0 auto; text-align:center; padding:20px; } .categroy-content .content p { } .categroy-content .content .f14 { font-size:14px; } .content-about .leftimg img { width:320px; height:240px; } .content-about .col-sm-2 img, .content-about .chanquan img { width:142px; float:left; } .content-product #fangan h3 img { width:800px; } .content-product #chanpin .col-sm-3 { width:270px; } .content-product #chanpin .col-sm-9 { width:720px; } .content-product #chanpin .ptimg img { max-width:250px; } .content-wrapper .col-sm-1 { float: left; width:8.333333%; } .content-wrapper .col-sm-2 { float: left; width:16.666666%; } .content-wrapper .col-sm-3 { float: left; width:25%; } .content-wrapper .col-sm-4 { float: left; width:33.333333%; } .content-wrapper .col-sm-5 { float: left; width:41.666666%; } .content-wrapper .col-sm-6 { float: left; width:50%; } .content-wrapper .col-sm-7 { float: left; width:58.333333%; } .content-wrapper .col-sm-8 { float: left; width:66.666666%; } .content-wrapper .col-sm-9 { float: left; width:75%; } .content-wrapper .col-sm-10 { float: left; width:83.333333%; } .table { width: 100%; max-width: 100%; margin: 20px auto; border-spacing: 0; border-collapse: collapse; color:#555; } .table th, .table td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; text-align:left; } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #fafafa; } .table-striped tr:hover { background-color: #eee; } .news2 { margin-top:15px; padding-right:16px; } .news2 li { height: 40px; line-height:40px; border-top:1px dashed #ddd; /*background:url(../images/icon-news.png) scroll no-repeat left center;*/ text-indent: 10px; position:relative; } .news2 li i { font-style:normal; color:#666; position:absolute; line-height:38px; right:0; top:1px; } .news2 .selected { color:#e00001; background:url(../cssimg/productlibg.png) scroll no-repeat left center; border-left:3px solid #e00000; } .news2 li a { display:block; height:39px; width:298px; overflow:hidden; background:url(../cssimg/icon-news.png) scroll no-repeat left center; } .news1 { padding-top:12px; margin-bottom:20px; } .news1 li { height:65px; text-indent: 20px; border-bottom:1px dashed #ddd; margin-top:15px; padding-bottom:15px; float:left; width:45%; margin-left:40px; } .news1 li img { float:left; width:80px; height:50px; } .news1 li h3{ font-weight:normal; font-size:12px; height:24px; overflow:hidden; } .news1 li i { display:block; height:14px; width:100%; color:#999; font-size:12px; font-style:normal; margin-top: 2px; } .item-chanpin { margin: 20px 0 10px 0; } .item-chanpin img { width:90%; } .category-product { padding:2px 0 0 1px; background:#fafafa; border-left: 1px solid #eee; } .category-product li { line-height: 48px; text-indent: 10px; } .category-product li ul { display: none; } .category-product li ul li a { text-indent:2em; } .category-product li a { display: block; height: 50px; line-height: 48px; font-size: 12px; color: #555; border-bottom: 1px solid #eee; padding-right:24px; text-align:left; } .category-product li .selected { background:#fff url(../cssimg/productlibg.png) scroll no-repeat left center; color: #e00012; border-left:2px solid #e00001; } .category-product li .selected2 { background:url(../cssimg/icon-news.png) scroll no-repeat 14px center; color: #ee2222; border-left:0; } .category-product li:hover { background:#fff; } .category-product li a:hover { color: #e00012; } .product-table { border: 1px solid #47668e; border-spacing: 0; background: #eee; border-collapse: collapse; width: 100%; margin-bottom: 20px; color:#555; } .product-table tr { min-height: 28px; } .product-table th { background: #628fc6 url(../cssimg/tablebg.png); color: #eee; border-left: 1px solid #8aafe3; border-top: 1px solid #8aafe3; border-right: 1px solid #47668e; border-bottom: 1px solid #47668e; padding: 6px 0px; font-weight: normal; text-align: center; padding: 8px; line-height: 1.42857143; vertical-align: top; font-weight:bold; } .product-table td { text-indent: 5px; color: #222; border-left: 1px solid #eee; border-right: 1px solid #bbe; border-bottom: 1px solid #bbe; padding: 6px; line-height: 1.42857143; vertical-align: middle; border-top: 1px solid #ddd; } .product-table tr:nth-child(2n+1) { background-color: #b4c7f3; background:-webkit-gradient(linear, 0 0, 0 100%, from(#b4c7f3), to(#cdd8f4)); background:-moz-linear-gradient(top, #b4c7f3, #cdd8f4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b4c7f3,endColorstr=#cdd8f4,grandientType=0); } .product-table .odd { background-color: #dde; background:-webkit-gradient(linear, 0 0, 0 100%, from(#dde), to(#eef)); background:-moz-linear-gradient(top, #dde, #eef); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dde,endColorstr=#eef,grandientType=0); } .product-table tr:nth-child(2n) { background: #f3f7fb; } hr { border:none; background:#ddd; height:1px; font-size:1px; width:94%; margin:20px auto; } .feedback { width:90%; padding: 20px 30px; padding-bottom: 20px; background-color: #f8f8f8; } .feedback .form-group { margin-top: 15px; } .feedback .form-control { display: block; width: 98%; height: 40px; padding: 4px 10px; font-size: 12px; line-height: 1.5; color: #666; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .feedback .textarea { height:290px; } .feedback .email { float: left; margin-top:22px; height: 30px; line-height: 30px; display: block; color: #444; font-size:14px; } .feedback .send { float: right; margin-right: 10px; margin-top:20px; height: 36px; line-height: 32px; padding:0 16px; color: #666 !important; border: 1px solid #bbbbbb; text-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff inset, 0 1px 0 rgba(0, 0, 0, 0.1); background: -moz-linear-gradient(center top , #f8f8f9, #e6e6e8) repeat-x scroll 0 0 #e6e6e8; background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f9), to(#e6e6e8)) repeat-x scroll 0 0 #e6e6e8; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f9,endColorstr=#e6e6e8,grandientType=0); } .contact { padding: 20px 0; } .contact li { height: 116px; border-top:1px solid #eee; margin-top:15px; } .contact li img { float:left; width:80px; height:50px; margin-top: 10px; } .contact li h2 { margin-top:15px; font-size: 14px; height:30px; line-height:30px; } .contact li h3 { font-size: 12px; /*text-indent: 20px;*/ line-height:1; margin-top:8px; color:#555; } .categroy-content .content .jishufuwu { position:relative; height:190px; background:url(../cssimg/fuwubg.jpg) scroll no-repeat left center; } .categroy-content .content .jishufuwu p { text-align:left; text-indent:0; color:#777; font-size:12px; width:154px; float:left; margin-right:25px; display:block; height:60px; margin-top:100px; line-height:1.7; } .categroy-content .content .jishufuwu p:last-child { margin-right:0; }