From f238684127c9ce6bb5b64fdd1af5f28a45029c52 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Thu, 27 Sep 2018 17:04:00 +0800 Subject: [PATCH] 产品页 add css3 --- css/portfollo.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- js/portfollo.js | 12 ++++++++---- portfolio.html | 7 +++++++ style.css | 119 ++--------------------------------------------------------------------------------------------------------------------- 4 files changed, 141 insertions(+), 125 deletions(-) diff --git a/css/portfollo.css b/css/portfollo.css index ac328a4..a72dea9 100644 --- a/css/portfollo.css +++ b/css/portfollo.css @@ -1,4 +1,123 @@ +/*breadcrumb*/ +.breadcrumb{ + width: 100%; + height: 682px; + background:url('../images/breadcrumb-bg.png'); + background-size:100% 100%; + background-repeat:no-repeat; +} +.breadcrumb-text{ + text-align: center; + padding-top: 300px; + color: #fff; + font-size: 71px; +} +#portfolio-soft-top{ + background: #fff; +} +/*软件sta-----*/ +.portfolio-soft-wrap li{ + color:rgba(6,14,19,.8); + font-size: 20px; + cursor: pointer; + position: relative; +} +.portfolio-soft-wrap li:nth-of-type(1){ + padding-top: 60px; + background: url("../images/portfolio-soft-wrap-1.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(2){ + padding-top: 60px; + background: url("../images/portfolio-soft-wrap-2.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(3){ + padding-top: 60px; + background: url("../images/portfolio-soft-wrap-3.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(1).active{ + color: #3F9FFE; + padding-bottom: 10px; + /*border-bottom: 3px solid rgba(63,159,254,1);*/ + background: url("../images/portfolio-soft-wrap-1-active.png") no-repeat center 0; +} +.portfolio-soft-wrap li:nth-of-type(2).active{ + color: #3F9FFE; + padding-bottom: 10px; + /*border-bottom: 3px solid rgba(63,159,254,1);*/ + background: url("../images/portfolio-soft-wrap-2-active.png") no-repeat center 0; +} +.portfolio-soft-wrap li:nth-of-type(3).active{ + color: #3F9FFE; + padding-bottom: 10px; + /*border-bottom: 3px solid rgba(63,159,254,1);*/ + background: url("../images/portfolio-soft-wrap-3-active.png") no-repeat center 0; +} + +.portfolio-section-wrap{ + min-height: 596px; +} +.portfolio-section-wrap>li{ +} +.portfolio-section-wrap>li li{ + height: 596px; +} +.ortfolio-soft-bottom-1>li:nth-of-type(1){ + background: url("../images/ortfolio-soft-mobile.gif") no-repeat center center; + background-size: 100% 80%; +} +.ortfolio-soft-bottom-1 li:nth-of-type(2){ + padding-left: 100px; +} +.ortfolio-soft-bottom-2 li:nth-of-type(1){ + background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center; + background-size: 100% 70%; +} +.ortfolio-soft-bottom-2 li:nth-of-type(2){ + padding-left:100px; +} +.ortfolio-soft-bottom-3 li:nth-of-type(1){ + background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center; + background-size: 100% 70%; +} +.ortfolio-soft-bottom-3 li:nth-of-type(2){ + padding-left:100px; +} +.ortfolio-soft-bottom-title{ + font-size:30px; + font-weight:bold; + color:rgba(0,0,0,.8); + margin: 239px 0 27px; + text-align: left; +} +.ortfolio-soft-bottom-des{ + font-size: 16px; + text-align: left; + color:rgba(0,0,0,.6); + padding-left: 20px; + position: relative; +} +.ortfolio-soft-bottom-des span{ + width:6px; + height:6px; + display: inline-block; + position: relative; +} +.ortfolio-soft-bottom-des span:before{ + position: absolute; + content: ''; + left: -10px; + top:50%; + margin-top: -6px; + width:6px; + height:6px; + background:rgba(66,160,251,1); + border-radius:50%; +} +/*硬件sta-----*/ .portfolio-hardware-top{ background: #fff; padding-top: 101px !important; @@ -8,6 +127,7 @@ color:rgba(6,14,19,.8); font-size: 20px; cursor: pointer; + position: relative; } .portfolio-hardware-wrap li:nth-of-type(1){ padding-top: 60px; @@ -32,26 +152,26 @@ .portfolio-hardware-wrap li:nth-of-type(1).active{ color: #3F9FFE; padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); + /*border-bottom: 3px solid rgba(63,159,254,1);*/ background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0; } .portfolio-hardware-wrap li:nth-of-type(2).active{ color: #3F9FFE; padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); + /*border-bottom: 3px solid rgba(63,159,254,1);*/ background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0; /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/ } .portfolio-hardware-wrap li:nth-of-type(3).active{ color: #3F9FFE; padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); + /*border-bottom: 3px solid rgba(63,159,254,1);*/ background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0; } .portfolio-hardware-wrap li:nth-of-type(4).active{ color: #3F9FFE; padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); + /*border-bottom: 3px solid rgba(63,159,254,1);*/ background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0; } diff --git a/js/portfollo.js b/js/portfollo.js index 859eced..048fbb1 100644 --- a/js/portfollo.js +++ b/js/portfollo.js @@ -1,12 +1,16 @@ //软件 $('#portfolio-soft-wrap li').on('click',function () { var _index = $(this).index(); - $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') - $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') + $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); + $('#portfolio-soft-wrap li').children('div').addClass('displaynone'); + $('#portfolio-soft-wrap li').eq(_index).children('div').removeClass('displaynone'); + $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); }) //硬件 $('#portfolio-hardware-wrap li').on('click',function () { var _index = $(this).index(); - $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active') - $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') + $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); + $('#portfolio-hardware-wrap li').children('div').addClass('displaynone'); + $('#portfolio-hardware-wrap li').eq(_index).children('div').removeClass('displaynone'); + $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); }) diff --git a/portfolio.html b/portfolio.html index e46d472..9925630 100755 --- a/portfolio.html +++ b/portfolio.html @@ -78,12 +78,15 @@ @@ -178,15 +181,19 @@ diff --git a/style.css b/style.css index cc865fd..b89565f 100755 --- a/style.css +++ b/style.css @@ -104,24 +104,7 @@ a:hover{ .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} -/*breadcrumb*/ -.breadcrumb{ - width: 100%; - height: 682px; - background:url('images/breadcrumb-bg.png'); - background-size:100% 100%; - background-repeat:no-repeat; -} -.breadcrumb-text{ - text-align: center; - padding-top: 300px; - color: #fff; - font-size: 71px; -} -#portfolio-soft-top{ - background: #fff; -} .section-title-name{ font-size: 36px; font-weight: 500; @@ -132,109 +115,10 @@ a:hover{ text-align: center; margin-bottom: 40px; } - -.portfolio-soft-wrap li{ - color:rgba(6,14,19,.8); - font-size: 20px; - cursor: pointer; -} -.portfolio-soft-wrap li:nth-of-type(1){ - padding-top: 60px; - background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0; - -} -.portfolio-soft-wrap li:nth-of-type(2){ - padding-top: 60px; - background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0; - -} -.portfolio-soft-wrap li:nth-of-type(3){ - padding-top: 60px; - background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0; - -} -.portfolio-soft-wrap li:nth-of-type(1).active{ - color: #3F9FFE; - padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); - background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0; -} -.portfolio-soft-wrap li:nth-of-type(2).active{ - color: #3F9FFE; - padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); - background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0; -} -.portfolio-soft-wrap li:nth-of-type(3).active{ - color: #3F9FFE; - padding-bottom: 10px; - border-bottom: 3px solid rgba(63,159,254,1); - background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0; -} - -.portfolio-section-wrap{ - min-height: 596px; -} -.portfolio-section-wrap>li{ -} -.portfolio-section-wrap>li li{ - height: 596px; -} .displaynone{ display: none; } -.ortfolio-soft-bottom-1>li:nth-of-type(1){ - background: url("images/ortfolio-soft-mobile.gif") no-repeat center center; - background-size: 100% 80%; -} -.ortfolio-soft-bottom-1 li:nth-of-type(2){ - padding-left: 100px; -} -.ortfolio-soft-bottom-2 li:nth-of-type(1){ - background: url("images/ortfolio-soft-pc1.gif") no-repeat center center; - background-size: 100% 70%; -} -.ortfolio-soft-bottom-2 li:nth-of-type(2){ - padding-left:100px; -} -.ortfolio-soft-bottom-3 li:nth-of-type(1){ - background: url("images/ortfolio-soft-pc2.gif") no-repeat center center; - background-size: 100% 70%; -} -.ortfolio-soft-bottom-3 li:nth-of-type(2){ - padding-left:100px; -} -.ortfolio-soft-bottom-title{ - font-size:30px; - font-weight:bold; - color:rgba(0,0,0,.8); - margin: 239px 0 27px; - text-align: left; -} -.ortfolio-soft-bottom-des{ - font-size: 16px; - text-align: left; - color:rgba(0,0,0,.6); - padding-left: 20px; - position: relative; -} -.ortfolio-soft-bottom-des span{ - width:6px; - height:6px; - display: inline-block; - position: relative; -} -.ortfolio-soft-bottom-des span:before{ - position: absolute; - content: ''; - left: -10px; - top:50%; - margin-top: -6px; - width:6px; - height:6px; - background:rgba(66,160,251,1); - border-radius:50%; -} + .slicknav_menu{ display:none; } @@ -2616,6 +2500,7 @@ a:hover{ background:rgba(63,159,254,1); position:absolute; bottom: 0; + left: 0; animation:myfirst 0.3s; -moz-animation:myfirst 0.3s; /* Firefox */ -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ -- libgit2 0.21.4