BJ_web_developers / webportal

Commit f5bd1ba0bb9574c17905ae4fc45e5a0259264299

Authored by Andy
1 parent 9725505e

add service swiper效果

Inline Side-by-side
Showing 1 changed file with 22 additions and 10 deletions
css/services.css
  View file @f5bd1ba
@@ -80,9 +80,9 @@ @@ -80,9 +80,9 @@
80 .part .bd .img img { 80 .part .bd .img img {
81 /*border: solid 1px #b8b8b8;*/ 81 /*border: solid 1px #b8b8b8;*/
82 display: block; 82 display: block;
83 - /*margin: 50px auto;*/  
84 - width: 100%;  
85 - height: 100%; 83 + margin: 0px auto;
  84 + width: 80%;
  85 + height: 80%;
86 } 86 }
87 .part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;} 87 .part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
88 .part4 .bd .txt {float: left; width: 500px; margin-left: 0px;} 88 .part4 .bd .txt {float: left; width: 500px; margin-left: 0px;}
@@ -94,8 +94,8 @@ @@ -94,8 +94,8 @@
94 .part3 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; } 94 .part3 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
95 .part3 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;} 95 .part3 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
96 .part3 .bd .img { 96 .part3 .bd .img {
97 - width: 433.6px;  
98 - height: 395.2px; 97 + /*width: 433.6px;*/
  98 + /*height: 395.2px;*/
99 z-index: 1000; 99 z-index: 1000;
100 margin: -50px 0 0 0%; 100 margin: -50px 0 0 0%;
101 float: left; 101 float: left;
@@ -121,8 +121,8 @@ @@ -121,8 +121,8 @@
121 .part4 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -305px 0 no-repeat; } 121 .part4 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -305px 0 no-repeat; }
122 .part4 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -845px 0 no-repeat;} 122 .part4 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -845px 0 no-repeat;}
123 .part4 .bd .img { 123 .part4 .bd .img {
124 - width: 433.6px;  
125 - height: 395.2px; 124 + /*width: 433.6px;*/
  125 + /*height: 395.2px;*/
126 z-index: 1000; 126 z-index: 1000;
127 margin: -50px 0 0 30px; 127 margin: -50px 0 0 30px;
128 float: left; 128 float: left;
@@ -141,17 +141,25 @@ @@ -141,17 +141,25 @@
141 .part5 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -485px 0 no-repeat; } 141 .part5 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -485px 0 no-repeat; }
142 .part5 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -1025px 0 no-repeat;} 142 .part5 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -1025px 0 no-repeat;}
143 .part5 .bd .img { 143 .part5 .bd .img {
144 - width: 433.6px;  
145 - height: 395.2px; 144 + /*width: 433.6px;*/
  145 + /*height: 395.2px;*/
146 z-index: 1000; 146 z-index: 1000;
147 margin: -50px 0 0 0%; 147 margin: -50px 0 0 0%;
148 float: left; 148 float: left;
149 /*overflow: hidden;*/ 149 /*overflow: hidden;*/
150 } 150 }
151 @media screen and (min-width: 1000px) and (max-width: 2500px){ 151 @media screen and (min-width: 1000px) and (max-width: 2500px){
  152 + .part .bd .img {
  153 + width: 433.6px;
  154 + height: 395.2px;
  155 + }
152 } 156 }
153 157
154 @media screen and (min-width: 980px) and (max-width: 1000px){ 158 @media screen and (min-width: 980px) and (max-width: 1000px){
  159 + .part .bd .img {
  160 + width: 433.6px;
  161 + height: 395.2px;
  162 + }
155 .part3 .bd .txt, .part5 .bd .txt { 163 .part3 .bd .txt, .part5 .bd .txt {
156 margin-right: 0px; 164 margin-right: 0px;
157 } 165 }
@@ -160,6 +168,10 @@ @@ -160,6 +168,10 @@
160 168
161 @media screen and (min-width: 767px) and (max-width: 980px){ 169 @media screen and (min-width: 767px) and (max-width: 980px){
162 .container{width: 100% !important} 170 .container{width: 100% !important}
  171 + .part .bd .img {
  172 + width: 80%;
  173 + height: 80%;
  174 + }
163 .part{height: auto} 175 .part{height: auto}
164 .part .con { 176 .part .con {
165 width: 100%; 177 width: 100%;
@@ -254,7 +266,7 @@ @@ -254,7 +266,7 @@
254 266
255 267
256 .part3 , .part4, .part5 { 268 .part3 , .part4, .part5 {
257 - height: 750px; 269 + height: 550px;
258 width: 100%; 270 width: 100%;
259 } 271 }
260 .part .hd { 272 .part .hd {