* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } #header .container { width: 1260px; height: 75px; margin: 0 auto; } #header .container .left { width: 542px; height: 100%; float: left; } #header .container .left .logo { width: 149px; height: 45px; background: url("./images/1.png"); float: left; margin-top: 15px; background-position: 218px 185px; } #header .container .left .nav { width: 323px; height: 100%; float: right; position: relative; } #header .container .left .nav ul { line-height: 75px; } #header .container .left .nav ul li { float: left; margin-left: 33px; } #header .container .left .nav ul li:first-child { margin-left: 0; } #header .container .left .nav ul li a { color: #333; } #header .container .left .nav ul li:first-child a { color: #31CCFF; } #header .container .left .nav ul li:hover a { color: #31CCFF; } #header .container .left .nav .beta { width: 39px; height: 16px; font-size: 12px; text-align: center; line-height: 16px; color: #999; background: #F5F7F9; position: absolute; right: -37px; top: 15px; border-radius: 8px; border: 1px solid #ddd; } #header .container .right { width: 100px; height: 100%; float: right; margin-right: 10px; } #header .container .right .btn { width: 100%; height: 38px; color: #fff; line-height: 38px; text-align: center; border-radius: 3px; background: #1ebcf0; margin-top: 18px; border: 1px solid #1ebcf0; } #header .container .right .btn:hover { background: #31CCFF; } #main .banner { width: 100%; height: 482px; background: url("./images/2.jpg"); background-repeat: no-repeat; background-position: center; } #main .banner .container { width: 1260px; height: 482px; margin: 0 auto; position: relative; } #main .banner .container .search { width: 692px; height: 58px; background: rgba(0,0,0,.15); position: absolute; top: 218px; left: 281px; padding: 4px 3px; border-radius: 3px; } #main .banner .container .search input { width: 588px; height: 50px; float: left; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border: 1px solid #adadad; outline: none; padding-left: 20px; } #main .banner .container .search img { width: 97px; height: 50px; float: left; } #main .list { width: 100%; height: 388px; margin-top: 57px; } #main .list .container { width: 1260px; height: 100%; margin: 0 auto; padding-top: 45px; } #main .list .container .listItem { float: left; margin-left: 33px; } #main .list .container .listItem:first-child { margin-left: 0; } #main .list .container .listItem .pictures { width: 290px; height: 200px; position: relative; } #main .list .container .listItem .pictures img{ width: 100%; height: 100%; } #main .list .container .listItem .pictures .spring { width: 100%; height: 50px; text-align: center; line-height: 50px; color: #fff; background-color: rgba(0,0,0,.5); position: absolute; left: 0; top: 150px; display: none; } #main .list .container .listItem .pictures:hover .spring { display: block; } #main .list .container .listItem { width: 290px; /* position: relative; */ } #main .list .container .listItem .title { margin-top: 38px; width: 290px; height: 48px; } #main .list .container .listItem .title .titleBall,#main .list .container .listItem .title .titleWall { width: 140px; height: 48px; border-radius: 2px; border: 1px solid #dfdfdf; text-align: center; line-height: 48px; font-size: 14px; color: #666; float: left; } #main .list .container .listItem .title .titleWall { float: right; } #main .list .container .listItem .title .titleWall:hover { color: #31CCFF; } #main .list .container .listItem .title .titleBall:hover { color: #31CCFF; } #main .nav { width: 100%; height: 608px; background: aqua; }