From 9725505e6cb2953aa0f5b6f38f3786f3979f22f0 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Thu, 11 Oct 2018 14:16:03 +0800 Subject: [PATCH] add service swiper效果 --- css/services.css | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 129 insertions(+), 2 deletions(-) diff --git a/css/services.css b/css/services.css index 2ccbb0a..2ed0c8c 100644 --- a/css/services.css +++ b/css/services.css @@ -56,11 +56,11 @@ float: left; } .part3 .hd,.part5 .hd{width: 500px!important; margin-top: 50px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;} -.part .hd h2{width: 110px !important; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;} +.part .hd h2{width: 110px; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;} .part .hd h2.active-nav{ border-bottom: solid 3px #3F9FFE;color:#3F9FFE; } .part .bd{width: 100%;float: left;} .part .line { - width: 90%; + width: 100%; /* margin: 0 auto; */ height: 1px; background: #818181; @@ -148,6 +148,133 @@ float: left; /*overflow: hidden;*/ } +@media screen and (min-width: 1000px) and (max-width: 2500px){ +} + +@media screen and (min-width: 980px) and (max-width: 1000px){ + .part3 .bd .txt, .part5 .bd .txt { + margin-right: 0px; + } + +} + +@media screen and (min-width: 767px) and (max-width: 980px){ + .container{width: 100% !important} + .part{height: auto} + .part .con { + width: 100%; + margin-left: 0px; + margin-bottom: 50px; + } + .part .hd { + width:100%; + margin:20px auto 0; + text-align: center; + overflow: hidden; + } + .part .bd .p1 { + font-size:2.5rem; text-align: center; + + } + .part .bd .p2 { + font-size: 2.1rem; display: none + + } + .part .line{width: 100%;} + .part .hd h2 { + width: 80px; + float: none; display: inline-block; margin-left: -4px; + } + .part .bd .img { + font-size: 34px; + margin: 0 auto; float: none; + position: static; + + } + + + .part3 , .part4, .part5 { + height: 750px; + + } + .part .hd { + width: 100%; + margin: 30px auto 0; + + } + .part3 .bd .txt, .part5 .bd .txt { + float: none; + width: 100%; + margin:0 auto; + } + + .part4 .bd .txt { + float: none; + width: 100%; + margin-left: 0; + } + +} + +@media screen and (min-width: 320px) and (max-width: 767px){ + .container{ + width: 100% + } + .part{height: auto; width: 100%;} + .part .con { + width: 100%; + margin-left: 0px; + margin-bottom: 50px; + } + .part .hd { + width:100%; + margin:20px auto 0; + text-align: center; + overflow: hidden; + } + .part .bd .p1 { + font-size:2.5rem; text-align: center; + + } + .part .bd .p2 { + font-size: 2.1rem; display: none + + } + .part .line{width: 100%;} + .part .hd h2 { + width: 72px; + float: none; display: inline-block; margin-left: -4px; + } + .part .bd .img { + font-size: 34px; + margin: 0 auto; float: none; + position: static; + + } + + + .part3 , .part4, .part5 { + height: 750px; + width: 100%; + } + .part .hd { + width: 90% !important; + margin: 30px auto 0; + + } + .part3 .bd .txt, .part5 .bd .txt { + float: none; + width: 100%; + margin:0 auto; + } + + .part4 .bd .txt { + float: none; + width: 100%; + margin-left: 0; + } +} + /*footer sta*/ .services-foottit{ -- libgit2 0.21.4