* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } #box { width: 1189px; height: 793px; margin: 0 auto; padding-left: 24px; border: 1px solid #ccc; } /* 头部样式 */ #header { width: 100%; height: 73px; overflow: hidden; } #header .logo { width: 124px; height: 100%; float: left; } #header .logo img { width: 127px; height: 36px; margin-top: 20px; } #header .search { width: 480px; height: 100%; float: left; overflow: hidden; margin-left: 224px; padding-top: 20px; } #header .search input { width: 369px; height: 32px; float: left; outline: none; border-radius: 20px; border: 1px solid #ccc; background: #fdfdfd; padding-left: 10px; font-size: 14px; } #header .search .btn { width: 102px; height: 32px; float: left; color: #fff; border-radius: 20px; text-align: center; line-height: 32px; font-size: 16px; background: rgb(52, 114, 229); } #header .tips { width: 110px; height: 100%; float: right; margin-right: 16px; overflow: hidden; padding-top: 20px; } #header .tips .star { width: 25px; height: 27px; float: left; } #header .tips .message { width: 20px; height: 20px; float: left; margin-top: 4px; margin-left: 12px; } #header .tips .login { width: 35px; height: 30px; float: left; margin-left: 12px; background: #eee; font-size: 13px; text-align: center; line-height: 30px; color: rgb(52, 114, 229); } /* 内容样式 */ #main { width: 100%; height: 575px; } #main .nav { width: 100%; height: 45px; line-height: 45px; background: rgb(52, 114, 229); } #main .nav ul { overflow: hidden; } #main .nav ul li { float: left; margin-left: 30px; } #main .nav ul li a{ color: #fff; font-size: 17px; } #main .nav ul li:hover a { color: red; } #main .variety { width: 100%; height: 297px; } #main .variety .top{ width: 100%; height: 65px; overflow: hidden; border-bottom: 1px solid #ccc; } #main .variety .top .left{ width: 282px; height: 100%; float: left; } #main .variety .top .left ul { overflow: hidden; margin-top: 16px; } #main .variety .top .left ul li { float: left; margin-left: 33px; padding: 10px 0; } #main .variety .top .left ul li a { color: #000; } #main .variety .top .left ul li:first-child { border-bottom: 2px solid rgb(52, 114, 229); } #main .variety .top .left ul li:first-child a { color: rgb(52, 114, 229); } #main .variety .top .left ul li:hover { border-bottom: 2px solid rgb(52, 114, 229); } #main .variety .top .left ul li:hover a { color: rgb(52, 114, 229); } #main .variety .top .left ul li:first-child { margin-left: 0; } #main .variety .top .right{ width: 220px; height: 100%; float: right; } #main .variety .top .right .word { width: 220px; height: 20px; line-height: 20px; margin-top: 32px; } #main .variety .top .right .word span { margin-left: 14px; } #main .variety .top .right .word span a { font-size: 13px; color: #575555; } #main .variety .top .right .word span a:hover { color: #f00; } #main .variety .bottom { width: 100%; height: 232px; padding-top: 27px; overflow: hidden; } #main .variety .bottom .left{ width: 365px; height: 205px; float: left; } #main .variety .bottom .left img { border-radius: 4px; } #main .variety .bottom .right{ width: 762px; height: 205px; float: right; overflow: hidden; } #main .variety .bottom .right .mode1{ width: 176px; height: 205px; border: 1px solid #ccc; float: left; margin-left: 19.3px; border-top-left-radius: 4px; border-top-right-radius: 4px; } #main .variety .bottom .right .mode1:first-child { margin-left: 0px; } #main .variety .bottom .right .mode1 img { width: 174px; height: 100px; border-top-left-radius: 4px; border-top-right-radius: 4px; } #main .variety .bottom .right .mode1 p:nth-child(2) { font-size: 18px; margin-left: 7px; } #main .variety .bottom .right .mode1 p:nth-child(3) { font-size: 12px; margin-top: 7px; margin-left: 7px; color: #979494; } #main .variety .bottom .right .mode1 p:nth-child(4) { font-size: 11px; color: #ccc; margin-top: 25px; margin-left: 7px; }