基础版提交

css/styles.css

@@ -0,0 +1,572 @@
+@charset "utf-8";
+body{
+	padding: 0;
+  margin: 0;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 12px;
+  font-family:"微软雅黑","Tahoma";
+  vertical-align: baseline;
+  text-align:justify;
+  word-wrap:break-word;
+  text-justify:inter-ideograph;
+  color: #000000cc;
+}
+.navBody{
+  background: rgba(33, 33, 41, 1);
+  height: 36px;
+  color: #fff;
+}
+.globalNav a{
+  float:left;
+  height:36px;
+  line-height:36px;
+  padding:0 10px;
+  color:#eee;
+  position: relative;
+  cursor: pointer
+}
+.globalNav a:hover{
+  background:#666E70;
+  color:#fff
+}
+.globalNav a.now{
+  background:#008FFF;
+  color:#fff;
+  font-weight:600
+}
+.globalNav .zhzd{
+  float:left;
+  height:36px;
+  position: relative;
+  z-index:999
+}
+.globalNav .zhzd a b{
+  border-color: #FFDDC9 transparent transparent;
+  border-right: 3px dashed transparent;
+  border-style: solid dashed dashed;
+  border-width: 3px 3px 0;
+  display: inline-block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  width: 0;
+  position: relative;
+  top:-1px;
+  left:4px
+}
+.globalNav .zhzd .zhzdMenu{
+  position: absolute;
+  left:0;
+  top:29px;
+  background:#fff;
+  border:1px solid #ccc;
+  border-top:none;
+  box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+  display:none
+}
+.globalNav .zhzd .zhzdMenu a{
+  width:100%;
+  padding:0;
+  text-align:center;
+  color:#3366cc
+}
+.globalNav .zhzd .zhzdMenu a:hover{
+  background:#f2f2f2
+}
+.globalNav .zhzd a.now{
+  background:#fff;
+  border:1px solid #ccc;
+  border-bottom:none;
+  border-top:none;
+  color:#3366cc;
+  z-index:10
+}
+.width1200{
+  width: 1200px;
+  margin: 0 auto;
+}
+.logoCon{
+	width: 100%;
+	height: 60px;
+	background: #fff;
+	box-shadow: 0px -1px #0000001a inset;
+}
+.logo,.buttonCon{
+	height: 60px;
+	display:table;
+	text-align:center;
+}
+.logoText{
+	padding-left: 10px;
+	font-weight: 500;
+	font-size: 24px;
+}
+.table-cell{
+	display: table-cell;
+	vertical-align: middle;
+}
+.btnText{
+	padding-right: 10px;
+	font-size: 16px;
+	font-weight: 500;
+}
+.banner{
+	background: #F5F7FD;
+	height: 800px;
+}
+.slogan{
+	height: 320px;
+	text-align: center;
+	background: #00000099 url(img/image_banner_02.png) no-repeat;
+	color: #fff;
+}
+.sloganSmall{
+	padding-top: 100px;
+	font-size: 18px;
+	color: #ffffffcc;
+}
+.sloganBig{
+	padding-top: 30px;
+	font-size: 48px;
+}
+.sloganBig .blueBg{
+	background: #2f54eb;
+	border-radius: 8px;
+	margin: 0 8px;
+	padding: 3px 12px;
+}
+.videoListCon{
+	padding: 120px 0;
+	background: #f5f7fd;
+}
+.videoLeft{
+	width: 843px;
+	height: 474px;
+	background: #000 url(img/image_video_cover_07.png) no-repeat;
+}
+.videoRight{
+	width: 357px;
+	height: 474px;
+}
+.videoRight ul{
+	height: 474px;
+	overflow-y: auto;
+}
+.videoRight ul li{
+	width: 280px;
+	list-style-type: none;
+	padding: 0;
+	margin: 0 0 20px 0;
+}
+.videoList img{
+	width: 130px;
+	height: 72px;
+}
+.videoList .videoImg{
+}
+.videoList .videoTitle{
+	font-size: 14px;
+	font-weight: 500px;
+	line-height: 20px;
+}
+.videoList .textRrey{
+	color: #00000099;
+}
+.productCon{
+	margin: 120px 0 0 0;
+}
+.bigtTitle h4{
+	font-size: 48px;
+	font-weight: 500;
+}
+.bigtTitle span{
+	font-size: 18px;
+}
+.productList{
+	padding: 48px 48px 0 48px;
+}
+.productLine{
+	/*border-left: 2px solid rgba(0, 0, 0, 0.1);*/
+}
+.product{
+	position: relative;	
+}
+.productOne,.productTwo{
+	height: 730px;
+	border-left: 2px solid rgba(0, 0, 0, 0.1);
+}
+.productThree{
+	height: 700px;
+}
+.productIco{
+	position: absolute;
+	top: -5px;
+	left: -24px;
+	width: 48px;
+	height: 48px;
+}
+.productOneIco{
+	background: url(img/css_sprites.png) no-repeat -113px -1068px;
+}
+.productTwoIco{
+	background: url(img/css_sprites.png) no-repeat -160px -1068px;
+}
+.productThreeIco{
+	background: url(img/css_sprites.png) no-repeat 0px -1148px;
+}
+.prodectLeftTitle{
+	margin: 0 0 0 35px;
+}
+.prodectLeftTitle h3{
+	font-size: 36px;
+	line-height: 48px;
+}
+.prodectLeftTitle .productText{
+	font-size: 18px;
+	line-height: 35px;
+}
+.productImg{
+	width: 224px;
+	height: 224px;
+}
+.show{
+  transform: translateY(0px) !important;
+  opacity:1 !important;
+}
+.hiddenTranX1{
+	opacity:0;
+  transition: all 0.8s ease-in 0s;
+  transform: translateX(-200px);
+}
+.hiddenTranX2{
+	opacity:0;
+  transition: all 0.8s ease-in 0s;
+  transform: translateX(200px);
+}
+.hiddenTranY1{
+	opacity:0;
+  transition: all 0.8s ease-in 0s;
+  transform: translateY(-200px);
+}
+.hiddenTranY2{
+	opacity:0;
+  transition: all 0.8s ease-in 0s;
+  transform: translateX(200px);
+}
+.productOneImg{
+	background: url(img/css_sprites.png) no-repeat 0 0;
+  transition-delay: 0.2s;
+}
+.productTwoImg{
+	background: url(img/css_sprites.png) no-repeat 0 -224px;
+	transition-delay: 0.2s;
+}
+.productThreeImg{
+	background: url(img/css_sprites.png) no-repeat 0 -448px;
+	transition-delay: 0.2s;
+}
+.productRImg{
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.productOneRImg{
+	width: 843px;
+	height: 600px;
+	background: url(img/image_cpgn_0103_bg.png) no-repeat;
+  transition-delay: 0.2s;
+}
+.productTwoRImg1{
+	width: 790px;
+	height: 560px;
+	background: url(img/image_cpgn_02_01.png) no-repeat;
+	box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);
+	transition-delay: 0.2s;
+}
+.productTwoRImg2{
+	top: 64px;
+	left: 95px;
+	width: 695px;
+	height: 496px;
+	background: url(img/image_cpgn_02_02.png) no-repeat;
+	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
+	transition-delay: 0.4s;
+}
+.productTwoRImg3{
+	top: 180px;
+	left: 190px;
+	width: 600px;
+	height: 380px;
+	background: url(img/image_cpgn_02_03.png) no-repeat;
+	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
+	transition-delay: 0.6s;
+	/*box-shadow: 0px 13.3px 53.3px rgba(0, 0, 0, 0.24);*/
+}
+.productThreeRImg1{
+	width: 843px;
+	height: 600px;
+	background: url(img/image_cpgn_0103_bg.png) no-repeat;
+	transition-delay: 0.2s;
+}
+.productThreeRImg2{
+	top: 107px;
+	left: 171px;
+	width: 502px;
+	height: 386px;
+	background: url(img/iamge_cpgn_03.png) no-repeat;
+	box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
+	transition-delay: 0.4s;
+}
+.productOneR1{
+  transition-delay: 0.4s;
+}
+.productOneR2{
+  transition-delay: 0.6s;
+}
+.productOneR3{
+  transition-delay: 0.8s;
+}
+.productOneR4{
+  transition-delay:1s;
+}
+.productOneR5{
+  transition-delay: 1.2s;
+}
+.productOneR6{
+  transition-delay: 1.4s;
+}
+.productRT{
+	position: absolute;
+	top: 120px;
+	left: 180px;
+	width: 480px;
+	height: 360px;
+	background: rgba(255, 255, 255, 1);
+	border-radius: 8px;
+}
+.productRT h4{
+	text-align: center;
+	font-size: 18px;
+}
+.productRT ul{
+	padding-top: 2.5rem;
+	padding-left: 1.8rem;
+}
+.productRT ul li{
+	float: left;
+	list-style-type: none;
+	width: 140px;
+	height: 120px;
+	text-align: center;
+	padding: 20px 0;
+}
+.productRLImg{
+	margin: 0 auto;
+}
+.productOneRLImg1{
+	width: 48px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat -48px -1152px;
+}
+.productOneRLImg2{
+	width: 48px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat -193px -1152px;
+}
+.productOneRLImg3{
+	width: 48px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat -144px -1152px;
+}
+.productOneRLImg4{
+	width: 48px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat -96px -1152px;
+}
+.productOneRLImg5{
+	width: 48px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat 0px -1194px;
+}
+.productOneRLImg6{
+	width: 140px;
+	height: 48px;
+	background: url(img/css_sprites.png) no-repeat -48px -1200px;
+}
+.productRight{
+	width: 100%;
+	height: 730px;
+	overflow: hidden;
+}
+.classify{
+	padding: 120px 0 120px 0;
+	background: rgba(245, 247, 253, 1);
+}
+.classifyList ul li{
+	float: left;
+	list-style-type: none;
+	width: 275px;
+	height: 275px;
+	text-align: center;
+	background: #fff;	
+}
+.classifyImg{
+	margin:80px 0 0 0;
+	width: 80px;
+	height: 80px;
+}
+.classifyImg1{
+	background: url(img/css_sprites.png) no-repeat -80px -835px;
+}
+.classifyImg2{
+	background: url(img/css_sprites.png) no-repeat -80px -672px;
+}
+.classifyImg3{
+	background: url(img/css_sprites.png) no-repeat 0px -752px;
+}
+.classifyImg4{
+	background: url(img/css_sprites.png) no-repeat -80px -990px;
+}
+.classifyImg5{
+	background: url(img/css_sprites.png) no-repeat -160px -915px;
+}
+.classifyImg6{
+	background: url(img/css_sprites.png) no-repeat 0px -1073px;
+}
+.classifyImg7{
+	background: url(img/css_sprites.png) no-repeat 0px -915px;
+}
+.classifyImg8{
+	background: url(img/css_sprites.png) no-repeat -160px -752px;
+}
+.classifyList ul li:hover h4{
+	color: rgba(47, 84, 235, 1);
+}
+.classifyList ul li:hover .classifyImg1{
+	background: url(img/css_sprites.png) no-repeat 0px -835px;
+}
+.classifyList ul li:hover .classifyImg2{
+	background: url(img/css_sprites.png) no-repeat 0px -672px;
+}
+.classifyList ul li:hover .classifyImg3{
+	background: url(img/css_sprites.png) no-repeat -160px -672px;
+}
+.classifyList ul li:hover .classifyImg4{
+	background: url(img/css_sprites.png) no-repeat 0px -990px;
+}
+.classifyList ul li:hover .classifyImg5{
+	background: url(img/css_sprites.png) no-repeat -80px -915px;
+}
+.classifyList ul li:hover .classifyImg6{
+	background: url(img/css_sprites.png) no-repeat -160px -993px;
+}
+.classifyList ul li:hover .classifyImg7{
+	background: url(img/css_sprites.png) no-repeat -160px -835px;
+}
+.classifyList ul li:hover .classifyImg8{
+	background: url(img/css_sprites.png) no-repeat -80px -752px;
+}
+.classifyList h4{
+	font-size: 24px;
+	color: rgba(155, 162, 204, 1);
+}
+.version{
+	margin:120px 0 120px 0;
+}
+.versionTable{
+	margin-top: 65px;
+}
+.versionTableItem{
+	height: 75px;
+	color: #fff;
+	border-radius: 24px 24px 0 0
+}
+.versionBgYellow{
+	background: rgba(250, 173, 20, 1);
+}
+.versionBgBlue{
+	background: rgba(47, 84, 235, 1);
+}
+.versionBigtitle{
+	padding-top: 7px;
+	font-size: 24px;
+	font-weight: 600;
+}
+.versionMeta{
+	font-size: 16px;
+}
+.versionTableTd{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 75px;
+	font-size: 16px;
+}
+.versionTableTdBig{
+	font-size: 18px;
+	font-weight: 600;
+}
+.versionTableBodyBox{
+	border-radius: 0 0 24px 24px;
+	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+}
+.iconWidth{
+	margin-right: 10px;
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+}
+.iconVersion{
+	background: url(img/css_sprites.png) no-repeat -200px -1126px;
+}
+.iconCorrect{
+	background: url(img/css_sprites.png) no-repeat -210px -1090px;
+}
+.iconWrong{
+	background: url(img/css_sprites.png) no-repeat -83px -1125px;
+}
+.iconPhone{
+	background: url(img/css_sprites.png) no-repeat -106px -1124px;
+}
+.iconQQ{
+	background: url(img/css_sprites.png) no-repeat -153px -1124px;
+}
+.bottomBox{
+	width: 100%;
+	text-align: center;
+	padding: 80px 0 20px 0;
+	background: rgba(5, 13, 22, 1);
+	color: #fff;
+}
+.bottomItem{
+	text-align: left;
+}
+.bottomItem h4{
+	font-size: 18px;
+}
+.bottomList{
+	padding:0;
+}
+.bottomList .phone{
+	font-size: 16px;
+	color: rgba(255, 255, 255, 1);
+}
+.bottomList img{
+	width: 160px;
+	height: 160px;
+}
+.bottomList li{
+	font-size: 16px;
+	list-style-type: none;
+	line-height: 20px;
+	padding: 10px 0;
+	color: rgba(255, 255, 255, 0.6);
+}
+.bottomList li a{
+	color: rgba(255, 255, 255, 0.6);
+}
+.bottomList li a:hover{
+	color: rgba(255, 255, 255, 1);
+}

index.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>大司空云计价 - 远程办公，用免费正版市政计价软件</title>
+  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+  <div class="navBody">
+    <div class="width1200">
+      <div class="globalNav">
+        <a href="#">首页</a>
+        <a href="#">通行帐号</a>
+        <a href="#">计量支付</a>
+        <div class="zhzd">
+          <a class="zhzdFir">纵横知道<b></b></a>
+          <div class="zhzdMenu">
+            <a href="http://zhzdwd.com" target="_blank">问答</a>
+            <a href="http://zhzdwk.com" target="_blank">文库</a>
+            <a href="http://zhzdjg.com" target="_blank">价格信息</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="logoCon">
+    <div class="width1200">
+      <div class="d-flex justify-content-between">
+        <div class="logo">
+          <span class="table-cell"><img src="images/logo.png"></span>
+          <span class="table-cell logoText">大司空云计价</span>
+        </div>
+        <div class="buttonCon">
+          <span class="table-cell btnText">登录平台</span>
+          <span class="table-cell"><button type="button" class="btn btn-primary">注册帐号</button></span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="banner"></div>
+  <div class="slogan">
+    <div class="width1200">
+      <div class="sloganSmall">大司空，古代官名，掌土木、营建之事</div>
+      <div class="sloganBig"><span>古人云，伯禹为</span><span class="blueBg">司空</span><span>，可成美尧之功</span></div>
+    </div>
+  </div>
+  <div class="videoListCon">
+    <div class="width1200">
+      <div class="d-flex justify-content-center">
+        <div class="videoLeft"></div>
+        <div class="videoRight">
+          <ul>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_01.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-调价</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_02.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-共用单价文件</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_03.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-清单精灵</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_04.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-查找定位</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_05.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-分享协作</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+            <li class="videoList">
+              <div class="row">
+                <div class="col-6"><div class="videoImg"><a href="#"><img src="images/image_video_cover_06.png"></a></div></div>
+                <div class="col-6"><div class=""><div class="videoTitle">视频教程-模板克隆</div><span class="textRrey">23:03</span></div></div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="productCon">
+    <div class="width1200">
+      <div class="bigtTitle">
+        <h4 class="text-center">产品功能</h4>
+        <span class="d-block text-center">为企业级客户/行业管理部门提供专业的公路工程管理平台解决方案</span>
+      </div>
+      <div class="productList">
+        <div class="productLine">
+          <div class="product productOne mt-4">
+            <div class="productIco productOneIco"></div>
+            <div class="row">
+              <div class="col-4">
+                <div class="prodectLeftTitle">
+                  <h3>官方正版</h3>
+                  <div class="productText">官方正版，免费注册</div>
+                  <div class="productText">永久免费，不限使用</div>
+                  <div class="productText">支持苹果系统、国产系统</div>
+                  <div class="productImg productOneImg hiddenTranX1 mt-3"></div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="productRight position-relative">
+                  <div class="productRImg productOneRImg hiddenTranX2"></div>
+                  <div class="productRT">
+                    <ul class="clearfix">
+                      <li class="border-right border-bottom">
+                        <div class="productOneR1 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg1"></div>
+                          <h4 class="mt-2">Apple</h4>
+                        </div>
+                      </li>
+                      <li class="border-right border-bottom">
+                        <div class="productOneR2 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg2"></div>
+                          <h4 class="mt-2">Windows</h4>
+                        </div>
+                      </li>
+                      <li class="border-bottom">
+                        <div class="productOneR3 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg3"></div>
+                          <h4 class="mt-2">Linux</h4>
+                        </div>
+                      </li>
+                      <li class="border-right">
+                        <div class="productOneR4 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg4"></div>
+                          <h4 class="mt-2">红旗Linux</h4>
+                        </div>
+                      </li>
+                      <li class="border-right">
+                        <div class="productOneR5 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg5"></div>
+                          <h4 class="mt-2">中标麒麟</h4>
+                        </div>
+                      </li>
+                      <li class="">
+                        <div class="productOneR6 hiddenTranX2">
+                          <div class="productRLImg productOneRLImg6"></div>
+                          <h4 class="mt-2">统信uos</h4>
+                        </div>
+                      </li>
+                    </ul>
+                    <h4 class="">更多支持，请<a href="#">咨询</a>工作人员</h4>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="product productTwo">
+            <div class="productIco productTwoIco"></div>
+            <div class="row">
+              <div class="col-4">
+                <div class="prodectLeftTitle">
+                  <h3>在线服务 免安装</h3>
+                  <div class="productText">Web端实时访问，办公更便捷</div>
+                  <div class="productText">数据云端存储，数据更安全</div>
+                  <div class="productText">版本自动升级，工作更轻松</div>
+                  <div class="productImg productTwoImg hiddenTranX1 mt-3"></div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="productRight position-relative">
+                  <div class="productRImg productTwoRImg1 hiddenTranX2"></div>
+                  <div class="productRImg productTwoRImg2 hiddenTranX2"></div>
+                  <div class="productRImg productTwoRImg3 hiddenTranX2"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="product productThree">
+            <div class="productIco productThreeIco"></div>
+            <div class="row">
+              <div class="col-4">
+                <div class="prodectLeftTitle">
+                  <h3>分享协作 更高效</h3>
+                  <div class="productText">一键分享，办公简单化</div>
+                  <div class="productText">多方协同，工作效率高</div>
+                  <div class="productText">设置灵活，用户体验佳</div>
+                  <div class="productImg productThreeImg hiddenTranX1 mt-3"></div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="productRight position-relative">
+                  <div class="productRImg productThreeRImg1 hiddenTranX2"></div>
+                  <div class="productRImg productThreeRImg2 hiddenTranX2"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="classify">
+    <div class="width1200">
+      <div class="bigtTitle">
+        <h4 class="text-center">专业分类</h4>
+        <span class="d-block text-center">大司空市政建筑云计价平台支持多个行业</span>
+      </div>
+      <div class="classifyList mt-4">
+        <ul class="clearfix">
+          <li class="mr-3 mb-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg1"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">市政</h4></div>
+          </li>
+          <li class="mr-3 mb-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg2"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">房建</h4></div>
+          </li>
+          <li class="mr-3 mb-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg3"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">轨道</h4></div>
+          </li>
+          <li class="mb-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg4"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">综合管廊</h4></div>
+          </li>
+          <li class="mr-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg5"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">园林绿化</h4></div>
+          </li>
+          <li class="mr-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg6"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">装配式建筑</h4></div>
+          </li>
+          <li class="mr-3">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg7"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">通用安装</h4></div>
+          </li>
+          <li class="">
+            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg8"></div></div>
+            <div class="d-flex justify-content-center"><h4 class="mt-3">构筑物</h4></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="version">
+    <div class="width1200">
+      <div class="bigtTitle">
+        <h4 class="text-center">不同版本 定向选择</h4>
+        <span class="d-block text-center">为不同的用户群体专属定做</span>
+      </div>
+      <div class="versionTable">
+        <div class="row">
+          <div class="col-4">
+            <div class="versionTableItem"></div>
+          </div>
+          <div class="col-4">
+            <div class="versionTableItem versionBgYellow">
+              <div class="d-flex justify-content-center versionBigtitle">个人版</div>
+              <div class="d-flex justify-content-center versionMeta">协作入门</div>
+            </div>
+          </div>
+          <div class="col-4">
+             <div class="versionTableItem versionBgBlue">
+              <div class="d-flex justify-content-center versionBigtitle">企业版</div>
+              <div class="d-flex justify-content-center versionMeta">企业专属</div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-4">
+            <div class="versionTableBody">
+              <div class="versionTableTd versionTableTdBig"><i class="iconWidth iconVersion"></i>工程信息</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>工程特征</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>造价分析</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>呈现选项</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>编制说明</div>
+              <div class="versionTableTd versionTableTdBig"><i class="iconWidth iconVersion"></i>工程信息</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>工程特征</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>造价分析</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>呈现选项</div>
+              <div class="versionTableTd"><i class="iconWidth"></i>编制说明</div>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="versionTableBody versionTableBodyBox">
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconWrong"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconWrong"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconWrong"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconWrong"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconWrong"></i></div>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="versionTableBody versionTableBodyBox">
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+              <div class="versionTableTd"><i class="iconWidth iconCorrect"></i></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bottomBox">
+    <div class="width1200">
+      <div class="row">
+        <div class="col-3">
+          <div class="bottomItem">
+            <h4>产品</h4>
+            <ul class="bottomList mt-4">
+              <li><a href="#">公路造价</a></li>
+              <li><a href="#">广东公路造价</a></li>
+              <li><a href="#">计量支付结算决算</a></li>
+              <li><a href="#">大司空市政建筑云计价</a></li>
+              <li><a href="#">养护造价</a></li>
+              <li><a href="#">养护造价云版</a></li>
+              <li><a href="#">固化清单</a></li>
+              <li><a href="#">公路算量</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-2">
+          <div class="bottomItem">
+            <h4>走进纵横</h4>
+            <ul class="bottomList mt-4">
+              <li><a href="#">了解纵横</a></li>
+              <li><a href="#">纵横文化</a></li>
+              <li><a href="#">发展历程</a></li>
+              <li><a href="#">校企合作</a></li>
+              <li><a href="#">合作案例</a></li>
+              <li><a href="#">加入纵横</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-2">
+          <div class="bottomItem">
+            <h4>客服服务</h4>
+            <ul class="bottomList mt-4">
+              <li><a href="#">呆瓜培训</a></li>
+              <li><a href="#">通行账号</a></li>
+              <li><a href="#">纵横文库</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-2">
+          <div class="bottomItem">
+            <h4>支持</h4>
+            <ul class="bottomList mt-4">
+              <li><a href="#">纵横帮助中心</a></li>
+              <li><a href="#">大司空帮助中心</a></li>
+              <li><a href="#">新闻动态</a></li>
+              <li><a href="#">真伪查询</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-3">
+          <div class="bottomItem">
+            <h4>联系我们</h4>
+            <ul class="bottomList mt-4">
+              <li><i class="iconWidth iconPhone"></i>全国服务热线：<span class="phone">0756-3850888</span></li>
+              <li><i class="iconWidth iconQQ"></i>企业QQ</li>
+              <li class="erwein"><img src="images/erweima.jpg"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="mt-4">Copyright@珠海纵横创新软件有限公司 all rights reserved</div>
+    </div>
+  </div>
+  <!-- JS. -->
+  <script src="js/jquery/jquery-3.2.1.min.js"></script>
+  <script src="js/bootstrap/bootstrap.min.js"></script>
+  <script src="js/global.js"></script>
+  <script type="text/javascript">
+    // 滚动条到顶部的垂直高度
+    console.log($(window).scrollTop());
+    // 浏览器显示区域（可视区域）的高度
+    console.log($(window).height());
+    // 获取页面的文档高度
+    console.log($('.productTwo').offset().top);
+    console.log();
+  </script>
+</body>
+
+</html>

js/global.js

@@ -0,0 +1,22 @@
+$(function(){
+	$(".zhzdFir").click(function () {
+		$(this).toggleClass("now").siblings(".zhzdMenu").slideToggle("fast")
+	})
+})
+$(window).bind("scroll",function() {
+  if ($(document).scrollTop() + $(window).height() + 550 >= $('.productTwo').offset().top) {    
+    $('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').addClass('show');
+  }else{
+  	$('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').removeClass('show');
+  }
+  if ($(document).scrollTop() + $(window).height() + 550 >= $('.productThree').offset().top) {    
+    $('.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').addClass('show');
+  }else{
+  	$('.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').removeClass('show');
+  }
+  if ($(document).scrollTop() + $(window).height() + 550 >= $('.classify').offset().top) {    
+    $('.productThreeImg,.productThreeRImg1,.productThreeRImg2').addClass('show');
+  }else{
+  	$('.productThreeImg,.productThreeRImg1,.productThreeRImg2').removeClass('show');
+  }
+})