产品自适应

liuqimichale
1 parent f8b82db6
Showing 3 changed files with 59 additions and 46 deletions
css/portfollo.css
portfolio.html
style.css
@@ -56,14 +56,13 @@
 }
  
 .portfolio-section-wrap{
-    height: 596px;
-    overflow: hidden;
+
 }
 .portfolio-section-wrap>li{
-    height: 596px;
+
 }
 .portfolio-section-wrap>li li{
-    height: 596px;
+
 }
 .displaynone{
     display: none;
@@ -76,52 +75,53 @@
     text-align: left;
 }
 .ortfolio-hardware-bottom-1>li:nth-of-type(1){
-    width: 460px;
+    /*width: 460px;*/
     height: 200px;
-    margin: 227px 100px 0 50px;
+    margin: 227px auto 0 ;
 }
 .ortfolio-hardware-bottom-1 li:nth-of-type(2){
     /*padding-left: 100px;*/
-    background: url("../images/produect_dev1.png") no-repeat;
-    width: 578px;
+    background: url("../images/produect_dev1.png") no-repeat center 0;
+    /*width: 578px;*/
     height: 522px;
     margin-top: 40px;
+    background-size: 100% 100%;
 }
 .ortfolio-hardware-bottom-2 li:nth-of-type(1){
     margin-top: 227px;
 }
 .ortfolio-hardware-bottom-2 li:nth-of-type(2){
-    background: url("../images/produect_dev4.png") no-repeat;
-    width: 383px;
+    background: url("../images/produect_dev4.png") no-repeat center 0;
+    /*width: 383px;*/
     height: 480px;
     margin-top: 70px;
-    margin-left: 147px;
+    /*margin-left: 147px;*/
 }
 .ortfolio-hardware-bottom-3 li:nth-of-type(1){
     margin-top: 227px;
     /*padding-left: 50px;*/
-    width: 460px;
-    margin-left: 100px;
+    /*width: 460px;*/
+    /*margin-left: 100px;*/
 }
 .ortfolio-hardware-bottom-3 li:nth-of-type(2){
-    background: url("../images/produect_dev3.png") no-repeat;
-    width: 298px;
+    background: url("../images/produect_dev3.png") no-repeat center 0;
+    /*width: 298px;*/
     height: 186px;
     margin-top: 197px;
-    margin-left: 108px;
+    /*margin-left: 108px;*/
  
 }
 .ortfolio-hardware-bottom-4 li:nth-of-type(1){
     margin-top: 185px;
-    width: 500px;
-    margin-left: 50px;
+    /*width: 500px;*/
+    /*margin-left: 50px;*/
 }
 .ortfolio-hardware-bottom-4 li:nth-of-type(2){
-    background: url("../images/produect_dev2.png") no-repeat;
-    width: 297px;
+    background: url("../images/produect_dev2.png") no-repeat center 0;
+    /*width: 297px;*/
     height: 369px;
     margin-top: 138px;
-    margin-left: 180px;
+    /*margin-left: 180px;*/
 }
 .ortfolio-hardware-bottom-title{
     font-size:30px;
@@ -147,4 +147,4 @@
     height:6px;
     background:rgba(66,160,251,1);
     border-radius:50%;
-}
 \ No newline at end of file
+}
@@ -61,7 +61,7 @@
 <div class="breadcrumb" >
     <div class="container">
         <div class="row">
-            <div class="col-md-12">
+            <div class="col-md-12 col-xs-12">
                 <div class="breadcrumb-text">
                     城市智慧停车综合解决方案领航者
                 </div>
@@ -101,14 +101,14 @@
                         <div class="ortfolio-soft-bottom-title">
                             任你停APP
                         </div>
-                        <div class="ortfolio-soft-bottom-des">车场智能推荐,一键导航随停即走
+                        <div class="ortfolio-soft-bottom-des"><span></span>车场智能推荐,一键导航随停即走
  
                         </div>
-                        <div class="ortfolio-soft-bottom-des">电子支付，简单方便，账户余额，自动代扣，快速离场
+                        <div class="ortfolio-soft-bottom-des"><span></span>电子支付，简单方便，账户余额，自动代扣，快速离场
                         </div>
-                        <div class="ortfolio-soft-bottom-des">会员卡线上办理，到期智能提醒，快捷实用
+                        <div class="ortfolio-soft-bottom-des"><span></span>会员卡线上办理，到期智能提醒，快捷实用
                         </div>
-                        <div class="ortfolio-soft-bottom-des">积分兑换，礼券不断，优惠多多</div>
+                        <div class="ortfolio-soft-bottom-des"><span></span>积分兑换，礼券不断，优惠多多</div>
                     </li>
  
                 </ul>
@@ -124,18 +124,18 @@
                     </li>
                     <li class="text-center col-md-6">
                         <div class="ortfolio-soft-bottom-title">
-                            企业云平台
+                            <span></span>企业云平台
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            车场智能推荐,一键导航随停即走
+                            <span></span>车场智能推荐,一键导航随停即走
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            电子支付，简单方便，账户余额，自动代扣，快速离场
+                            <span></span>电子支付，简单方便，账户余额，自动代扣，快速离场
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            会员卡线上办理，到期智能提醒，快捷实用。
+                            <span></span>会员卡线上办理，到期智能提醒，快捷实用。
                         </div>
-                        <div class="ortfolio-soft-bottom-des">积分兑换，礼券不断，优惠多多</div>
+                        <div class="ortfolio-soft-bottom-des"><span></span>积分兑换，礼券不断，优惠多多</div>
                     </li>
  
                 </ul>
@@ -151,16 +151,16 @@
                     </li>
                     <li class="text-center col-md-6">
                         <div class="ortfolio-soft-bottom-title">
-                            数据分析平台
+                            <span></span>数据分析平台
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            停车数据综合监测，停车热点、供需分析、区域治理
+                            <span></span>停车数据综合监测，停车热点、供需分析、区域治理
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            动态交通组织优化,城市早晚高峰、大型交通枢纽
+                            <span></span>动态交通组织优化,城市早晚高峰、大型交通枢纽
                         </div>
                         <div class="ortfolio-soft-bottom-des">
-                            停车视频联网监控，视频监控资源分布查看、违停抓拍、车辆剐蹭责任追查
+                            <span></span> 停车视频联网监控，视频监控资源分布查看、违停抓拍、车辆剐蹭责任追查
                         </div>
                     </li>
  
@@ -115,8 +115,7 @@ a:hover{
 }
 .breadcrumb-text{
 	text-align: center;
-	height: 682px;
-	line-height: 682px;
+	padding-top: 300px;
 	color: #fff;
 	font-size: 71px;
 }
@@ -174,11 +173,9 @@ a:hover{
 }
  
 .portfolio-section-wrap{
-	height: 596px;
-	overflow: hidden;
+	min-height: 596px;
 }
 .portfolio-section-wrap>li{
-	height: 596px;
 }
 .portfolio-section-wrap>li li{
 	height: 596px;
@@ -196,13 +193,13 @@ a:hover{
 	background: #f00;
 }
 .ortfolio-soft-bottom-2 li:nth-of-type(2){
-	padding-left:50px;
+	padding-left:100px;
 }
 .ortfolio-soft-bottom-3 li:nth-of-type(1){
 	background: #f0f;
 }
 .ortfolio-soft-bottom-3 li:nth-of-type(2){
-	padding-left:20px;
+	padding-left:100px;
 }
 .ortfolio-soft-bottom-title{
 	font-size:30px;
@@ -218,12 +215,18 @@ a:hover{
 	padding-left: 20px;
 	position: relative;
 }
-.ortfolio-soft-bottom-des:before{
+.ortfolio-soft-bottom-des span{
+	width:6px;
+	height:6px;
+	display: inline-block;
+	position: relative;
+}
+.ortfolio-soft-bottom-des span:before{
 	position: absolute;
 	content: '';
-	left: 0;
+	left: -10px;
 	top:50%;
-	margin-top: -3px;
+	margin-top: -6px;
 	width:6px;
 	height:6px;
 	background:rgba(66,160,251,1);
@@ -2583,5 +2586,15 @@ a:hover{
 		width: 100%;
 		padding: 0 20px;
 	}
+	.breadcrumb-text{
+		font-size: 30px;
+		padding-top: 300px;
+	}
+	.ortfolio-soft-bottom-title,.ortfolio-soft-bottom-des{
+		text-align: center;
+	}
+	.ortfolio-soft-bottom-1 li:nth-of-type(2),.ortfolio-soft-bottom-2 li:nth-of-type(2),.ortfolio-soft-bottom-3 li:nth-of-type(2){
+		padding-left: 0;
+	}
 }