小米商城首页的实现

news/2024/11/29 22:43:40/

小米首页

效果图
在这里插入图片描述

html代码

由于代码过多，上传困难。请访问链接：https://share.weiyun.com/5BWIENo小米商城源文件里面附带完整的源码文件

css代码

*{margin: 0;padding: 0;}ul,ol,li{ list-style: none;}img{ display: block;width: 100%;}a{ text-decoration: none;}h1,h2,h3,h4{ font-size:16px;}body{ font-size:14px; color:#000000; font-family: 宋体 , 微软雅黑;}html, body{width:100%;}
/* css common */.l{ float:left;}.r{ float:right;}.clear:after{ content:""; display: block; clear:both;}.container{ width:1226px; margin:0 auto; position: relative;}.container-fluid{ position: relative;}
/* css flex-nav */
#flex-nav{width: 82px;height:560px;display: flex;flex-direction: column;position: fixed;right: 0;top:50%;transform: translateY(-50%);}#flex-nav div{height: 90px;background-color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;border: 1px solid gainsboro;}#flex-nav div:last-of-type{margin-top: 20px;}#flex-nav a:first-of-type{font-size: 26px;color: grey;margin-bottom: 6px;}#flex-nav a:last-of-type{font-size: 14px;color: grey;}
/* css header */
#header{width: 100%;height: 120px;border-top: 1px solid white;background: linear-gradient(to right, #fea604 , #ffc83b);}#header h1{font-size: 54px;color: white;text-align: center;line-height: 120px;}
/* css nav */
#nav{height: 40px;background: #333333;}#nav .nav-list{}#nav .nav-list ul{float: left;display: flex;width: 698px;justify-content: space-between;height: 40px;text-align: center;align-items: center;}#nav .nav-list ul li{flex-grow: 1;font-size: 12px;}#nav .nav-list ul li:not(:last-of-type){border-right: 1px solid #a09e8f;}#nav .nav-list ul li a{color: #a09e8f;}#nav .nav-list ol{float: right;width: 280px;height: 40px;display: flex;text-align: center;align-items: center;}#nav .nav-list ol li{font-size: 12px;}#nav .nav-list ol li:nth-of-type(1){border-right: 1px solid #a09e8f;}#nav .nav-list ol li:nth-of-type(2){border-right: 1px solid #a09e8f;}#nav .nav-list ol li:not(:last-of-type){flex-grow: 1;}#nav .nav-list ol li:last-of-type{width: 120px;height: 40px;line-height: 40px;background: #424242;}#nav .nav-list ol li:last-of-type i{margin-right: 4px;}#nav .nav-list ol li a{color: #a09e8f;}
/* css mainbav */
#mainbav{height: 100px;display: flex;justify-content: space-between;align-items: center;}#mainbav .mainbav-logo{}#mainbav .mainbav-logo img{}#mainbav .mainbav-list{width: 600px;display: flex;}#mainbav .mainbav-list li{flex-grow: 1;text-align: center;}#mainbav .mainbav-list li a{color: #52323f;}#mainbav .mainbav-sousuo{width: 296px;height: 50px;border: 1px solid gainsboro;display: flex; position: relative;}/* #logo .logo-search{ margin-top:15px; width:294px; height:48px; border:1px #e0e0e0 solid; display: flex; position: relative;} */#mainbav .mainbav-sousuo input{ flex:1; border:none; outline: none; font-size:18px; text-indent: 5px;}#mainbav .mainbav-sousuo .mainbav-sousuo-btn{ width:50px; height:48px; text-align: center; line-height: 48px; border-left:1px #e0e0e0 solid;}#mainbav .mainbav-sousuo .mainbav-sousuo-btn i{font-size: 26px;}#mainbav .mainbav-sousuo .mainbav-sousuo-tip{ position: absolute; left:50px; top:15px;}#mainbav .mainbav-sousuo-tip a{ background:#ccc; padding:3px 4px;color: gray;}
/* css banner */
#banner{height: 460px;overflow: hidden;position: relative;}#banner .banner-pic{}#banner .banner-list{width: 235px;position: absolute;left: 0;top: 0;height: 100%; background: rgba(0,0,0,.5);display: flex;flex-direction: column;justify-content: center;cursor: pointer;}#banner .banner-list li{color: white;padding-left: 30px; line-height: 42px;height: 42px;}#banner .banner-list li span{float: right;margin-right: 25px;}#banner .banner-list li div{background: white;position: absolute;top: 0;left: 235px;z-index: 1; /* width: auto; */width: 991px; height: 460px;display: none;}#banner .banner-list li:nth-of-type(1) div{background-color: red;}#banner .banner-list li:nth-of-type(2) div{}#banner .banner-list li:nth-of-type(3) div{background-color: blue;}#banner .banner-list li:nth-of-type(4) div{}#banner .banner-list li:nth-of-type(5) div{background-color: chartreuse;}#banner .banner-list li:nth-of-type(6) div{}#banner .banner-list li:nth-of-type(7) div{background-color: rosybrown;}#banner .banner-list li:nth-of-type(8) div{}#banner .banner-list li:nth-of-type(9) div{background-color: orange;}#banner .banner-list li:nth-of-type(10) div{}#banner .banner-list li:hover div{display: block;}#banner .banner-list li:hover {background-color: orangered;}#banner .banner-left-btn , #banner .banner-right-btn{ width:38px; height:38px; position: absolute; top:50%; text-align: center; line-height: 38px;}#banner .banner-left-btn i ,  #banner .banner-right-btn i{ font-size:30px; color:gray;}#banner .banner-left-btn{ left:234px;}#banner .banner-right-btn{ right:0; }#banner .banner-dot{ position: absolute; bottom:10px; right:10px;}#banner .banner-dot li{ float:left; width:10px; height:10px; background:white; border-radius: 50%; margin:5px 3px;}#banner .banner-dot li.active{background-color: gray;}
/* css hot */
#hot{margin-top: 14px; display: flex;justify-content: space-between;}#hot .hot-infer{width: 234px;background-color: #605750; display: grid;grid-template-columns: 3;grid-template-rows: 2;grid-template:"a1 a2 a3""a4 a5 a6";align-items: center;justify-items: center;}#hot .hot-infer div{display: flex;flex-direction: column;align-items: center;}#hot .hot-infer div:nth-of-type(1){grid-area: a1;}#hot .hot-infer div:nth-of-type(2){grid-area: a2;}#hot .hot-infer div:nth-of-type(3){grid-area: a3;}#hot .hot-infer div:nth-of-type(4){grid-area: a4;}#hot .hot-infer div:nth-of-type(5){grid-area: a5;}#hot .hot-infer div:nth-of-type(6){grid-area: a6;}#hot .hot-infer div a{color: #d1ccd2;}#hot .hot-infer div i{font-size:22px;  display: block;color: white;margin-bottom: 4px;}#hot .hot-pic{width: 317px;}#hot .hot-pic img{width: 100%;}
/* css main main-case-1 */
#main{background-color: #f5f5f5;margin-top: 26px;}#main .main-case-1{}#main .main-case-1 .case-title{height: 62px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-1 .case-title h3{font-size: 22px;}#main .main-case-1 .case-title a{}#main .main-case-1 .case-title div a{align-self: flex-end; padding:5px 12px; border:1px #ccc solid;}
#main .main-case-1 .case-pic{width: 100%;display: flex;justify-content: space-between;}#main .main-case-1 .case-pic div{/* width: 234px; *//* float: left; */height: 340px;transition: .5s;}#main .main-case-1 .case-pic div:nth-of-type(1){}#main .main-case-1 .case-pic div:not(:first-of-type){background-color: white;}#main .main-case-1 .case-pic div:nth-of-type(2){border-top: 1px solid #ffac12;}#main .main-case-1 .case-pic div:nth-of-type(2) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(2) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(3){border-top: 1px solid #84c34e;}#main .main-case-1 .case-pic div:nth-of-type(3) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(4){border-top: 1px solid #2196f3;}#main .main-case-1 .case-pic div:nth-of-type(4) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-pic div:nth-of-type(5){border-top: 1px solid #e33a33;}#main .main-case-1 .case-pic div:nth-of-type(5) > a{display: block;margin: 50px 47px 44px 46px;width: 142px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 28px;}#main .main-case-1 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-1 .case-banner{margin: 22px 0;}#main .main-case-1 .case-banner img{width: 100%;}#main .main-case-1 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main main-case-2 */#main .main-case-2{/* width: 1226px; */padding-bottom: 36px;}#main .main-case-2 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-2 .case-title h3{font-size: 22px;}#main .main-case-2 .case-title a{color: black;font-size: 16px;}#main .main-case-2 .case-title span{ background:#b0b0b0; color:white; padding:3px; border-radius: 50%;margin-left: 4px;}
#main .main-case-2 .case-pic div{width: 234px;background-color: white;transition: .5s;}#main .main-case-2 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 2;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a6 a7 a8 a9";}#main .main-case-2 .case-pic div:nth-of-type(1){grid-area: a1;width: 234px;overflow: hidden;}/* #main .main-case-2 .case-pic div:nth-of-type(1) a{width: 100%;display: block;}#main .main-case-2 .case-pic div:nth-of-type(1) a img{width: 100%;} */#main .main-case-2 .case-pic div:nth-of-type(2){grid-area: a2;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(2) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(2) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(2) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(2) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}#main .main-case-2 .case-pic div:nth-of-type(3){grid-area: a3;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(3) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(3) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(4){grid-area: a4;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(4) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(4) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: }#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(5){grid-area: a5;margin-bottom: 14px;}#main .main-case-2 .case-pic div:nth-of-type(5) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(5) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(6){grid-area: a6;}#main .main-case-2 .case-pic div:nth-of-type(6) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(6) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-2 .case-pic div:nth-of-type(7) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(7) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-2 .case-pic div:nth-of-type(8) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(8) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-2 .case-pic div:nth-of-type(9) > a{margin-left: 45px;display: block;}#main .main-case-2 .case-pic div:nth-of-type(9) a img{width: 142px;height: 201px; display: block;text-align: center;}#main .main-case-2 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 32px;}#main .main-case-2 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 12px;line-height: 26px;}
#main .main-case-2 .case-banner{margin-top: 36px;}#main .main-case-2 .case-banner img{width: 100%;}#main .main-case-2 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main main-case-3 */
#main .main-case-3{padding-bottom: 36px;}#main .main-case-3 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-3 .case-title h3{font-size: 22px;}#main .main-case-3 .case-title a{color: black;font-size: 16px;}#main .main-case-3 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-3 .case-title a:nth-of-type(2){}
#main .main-case-3 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-3 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a2 a3 a4 a5"    "a6 a7 a8 a9 a10"    "a6 a7 a8 a9 a11";}#main .main-case-3 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-3 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-3 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-3 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-3 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-3 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-3 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-3 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-3 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-3 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-3 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-3 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-3 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-3 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-3 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-3 .case-banner img{width: 100%;}#main .main-case-3 .case-banner{margin-top: 36px;}#main .main-case-3 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 4px 4px lightgray;}
/* css main-case-4 */
#main .main-case-4{padding-bottom: 36px;}#main .main-case-4 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-4 .case-title h3{font-size: 22px;}#main .main-case-4 .case-title a{color: black;font-size: 16px;}#main .main-case-4 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-4 .case-title a:nth-of-type(2){margin-right: 20px;}
#main .main-case-4 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-4 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a2 a3 a4 a5"    "a6 a7 a8 a9 a10"    "a6 a7 a8 a9 a11";}#main .main-case-4 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-4 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-4 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-4 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-4 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-4 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-4 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-4 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-4 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-4 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-4 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-4 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-4 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-4 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-4 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-4 .case-banner img{width: 100%;}#main .main-case-4 .case-banner{margin-top: 36px;}#main .main-case-4 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-5 */
#main .main-case-5{padding-bottom: 36px;}#main .main-case-5 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-5 .case-title h3{font-size: 22px;}#main .main-case-5 .case-title a{color: black;font-size: 16px;}#main .main-case-5 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-5 .case-title a:nth-of-type(2){/* margin-right: 20px; */}
#main .main-case-5 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-5 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a2 a3 a4 a5"    "a6 a7 a8 a9 a10"    "a6 a7 a8 a9 a11";}#main .main-case-5 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-5 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-5 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-5 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-5 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-5 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-5 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-5 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-5 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-5 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-5 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-5 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;padding-top: 10px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-5 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-5 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-5 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-5 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-5 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-5 .case-banner img{width: 100%;}#main .main-case-5 .case-banner{margin-top: 36px;}
#main .main-case-5 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-5 */
#main .main-case-6{padding-bottom: 36px;}#main .main-case-6 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-6 .case-title h3{font-size: 22px;}#main .main-case-6 .case-title a{color: black;font-size: 16px;}#main .main-case-6 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-6 .case-title a:nth-of-type(2){margin-right: 20px;}
#main .main-case-6 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-6 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a2 a3 a4 a5"    "a6 a7 a8 a9 a10"    "a6 a7 a8 a9 a11";}#main .main-case-6 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-6 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-6 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-6 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-6 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-6 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-6 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-6 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-6 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-6 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-6 .case-pic div:nth-of-type(10){grid-area: a10;display: flex;height: 143px;}#main .main-case-6 .case-pic div:nth-of-type(10) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-6 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-6 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-6 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
/* #main .main-case-6 .case-pic div:nth-of-type(11){grid-area: a11;display: flex;}#main .main-case-6 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-6 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-6 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-6 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;} */
#main .main-case-6 .case-banner img{width: 100%;}#main .main-case-6 .case-banner{margin-top: 36px;}
#main .main-case-6 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-7 */
#main .main-case-7{padding-bottom: 36px;}#main .main-case-7 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-7 .case-title h3{font-size: 22px;}#main .main-case-7 .case-title a{color: black;font-size: 16px;}#main .main-case-7 .case-title a:nth-of-type(1){color:orange;text-decoration: underline orange;margin-right: 20px;}#main .main-case-7 .case-title a:nth-of-type(2){/* margin-right: 20px; */}
#main .main-case-7 .case-pic div{background-color: white;width: 234px;transition: .5s;}#main .main-case-7 .case-pic{    display: grid;grid-template-columns: 5;grid-template-rows: 4;justify-content: space-between;    grid-template:    "a1 a2 a3 a4 a5"    "a1 a2 a3 a4 a5"    "a6 a7 a8 a9 a10"    "a6 a7 a8 a9 a11";}#main .main-case-7 .case-pic div:nth-of-type(1){grid-area: a1;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(1) a img{height: 100%;}#main .main-case-7 .case-pic div:nth-of-type(2){grid-area: a6;}#main .main-case-7 .case-pic div:nth-of-type(3){grid-area: a2;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(3) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(3) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-7 .case-pic div:nth-of-type(4){grid-area: a3;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(4) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(4) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(5){grid-area: a4;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(5) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(5) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(6){grid-area: a5;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(6) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(6) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}#main .main-case-7 .case-pic div:nth-of-type(7){grid-area: a7;}#main .main-case-7 .case-pic div:nth-of-type(7) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(7) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(8){grid-area: a8;}#main .main-case-7 .case-pic div:nth-of-type(8) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(8) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(9){grid-area: a9;}#main .main-case-7 .case-pic div:nth-of-type(9) > a{display: block;width: 174px;margin-left: 30px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul{text-align: center;font-weight: bold;margin-top: 28px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(1) a{color: black;font-size: 14px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(2) a{font-size: 12px;color: #a8adb3;line-height: 36px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul li:nth-of-type(3) a{color: orangered;font-size: 14px;line-height: 28px;}#main .main-case-7 .case-pic div:nth-of-type(9) ul span{font-size: 12px;text-decoration: line-through;color: #a8adb3;}
#main .main-case-7 .case-pic div:nth-of-type(10){grid-area: a10;clear: both;padding: 33px 0 32px 0;margin-bottom: 14px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul{float: left;margin-left: 29px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul li:first-of-type a{color: black;font-size: 12px;line-height: 20px;}#main .main-case-7 .case-pic div:nth-of-type(10) ul li:last-of-type a{color: orangered;font-size: 12px;line-height: 29px;}#main .main-case-7 .case-pic div:nth-of-type(10) > a{display: block;width: 78px;float: right;margin-right:22px;}
#main .main-case-7 .case-pic div:nth-of-type(11){grid-area: a11;height: 143px;display: flex;}#main .main-case-7 .case-pic div:nth-of-type(11) ul{text-align: left;margin-left: 29px;align-self: center;}#main .main-case-7 .case-pic div:nth-of-type(11) ul li:first-of-type a{color: black;font-size: 18px;}#main .main-case-7 .case-pic div:nth-of-type(11) ul li:last-of-type a{color: orangered;font-size: 12px;}#main .main-case-7 .case-pic div:nth-of-type(11) > a{display: block;width: 78px;float: right;margin-right:22px;}#main .main-case-7 .case-banner img{width: 100%;}#main .main-case-7 .case-banner{margin-top: 36px;}
#main .main-case-7 .case-pic div:hover {    transform:translateY(-3px);        box-shadow: 0 5px 5px 5px lightgray;}
/* css main-case-8 */
#main .main-case-8{/* width: 1226px; */}#main .main-case-8 .case-title{height: 58px;display: flex;justify-content: space-between;align-items: center;}#main .main-case-8 .case-title h3{font-size: 22px;}#main .main-case-8 .case-title a{color: black;font-size: 16px;}
#main .main-case-8 .case-pic{display: flex;justify-content: space-between;padding-bottom: 27px;}#main .main-case-8 .case-pic div{background-color: white;}#main .main-case-8 .case-pic div ul{height: 78px;text-align: center;}#main .main-case-8 .case-pic div ul a{line-height: 78px;display: block;color: black;font-weight: bold;font-size: 12px;}
/* css footer */
#footer{width: 100%;background-color: white;}#footer .footer-list{height: 80px;border-bottom: 1px solid #dfdfdf;}#footer .footer-list ul{display: flex;width: 100%;height: 80px;align-items: center;font-weight: bold;}#footer .footer-list ul li{flex-grow: 1;text-align: center;}#footer .footer-list ul li:not(:last-of-type){border-right: 1px solid #dfdfdf;}#footer .footer-list ul li a{font-size: 16px;color: #5f6269;}#footer .footer-list ul li a span{}
#footer .footer-infer{padding-top: 18px;display: flex;}#footer .footer-infer .footer-infer-one{}#footer .footer-infer .footer-infer-one dl{width: 160px;float: left;text-align: left;}#footer .footer-infer .footer-infer-one dl dt{font-size: 12px;color: #3d4641;line-height: 60px;font-weight: bold;}#footer .footer-infer .footer-infer-one dl dd{line-height: 28px;}#footer .footer-infer .footer-infer-one dl dd a{font-size: 12px;color: #6c6f76;}#footer .footer-infer .footer-infer-two{flex-grow: 1;margin-left: 15px;height: 114px;align-self: center;text-align: center;}#footer .footer-infer .footer-infer-two p{font-size: 24px;color: #ff6412;}#footer .footer-infer .footer-infer-two li{font-size: 12px;line-height: 20px;color: #636456;}#footer .footer-infer .footer-infer-two a{display: block;height: 28px;width: 118px;font-size: 12px;color: #fb6900;border: 1px solid #fb6900;line-height: 28px;margin: 15px auto 0 auto;}#footer .footer-infer .footer-infer-two a span{}
/* css logo-bottom */
#logo-bottom{height: 230px;background-color: #fafafa;overflow: hidden;position: relative;}#logo-bottom .logo-bottom-1{margin-top: 30px;display: flex;}#logo-bottom .logo-bottom-1 .logo{width: 57px;}#logo-bottom .logo-bottom-1 .list{width: 963px;margin-left: 10px;}#logo-bottom .logo-bottom-1 .list p{line-height: 18px;}#logo-bottom .service{position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);margin-bottom: 30px;}#logo-bottom .service li{font-size: 20px;color: #bdbdbd;}

http://www.ppmy.cn/news/691865.html

相关文章

1999元MX3和小米3，5个月现货和期货之战

1999元MX3和小米3，5个月现货和期货之战

2月10日，黄章在重任魅族CEO之后，宣布MX3（16GB）降价至1999元，至此，国产热门手机MX3和小米3起售价均是1999元，只是前者是现货供应，后者依旧是“期货”模式。 2013年9月2日：…
阅读更多...
【论文解读系列】MLLM研究综述

【论文解读系列】MLLM研究综述

A Survey on Multimodal Large Language Models 1 中国科大科技学院、认知智能国家重点实验室 2 腾讯优图实验室 MLLM目录 0. 摘要1. 引言2. 总览3. 方法3.1 多模态指令调谐3.1.1 引言3.1.2 前言(Preliminaries)3.1.3 模态对齐3.1.4 数据3.1.5 模态桥接3.1.6 评估 3.2 多模态…
阅读更多...
小米商城实现01

小米商城实现01

小米商城官网图片 本文先实现上述部分图片&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…
阅读更多...
电商项目:高仿小米商城(一)

电商项目:高仿小米商城(一)

前言 时间过得很快&#xff0c;统一哥转眼也大三了。欢娱不惜、时光易逝。不由得引起人的感叹 那时候我只是个Java入门小白&#xff0c;lambda表达式都jio得难得一匹&#xff0c;但我心中的不甘是清晰的。了解我的人都知道&#xff0c;我向来是个不会向现实低头的人。技术水…
阅读更多...
实现数据库增删改产+界面效果2-----jsp

实现数据库增删改产+界面效果2-----jsp

任务 1.通过连接数据库完成用户登录模块。 2.登录成功后查询出一张数据库表中的内容&#xff1b;登录不成功返回登录页面。 3.登录页面端要有空值和非法字符验证。 4.登录成功后对一张表中数据进行增加、删除、修改和查询操作。 代码 数据库相关代码 创建数据库 名字为jdb…
阅读更多...
【C++/Linux复习知识点】锁

【C++/Linux复习知识点】锁

std::mutex 最普通的互斥锁&#xff0c;谁竞争到改锁&#xff0c;谁访问临界资源 std::mutex mtx; int shared_data 0;void add() {mtx.lock();shared_data;mtx.unlock(); }int main() {std::thread t1(add);std::thread t2(add);t1.join();t2.join();std::cout << &q…
阅读更多...
比亚迪汉改装鸿蒙系统,搭载鸿蒙系统的比亚迪汉上市，华为余承东亲自站台打Call...

比亚迪汉改装鸿蒙系统,搭载鸿蒙系统的比亚迪汉上市，华为余承东亲自站台打Call...

7月12日晚间&#xff0c;比亚迪汉正式上市。值得注意的是&#xff0c;华为消费者CEO余承东亲自现身发布会现场&#xff0c;与比亚迪总裁王传福同框&#xff0c;为新品打Call&#xff0c;也成为本场发布会的一大亮点。 发布会之前&#xff0c;余承东曾亲自试驾体验了比亚迪汉&am…
阅读更多...
mios系统和鸿蒙,继华为之后又一国产手机将用上自研系统 小米miOS会成为现实吗...

mios系统和鸿蒙,继华为之后又一国产手机将用上自研系统 小米miOS会成为现实吗...

花火网消息&#xff0c;小米要造自己的系统这回事其实并非突然之间的事情了&#xff0c;在2014年小米就已经计划打造自己的操作系统&#xff0c;名为MiOS&#xff0c;不过看起来MiOS还没有正式发布&#xff0c;华为就要先拿出自己的鸿蒙OS了。 鸿蒙OS(英文&#xff1a;Harmony …
阅读更多...
最新文章

Copyright @ 2022~2023