VIP32/html+css/day6/demo.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
/* 主体给宽不给高 */
#box {
    width: 100%;
}
/* 头部 */
#box #header {
    width: 100%;
    height: 72px;
}
#header .container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
#header .container .left {
    width: 92px;
    height: 42px;
    float: left;
}
#header .container .left img {
    width: 100%;
    height: 100%;
    margin-top: 14px;
}
#header .container .mid {
    width: 189px;
    height: 100%;
    float: left;
    overflow: hidden;
    margin-left: 94px;
}
#header .container .mid .address {
    width: 68px;
    height: 25px;
    float: left;
    margin-top: 18px;
}
#header .container .mid .address .picture1 {
    font-size: 15px;
}
#header .container .mid .address .picture2 {
    font-size: 9px;
    margin-left: -6px;
}
#header .container .mid .address .city {
    font-size: 16px;
    margin-left: -5px;
}
#header .container .mid .nav {
    width: 100px;
    height: 100%;
    float: right;
}
#header .container .mid .nav ul{
    overflow: hidden;
    margin-left: 18px;
    margin-top: 18px;
}
#header .container .mid .nav ul li{
    float: left;
}
#header .container .mid .nav ul li a {
    font-size: 16px;
    color: #000;
}
#header .container .mid .nav ul li:first-child a {
    color: #FF1268;
}
#header .container .mid .nav ul li:last-child {
    margin-left: 15px;
}
#header .container .mid .nav ul li a:hover {
    color: #FF1268;
}
#header .container .right {
    width: 627px;
    height: 100%;
    float: right;
    overflow: hidden;
}
#header .container .right .search {
    width: 431px;
    height: 46px;
    float: left;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 20px;
    margin-top: 13px;
}
#header .container .right .search img {
    width: 17px;
    height: 18px;
    float: left;
    margin-left: 20px;
    margin-top: 15px;
}

#header .container .right .search input {
    width: 319px;
    height: 46px;
    border: none;
    outline: none;
    float: left;
    margin-left: 9px;
    background: #f8f8f8;
}

#header .container .right .search .btn {
    width: 66px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    float: left;
    font-size: 16px;
    color: #fff;
    background: #FF1268;
}
#header .container .right .login {
    width: 62px;
    height: 72px;
    float: left;
    overflow: hidden;
    margin-left: 44px;
}
#header .container .right .login .picture {
    font-size: 26px;
    float: left;
    display: block;
    margin-top: 22px;
}
#header .container .right .login span:last-child {
    font-size: 15px;
    float: left;
    display: block;
    margin-top: 25px;
    margin-left: 6px;
}
#header .container .right .downLoad {
    width: 62px;
    height: 72px;
    float: right;
    overflow: hidden;
}
#header .container .right .downLoad .picture {
    font-size: 26px;
    float: left;
    display: block;
    margin-top: 22px;
}
#header .container .right .downLoad span:last-child {
    font-size: 15px;
    float: left;
    display: block;
    margin-top: 25px;
    margin-left: 6px;
}
/* 主体 */
#main .container {
    width: 1200px;
    margin: 0 auto;
}
#main .container .banner {
    width: 100%;
    height: 320px;
}
#main .container .banner img {
    width: 100%;
    height: 100%;
}
#main .container .list {
    width: 1200px;
    height: 118px;
    border: 1px solid #ccc;
    margin-top: 17px;
    overflow: hidden;
    padding-top: 29px;
}
#main .container .list .listItem {
    width: 119px;
    height: 69px;
    float: left;
}
#main .container .list .listItem .word {
    font-size: 16px;
    width: 100%;
    text-align: center;
}
#main .container .list .listItem .word:hover {
    color: #FF1268;
}
#main .container .list .listItem .picture {
    margin: 0 auto;
}
#main .container .list .listItem:nth-child(1) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px 0px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(2) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -68px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(3) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -128px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(4) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -187px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(5) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -242px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(6) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -300px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(7) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -360px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(8) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -424px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(9) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -481px;
    background-size: cover;
}
#main .container .list .listItem:nth-child(10) .picture {
    width: 48px;
    height: 48px;
    background: url("./images/picture.png");
    background-position: 0px -540px;
    background-size: cover;
}
#main .container .shop1 {
    width: 100%;
    height: 457px;
    border: 1px solid #f00;
    margin-top: 12px;
}
#main .container .shop2 {
    width: 100%;
    height: 457px;
    border: 1px solid #f00;
    margin-top: 12px;
}
#main .container .shop3 {
    width: 100%;
    height: 457px;
    border: 1px solid #f00;
    margin-top: 12px;
}
#main .container .shop4 {
    width: 100%;
    height: 457px;
    border: 1px solid #f00;
    margin-top: 12px;
    margin-bottom: 66px;
}
/* 页尾 */
#footer {
    width: 100%;
    height: 350px;
    background: #f8f8f8;
}
#footer .container {
    width: 1200px;
    height: 100%;
    background: #0f0;
    margin: 0 auto;
}