* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } /* 主体给宽不给高 */ #contain { width: 100%; } /* 头部样式 */ #header { width: 1260px; height: 75px; margin: 0 auto; overflow: hidden; } #header .logo { width: 149px; height: 45px; float: left; margin-top: 18px; background: url("../images/soso.png"); background-position: -207px 0px } #header .nav { width: 352px; height: 75px; float: left; margin-left: 70px; line-height: 75px; position: relative; } #header .nav ul { overflow: hidden; } #header .nav ul li { float: left; margin-left: 33px; } #header .nav ul li:first-child { margin-left: 0; } #header .nav ul li:first-child a { color: #31ccff; } #header .nav ul li a { color: #000; font-size: 16px; } #header .nav ul li a:hover { color:#31ccff; } #header .nav .btn { width: 37px; height: 14px; color: #999999; background-color: #f5f7f9; border-radius: 8px; border: solid 1px #dddddd; text-align: center; line-height: 13px; font-size: 12px; position: absolute; top: 10px; right: 2px; } #header .login { width: 102px; height: 38px; float: right; margin-right: 10px; margin-top: 18px; border-radius: 3px; color: #fff; text-align: center; line-height: 38px; font-size: 16px; background: #1ebcf0; } #main { width: 100%; } #main .banner { width: 1920px; height: 482px; margin: 0 auto; } #main .banner .site { width: 1260px; height: 100%; margin: -488px auto 0; position: relative; /* 开启定位后 */ z-index: 9; /* z-index: 999; */ } #main .banner img { width: 1920px; height: 100%; } #main .banner .search { width: 692px; height: 58px; background: rgba(0,0,0,.2); overflow: hidden; position: absolute; top: 221px; left: 288px; /* margin: 0 auto; */ padding:4px 2.5px; border-radius: 3px; } #main .banner .search input{ width: 588px; height: 50px; float: left; font-size: 14px; padding: 10px; outline: none; border: 1px solid #adadad; border-top-left-radius: 3px; border-bottom-left-radius: 3px; /* background: #f00; */ } #main .banner .search img{ width: 98px; height: 50px; float: left; /* background: #f00; */ } #main .card { width: 1260px; height: 450px; margin: 0 auto; overflow: hidden; padding-top: 108px; } #main .card .news { width: 290px; height: 100%; float: left; margin-left: 33px; position: relative; } #main .card .news:first-child { margin-left: 0; } #main .card dl { width: 290px; height: 250px; } #main .card dl dt{ width: 290px; height: 200px; } #main .card dl dt img { width: 100%; height: 100%; } #main .card dl dd { overflow: hidden; margin-top: 37px; } #main .card dl dd p { width: 140px; height: 48px; color: #666; font-size: 12px; float: left; border:1px solid #dfdfdf; text-align: center; line-height: 48px; } #main .card dl dd p:last-child { float: right; } #main .card dl dd p:hover { color: #31ccff; } #main .card .news .title { width: 100%; height: 50px; color: #fff; text-align: center; line-height: 50px; font-size: 16px; position: absolute; top:151px; left: 0; display: none; background: rgba(0,0,0,.4); } #main .card .news dl dt:hover .title { display: block; } #main .area { width: 100%; height: 500px; background: #ff0; } #main .area .contain { width: 1260px; height: 100%; background: #00f; margin: 0 auto; }