Web1020/1_html+css/包图网/demo.css

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
#header {
  width: 100%;
  height: 35px;
  background: #EEEEEE;
}
#header .con {
  width: 1087px;
  height: 100%;
  margin: 0 auto;
}
#header .con .part1 {
  width: 150px;
  height: 100%;
  float: left;
  font-family: Helvetica;
  font-size: 12px;
  color: #888888;
  font-weight: 400;
  line-height: 35px;
}

#header .con .part2 {
    float: left;
    width: 65px;
    font-size: 12px;
    height: 100%;
    line-height: 35px;
    margin-left: 25px;
}
#header .con .part2 ul li {
    float: left;
    color: #888888;
}
#header .con .part2 ul li:nth-child(2) {
    width: 1px;
    height: 10px;
    background: #888888;
    margin-top: 13px;
    margin-left: 4px;
}
#header .con .part2 ul li:last-child {
    color: #6F26BD;
    margin-left: 4px;
}
#header .con .part3 {
    width: 269px;
    height: 35px;
    line-height: 35px;
    float: right;
    margin-right: 60px;
}

#header .con .part3 ul li {
    float: left;
    font-size: 12px;
    color: #888;
}
#header .con .part3 ul li:nth-child(3) {
    color: #6F26BD;
    /* margin-left: 4px; */
}
#header .con .part3 ul li:nth-child(even) {
    width: 1px;
    height: 10px;
    background: #888;
    margin-top: 13px;
    /* margin-left: 3px; */
}
#header .con .part3 ul li{
    margin-left: 6px;
}
#header .con .part3 ul li:first-child {
    margin-left: 0;
}
#main .search {
    width: 1089px;
    height: 76px;
    margin: 0 auto;
    margin-top: 44px;
    position: relative;
}
#main .search .logo {
    width: 176px;
    height: 49px;
    float: left;
    background: url("./images/LOGO.png");
}
#main .search .inp {
    width: 540px;
    height: 44px;
    float: left;
    margin-left: 123px;
    border: 2px solid #6F26BD;
}
/* 474 62 */
#main .search .inp input {
    width: 474px;
    height: 100%;
    float: left;
    color: #888;
    font-size: 14px;
    padding: 18px;
}

#main .search .inp .btn {
    width: 62px;
    height: 100%;
    float: left;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 44px;
    background: #6F26BD;
}
#main  .tip {
    width: 540px;
    height: 17px;
    font-size: 12px;
    position: absolute;
    top: 57px;
    left: 300px;
}
#main  .tip ul li {
    float: left;
    color: #999999;
    margin-left: 25px;
}

#main  .tip ul li:first-child {
    margin-left: 0;
}
#main .shop {
    width: 90px;
    height: 21px;
    float: left;
    margin-top: 15px;
    margin-left: 52px;
}
#main .shop img {
    width: 23px;
    height: 21px;
    float: left;
}
#main .shop .word {
    float: left;
    font-size: 12px;
    color: #959595;
    margin-top: 7px;
    margin-left: 6px;
}
#main .allList {
    width: 1089px;
    height: 50px;
    position: relative;
    margin: 36.2px auto 0;
}
#main .allList ul li {
    float: left;
    font-size: 14px;
    padding: 15px 40px;

}
#main .allList ul li:first-child {
    padding: 0;
    width: 260px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
#main .allList ul li:hover {
    background: #6F26BD;
    color: #fff;
}
#main .allList ul li:first-child {
    background: #6F26BD;
    color: #fff;
}
#main .allList .news {
    position: absolute;
    top: -4px;
    left: 420px;
}
#main .allList .hot {
    position: absolute;
    top: -4px;
    left: 724px;
}
#main .banner {
    width: 100%;
    height: 576px;
    background: #f00;
    background: url("./images/banner.png") no-repeat center;
}

#main .banner .con {
    width: 1089px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    /* background: #ff0; */
}
/* #main .banner img {
    display: block;
    width: 1920px;
    height: 576px;
    margin: 0 auto;
} */

#main .banner .dialog {
    width: 260px;
    height: 546px;
    opacity: 0.4;
    position: absolute;
    top: 0px;
    left: 0;
    background: #000000;
}
 
    /* position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -960px;
    margin-top: -288px; */