* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } /* 头部排版 */ #header { width: 100%; height: 72px; /* border-bottom: 2px solid #000; */ box-shadow: 0px 2px 16px rgba(220, 220, 220, 0.5); } #header .container { width: 1200px; height: 100%; margin: 0 auto; } #header .container .left { width: 333px; height: 100%; float: left; line-height: 72px; } #header .container .left img { width: 92px; height: 42px; float: left; margin-top: 15px; } #header .container .left .address { width: 62px; height: 100%; float: left; margin-left: 54px; } #header .container .left .address .iconfont { font-size: 14px; float: left; } #header .container .left .address .city { font-size: 16px; color: #2d2d2d; float: left; margin-left: 3px; } #header .container .left .address img { width: 9px; height: 6px; float: left; margin-left: 3px; margin-top: 34px; } #header .container .left .nav { width: 100px; height: 100%; float: left; margin-left: 24px; } #header .container .left .nav a { font-size: 16px; color: #000; } #header .container .left .nav a:nth-child(1) { color: #ff1268; } #header .container .left .nav a:nth-child(2) { margin-left: 12px; } #header .container .left .nav a:nth-child(2):hover { color: #ff1268; } #header .container .right { width: 586px; height: 100%; float: right; } #header .container .right .search { width: 401px; height: 46px; background: #f8f8f8; margin-top: 13px; border-radius: 30px; float: left; } #header .container .right .search .logo { float: left; margin-left: 19px; margin-top: 11px; } #header .container .right .search .logo img { width: 17px; height: 18px; } #header .container .right .search input { float: left; width: 283px; height: 100%; border: none; padding: 0 13px; font-size: 16px; outline: none; background: #f8f8f8; } #header .container .right .search .btn { float: left; width: 82px; height: 100%; color: #fff; font-size: 16px; text-align: center; line-height: 46px; background-color: #ff1268; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } #header .container .right .user { width: 164px; height: 100%; float: right; line-height: 72px; color: #000; font-size: 16px; } #header .container .right .user .my { float: left; margin-left: 33px; } #header .container .right .user .download { float: right; } #header .container .right .user .my span:nth-child(2):hover, .download span:nth-child(2):hover { color: #ff1268; } /* 主体样式 */ #main { width: 100%; height: auto; } #main .container { width: 1200px; height: 1800px; margin: 0 auto; } #main .container .banner { width: 100%; height: 320px; } #main .container .type { width: 100%; height: 118px; margin-top: 15px; border: 1px solid #ebebeb; /* background: #fff; */ } #main .container .type ul { overflow: hidden; } #main .container .type ul li { width: 119.8px; height: 72px; float: left; margin-top: 25px; text-align: center; } #main .container .type ul li div { width: 48px; height: 48px; margin: 0 auto; } #main .container .type ul li:nth-child(1) div { background: url("./images/type.png") 96px -8px; background-size: cover; } #main .container .type ul li:nth-child(2) div { background: url("./images/type.png") 96px -72px; background-size: cover; } #main .container .type ul li:nth-child(3) div { background: url("./images/type.png") 96px -131px; background-size: cover; } #main .container .type ul li:nth-child(4) div { background: url("./images/type.png") 96px -191px; background-size: cover; } #main .container .type ul li:nth-child(5) div { background: url("./images/type.png") 96px -247px; background-size: cover; } #main .container .type ul li:nth-child(6) div { background: url("./images/type.png") 96px -305px; background-size: cover; } #main .container .type ul li:nth-child(7) div { background: url("./images/type.png") 96px -364px; background-size: cover; } #main .container .type ul li:nth-child(8) div { background: url("./images/type.png") 96px -425px; background-size: cover; } #main .container .type ul li:nth-child(9) div { background: url("./images/type.png") 96px -483px; background-size: cover; } #main .container .type ul li:nth-child(10) div { background: url("./images/type.png") 96px -540px; background-size: cover; } #main .container .type ul li a { color: #000; font-size: 16px; } #main .container .type ul li a:hover { color: #ff1268; } #main .container .concert { width: 100%; height: 457px; margin-top: 15px; border: 1px solid #ebebeb; } #main .container .concert .content{ width: 1160px; margin: 10px auto 0; } #main .container .concert .content .top { width: 100%; height: 40px; line-height: 40px; } #main .container .concert .content .top .title { float: left; font-size: 24px; color: #111; } #main .container .concert .content .top .more { float: right; font-size: 14px; color: #9B9B9B; } #main .container .concert .content .top .more:hover { color: #ff1268; } #main .container .concert .content .bottom { width: 100%; height: 360px; margin-top: 15px; } #main .container .concert .content .bottom .left { width: 270px; height: 360px; float: left; } #main .container .concert .content .bottom .left img { width: 100%; height: 100%; } #main .container .concert .content .bottom .right { width: 870px; height: 100%; float: right; } #main .container .concert .content .bottom .right .listItems { width: 273px; height: 160px; float: left; margin-left: 25px; } #main .container .concert .content .bottom .right .listItems:nth-child(1){ margin-left: 0; } #main .container .concert .content .bottom .right .listItems:nth-child(4){ margin-left: 0; margin-top: 40px; } #main .container .concert .content .bottom .right .listItems:nth-child(5){ margin-top: 40px; } #main .container .concert .content .bottom .right .listItems:nth-child(6){ margin-top: 40px; } #main .container .concert .content .bottom .right .listItems .pictures { width: 120px; height: 160px; float: left; } #main .container .concert .content .bottom .right .listItems .pictures img { width: 100%; height: 100%; } #main .container .concert .content .bottom .right .listItems .word { width: 138px; height: 160px; float: right; } #main .container .concert .content .bottom .right .listItems .word .tips { font-size: 14px; color: #4a4a4a; line-height: 20px; /* 强制不换行 */ /* white-space: nowrap; */ /* 溢出隐藏 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #main .container .concert .content .bottom .right .listItems .word .tips:hover { color: #FF1268; } #main .container .concert .content .bottom .right .listItems .word .desc { margin-top: 14px; font-size: 12px; color: #9B9B9B; } #main .container .concert .content .bottom .right .listItems .word .desc:hover { color: #FF1268; } #main .container .concert .content .bottom .right .listItems .word .date { margin-top: 4px; font-size: 12px; color: #9B9B9B; } #main .container .concert .content .bottom .right .listItems .word .date:hover { color: #FF1268; } #main .container .concert .content .bottom .right .listItems .word .price { margin-top: 40px; font-size: 16px; color: #FF1268; } #main .container .concert .content .bottom .right .listItems .word .price span { font-size: 12px; }