VIP30/day6/demo/demo.css

* {
    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: 319px;
}
.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;
}