* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } /* 头部样式 */ .header { width: 100%; height: 35px; background: #EEE; } .header .container { width: 1084px; height: 100%; margin: 0 auto; overflow: hidden; } .header .container .container-left { float: left; } .header .container .container-left p { display: inline-block; font-size: 12px; color: #888; line-height: 35px; } .header .container .container-left p span { color: #6F26BD; } .header .container .container-left p:nth-child(2) { margin-left: 25px; } .header .container .container-right { float: right; } .header .container .container-right ul { overflow: hidden; line-height: 35px; margin-right: 24px; } .header .container .container-right ul li { float: left; color: #888; font-size: 12px; } .header .container .container-right ul li:nth-child(even) { width: 1px; height: 11px; background: #888; margin-top: 13px; } .header .container .container-right ul li:nth-child(odd) { padding: 0 5px; } .header .container .container-right ul li:nth-child(3) { color: #6F26BD; } /* 主体代码 */ .main { width: 100%; /* background: #00f; */ } /* 第一部分 */ .main .partOne { width: 1084px; height: 160px; margin: 0 auto; overflow: hidden; } .main .partOne .logo { width: 176px; height: 100%; float: left; } .main .partOne .logo img { width: 176px; height: 49px; margin-top: 44px; } .main .partOne .search { width: 659px; height: 100%; float: left; } .main .partOne .search .search-top { width: 536px; height: 44px; overflow: hidden; border: 2px solid #6F26BD; margin-left: 123px; margin-top: 43px; } .main .partOne .search .search-top input { float: left; width: 474px; height: 100%; outline: none; border: none; padding-left: 7px; } .main .partOne .search .search-top .btn { float: left; font-size: 16px; color: #fff; background: #6F26BD; width: 58px; height: 44px; /* 文字在已知宽高盒子内居中 */ text-align: center; line-height: 44px; } .main .partOne .search .search-bottom { width: 536px; height: 17px; margin-left: 123px; } .main .partOne .search .search-bottom ul { overflow: hidden; } .main .partOne .search .search-bottom ul li { float: left; margin-left: 25px; } .main .partOne .search .search-bottom ul li:first-child { margin-left: 0; } .main .partOne .search .search-bottom ul li a { font-size: 12px; color: #999; } .main .partOne .search .search-bottom ul li a:hover{ color: red; text-decoration:underline; } .main .partOne .shopping-car { width: 142px; height: 100%; float: left; } .main .partOne .shopping-car .content { width: 90px; height: 21px; overflow: hidden; margin-top: 57px; margin-left: 52px; } .main .partOne .shopping-car img { width: 23px; height: 21px; float: left; } .main .partOne .shopping-car .object { font-size: 12px; color: #959595; float: left; margin-left: 6px; margin-top: 4px; } /* 第二部分 */ .main .partTwo .nav { width: 1084px; margin: 0 auto; height: 50px; position: relative; } .main .partTwo .nav ul { overflow: hidden; line-height: 50px; } .main .partTwo .nav ul li { float: left; padding: 0 41.5px; } .main .partTwo .nav ul li a { font-size: 14px; color: #606060; } .main .partTwo .nav ul li:first-child{ padding: 0 88.5px; background: #6F26BD; } .main .partTwo .nav ul li:first-child a { color: #fff; } .main .partTwo .nav ul li:hover{ background: #6F26BD; } .main .partTwo .nav ul li:hover a { color: #fff; } .main .partTwo .nav ul li:first-child:hover{ background: red; } .main .partTwo .nav ul li:first-child:hover a { color: #ff0; } .main .partTwo .nav .new { position: absolute; top: -5px; left: 478px; } .main .partTwo .nav .hot { position: absolute; top: -5px; left: 751px; } /* 轮播图 */ .main .partTwo .banner { width: 100%; height: 576px; position: relative; } .main .partTwo .banner img { width: 100%; height: 100%; } .main .partTwo .banner .dialog { width: 261px; height: 546px; /* a=>alpha 0~1 */ /* 16=>#fff f00 ff0 rgb=>255,255,255 */ /* background: rgb(red, green, blue); */ background: rgba(0, 0, 0,.4); color: #fff; position: absolute; top: 0; left: 217px; } .main .partTwo .banner .dialog .water { width: 260px; height: 87px; overflow: hidden; } .main .partTwo .banner .dialog .water .logo { width: 37px; height: 100%; float: left; } .main .partTwo .banner .dialog .water .logo img { width: 15px; height: 16px; margin-top: 17.5px; margin-left: 14px; } .main .partTwo .banner .dialog .water .word { width: 216px; height: 100%; float: left; border-bottom: 1px solid #fff; } .main .partTwo .banner .dialog .water .word .title { width: 193px; height: 22px; margin-top: 17.5px; margin-left: 5px; overflow: hidden; font-size: 16px; line-height: 22px; } .main .partTwo .banner .dialog .water .word .title:hover { color: #6F26BD; } .main .partTwo .banner .dialog .water .word .title div:first-child { float: left; } .main .partTwo .banner .dialog .water .word .title div:nth-child(2) { float: right; } .main .partTwo .banner .dialog .water .word .list { width: 193px; height: 18px; line-height: 18px; margin-top: 13px; margin-left: 5px; } .main .partTwo .banner .dialog .water .word .list ul { overflow: hidden; } .main .partTwo .banner .dialog .water .word .list ul li { float: left; } .main .partTwo .banner .dialog .water .word .list ul li a:hover { color: #6F26BD; } .main .partTwo .banner .dialog .water .word .list ul li a { font-size: 13px; color: #fff; } .main .partTwo .banner .dialog .water .word .list ul li:nth-child(even) { width: 1px; height: 10px; background: #fff; margin-top: 8px; } .main .partTwo .banner .dialog .water .word .list ul li:nth-child(odd) { padding: 0 4px; } .main .partThree .container { width: 1200px; height: 378px; margin: 0 auto; overflow: hidden; } .main .partThree .container .orders{ width: 590px; height: 315px; float: left; margin-top: 11px; } .main .partThree .container .orders .orders-top { width: 100%; height: 36px; border-bottom: 1px solid #6F26BD; } .main .partThree .container .orders .orders-top .tit{ width: 125px; height: 34px; font-size: 14px; color: #fff; background: #6F26BD; text-align: center; line-height: 34px; } .main .partThree .container .orders .orders-bottom { width: 100%; height: 260px; margin-top: 21px; } .main .partThree .container .orders .orders-bottom dl { width: 186px; height: 260px; float: left; margin-left: 10px; } .main .partThree .container .orders .orders-bottom dl:first-child { margin-left: 0; } .main .partThree .container .orders .orders-bottom dl dt img { width: 186px; height: 186px; } /* .main .partThree .container .orders .orders-bottom dl dd { margin-top: 12px; } */ .main .partThree .container .orders .orders-bottom dl dd p { font-size: 14px; color: #666; } .main .partThree .container .orders .orders-bottom dl dd p span { color: #FF4200; font-size: 12px; } .main .partThree .container .orders .orders-bottom dl dd .gift { width: 168px; height: 18px; margin-top: 6px; border:1px solid #A6A6A6; border-radius: 4px; overflow: hidden; } .main .partThree .container .orders .orders-bottom dl dd .gift .gift-left { width: 28px; height: 100%; background: #A6A6A6; border-radius: 4px; position: relative; margin-left: -1px; float: left; } .main .partThree .container .orders .orders-bottom dl dd .gift .gift-left img { width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; /* top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; */ } .main .partThree .container .orders .orders-bottom dl dd .gift .gift-right{ width: 139px; height: 100%; float: left; font-size: 13px; color: #A6A6A6; padding-left: 35px; /* text-align: center; */ line-height: 18px; } .main .partThree .container .orders{ margin-left: 20px; } .main .partThree .container .orders:first-child{ margin-left: 0; } .main .partFour { width: 100%; background: #eee; } .main .partFour .container { width: 1200px; margin: 0 auto; } .main .partFour .container .conFirst { width: 100%; height: 556px; } .main .partFour .container .conFirst .spa { width: 100%; height: 80px; padding: 10px; padding-top: 35px; overflow: hidden; } .main .partFour .container .conFirst .spa div:first-child { width: 533px; height: 3px; background: #D9D9D9; float: left; margin-left: -10px; } .main .partFour .container .conFirst .spa div:nth-child(2) { margin: -18px 13px 0 15px; float: left; } .main .partFour .container .conFirst .spa div:nth-child(2) p:first-child{ font-size: 26px; color: #E74079; } .main .partFour .container .conFirst .spa div:nth-child(2) p:nth-child(2){ font-size: 11px; color: #D6D6D6; margin-left: 23px; } .main .partFour .container .conFirst .spa div:last-child { width: 533px; height: 3px; background: #D9D9D9; float: left; margin-right: -8px; } .main .partFour .container .conFirst .list { width: 1200px; height: 476px; background: #fff; overflow: hidden; border-top: 1px solid #E74079 ; } .main .partFour .container .conFirst .list .new-hot { width: 118px; height: 100%; background: #fff; float: left; padding-top: 14.4px; } .main .partFour .container .conFirst .list .new-hot .tit { width: 59px; height: 20px; font-size: 14px; color: #000000; margin-left: 19.2px; } .main .partFour .container .conFirst .list .new-hot ul { margin-left: 19.2px; } .main .partFour .container .conFirst .list .new-hot ul li { padding: 3px 0; } .main .partFour .container .conFirst .list .new-hot ul li a { font-size: 12px; color: #000; } .main .partFour .container .conFirst .list .new-hot ul li:nth-child(2) a , .main .partFour .container .conFirst .list .new-hot ul li:nth-child(6) a { color:#E74079 ; } .main .partFour .container .conFirst .list .other { width: 194px; height: 100%; float: left; } .main .partFour .container .conFirst .list .other img { width: 100%; height: 100%; } .main .partFour .container .conFirst .list .vase { width: 397px; height: 100%; float: left; } .main .partFour .container .conFirst .list .vase .vase-top { width: 100%; height: 237px; border-bottom: 1px solid #E8E8E8; border-right: 1px solid #E8E8E8; overflow: hidden; } .main .partFour .container .conFirst .list .vase .vase-top p:first-child { width: 74px; height: 25px; font-size: 16px; color: #000; border-bottom: 1px solid #000; } .main .partFour .container .conFirst .list .vase .vase-top p:nth-child(2) { font-size: 20px; color: #FF4200; margin-top: 3px; float: left; } .main .partFour .container .conFirst .list .vase .vase-top span { font-size: 12px; color: #A6A6A6; text-decoration: line-through; float: left; margin-top: 9px; margin-left: 3px; } .main .partFour .container .conFirst .list .vase .vase-top .tit { width: 138px; height: 200px; margin-top: 80px; margin-left: 21px; float: left; } .main .partFour .container .conFirst .list .vase .vase-top img { width: 208px; height: 189px; float: left; margin-top: 22px; } .main .partFour .container .conFirst .list .vase .vase-bottom{ overflow: hidden; } .main .partFour .container .conFirst .list .vase .vase-bottom .vase-bottom-partOne { width: 198px; height: 238px; border-right: 1px solid #E8E8E8; padding: 48px 0 0 14px; float: left; } .main .partFour .container .conFirst .list .vase .vase-bottom .vase-bottom-partTwo { float: left; padding: 48px 0 0 14px; } .special { width: 164px; } .special dt { width: 164px; height: 106px; } .special dt img { width: 100%; height: 100%; } .special dd p:first-child { width: 48px; margin: 0 auto; font-size: 12px; color: #000; } .special dd p:nth-child(2) { width: 84px; margin: 0 auto; font-size: 16px; color: #FF4200; } .special dd p:nth-child(2) span { font-size: 12px; color: #A6A6A6; text-decoration: line-through; } .main .partFour .container .conFirst .list .tree { width: 199px; height: 100%; float: left; border-right: 1px solid #E8E8E8; } .main .partFour .container .conFirst .list .tree .treeTop{ width: 198px; height: 237px; padding: 48px 0 0 14px; border-bottom: 1px solid #E8E8E8; } .main .partFour .container .conFirst .list .tree .treeBottom { width: 198px; height: 237px; padding: 48px 0 0 14px; } .main .partFour .container .conFirst .list .flower { width: 292px; height: 100%; float: left; } .main .partFour .container .conFirst .list .flower .flower-top { width: 270px; height: 26px; border-bottom: 1px solid #E8E8E8; } .main .partFour .container .conFirst .list .flower .flower-top .tit { width: 72px; height: 26px; color: #E74079; font-size: 18px; border-bottom: 1px solid #E74079; margin-top: 18px; margin-left: 5.87px; } .main .partFour .container .conFirst .list .flower .flower-bottom { margin-left: 6px; overflow: hidden; height: 100%; } .main .partFour .container .conFirst .list .flower .flower-bottom .team { width: 131px; height: 66px; float: left; margin-top: 32px; } .main .partFour .container .conFirst .list .flower .flower-bottom .team:nth-child(even) { margin-left: 3px; } .main .partFour .container .conFirst .list .flower .flower-bottom .team img { width: 84px; height: 23px; margin: 0 auto; } .main .partFour .container .conFirst .list .flower .flower-bottom .team .water { width: 131px; height: 22px; font-size: 12px; color: #8D8D8D; text-align: center; line-height: 22px; background: #EDEDED; margin-top: 23px; } .main .partFour .container .end-Logo { width: 100%; height: 76px; } .main .partFour .container .end-Logo .picture { width: 129px; height: 36px; margin: 30px auto; } .main .partFour .container .end-Logo .picture img { width: 100%; height: 100%; } /* 页尾代码 */ .footer { width: 100%; height: 500px; background: #0f0; }