* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } .box { width: 1000px; height: 892px; margin: 0 auto; border:1px solid #000; } .contain { width: 958px; height: 100%; margin: 0 auto; padding-top: 20px; } #header { width: 100%; height: 55px; border-bottom: 2px solid #f00; } #header-left { width: 125px; height: 45px; float: left; } #header-left img { width: 100%; height: 100%; } #header-right { width: 561px; height: 40px; float: right; } #header-right #picture1 { width: 430px; height: 40px; } #header-right #picture2 { width: 123px; height: 36px; margin-left: 2px; } #main { width: 100%; height: 700px; padding-top: 15px; /* background: pink; */ } #part1 { width: 100%; height: 40px; background: #fff; } #part1 .list { width: 150px; height: 40px; float: left; border-right: 1px solid #ccc; } #part1 .list ul { overflow: hidden; height: 20px; /* 行间距 让文字在已知高度盒子内垂直居中 则行间距值为当前盒子高度 */ line-height: 20px; } #part1 .list ul li { float: left; margin-left: 8px; } #part1 .list:first-child li:first-child { margin-left: 0; } #part1 .list ul li a{ color: #000; font-size: 12px; } #part1 .list ul li a:hover { color: red; } #part1 .list1 { width: 127px; height: 40px; float: left; border-right: 1px solid #ccc; } #part1 .list1 ul { overflow: hidden; height: 20px; /* 行间距 让文字在已知高度盒子内垂直居中 则行间距值为当前盒子高度 */ line-height: 20px; } #part1 .list1 ul li { float: left; margin-left: 8px; } #part1 .list1 ul li a{ color: #000; font-size: 12px; } #part1 .list1 ul li a:hover { color: red; } #part2 { width: 100%; height: 97px; margin-top: 20px; background: url('./images/4.png') no-repeat center center; background-size: cover; } #part3 { overflow: hidden; margin-top: 22px; } #part3 .left { width: 632px; height: 464px; float: left; border-top: 1px solid #eee; overflow: hidden; } #part3 .left .music { width: 210px; height: 453px; float: left; } #part3 .left .music .tip1 { width: 100%; height: 40px; } #part3 .left .music .tip1 ul { overflow: hidden; height: 100%; line-height: 40px; } #part3 .left .music .tip1 ul li { width: 105px; height: 100%; float: left; } #part3 .left .music .tip1 ul li a { font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } #part3 .left .music .tip1 ul li:first-child { border-top: 2px solid #f00; } #part3 .left .music .tip1 ul li:first-child a { font-size: 26px; font-weight: bold; } #part3 .left .music .tip1 ul li img{ width: 24px; height: 24px; } #part3 .left .music .tip2 { width: 202px; height: 172px; margin-top: 28px; } #part3 .left .music .tip2 dt { width: 202px; height: 126px; } #part3 .left .music .tip2 dt img { width: 100%; height: 100%; } #part3 .left .music .tip2 dd { width: 187px; height: 37px; font-size: 14px; } #part3 .left .message { float: right; } #part3 .left .message #star { width: 398px; height: 20px; margin-top: 20px; color: #ccc; font-size: 13px; /* 文本水平位置 */ text-align: right; line-height: 20px; } #part3 .left .message #together { width: 384px; height: 182px; margin-top: 30px; } #part3 .left .message #together ul li{ overflow: hidden; line-height: 30px; } #part3 .left .message #together ul li:first-child a { font-weight: bold; } #part3 .left .message #together ul li span { display: block; width: 5px; height: 5px; background: #ccc; border-radius: 50%; float: left; margin-top: 15px; } #part3 .left .message #together ul li a { color: #000; font-size: 16px; float: left; margin-left: 5px; } #part3 .left .message #together ul li:hover a { color: red; } #part3 .left .message #together ul li:hover span { background: #f00; } #part3 .right { width: 302px; height: 478px; float: right; background: rgb(87, 215, 232); } #footer { width: 100%; height: 114px; background: plum; }