* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } /* 主体 给宽不给高 */ #box { width: 100%; height: auto; } /* 头部 */ #header { width: 100%; height: 75px; } #header .container { width: 1260px; height: 100%; /* 已知宽高盒子居中 */ margin: 0 auto; overflow: hidden; } #header .container .partOne { width: 149px; height: 43px; float: left; margin-top: 14px; background: url(./images/logo.png); background-position: 219px -4px; } #header .container .partTwo { width: 351px; height: 75px; float: left; margin-left: 65px; line-height: 75px; position: relative; } #header .container .partTwo ul { overflow: hidden; } #header .container .partTwo ul li { float: left; margin-left: 30px; } #header .container .partTwo ul li:first-child { margin-left: 0; } #header .container .partTwo ul li a { font-size: 16px; color: #000000; } #header .container .partTwo ul li:first-child a { color: #31ccff; } #header .container .partTwo ul li a:hover { color: #31ccff; } /* 定位图标 */ #header .container .partTwo .btn { width: 37px; height: 14px; background-color: #f5f7f9; border-radius: 8px; border: solid 1px #dddddd; text-align: center; line-height: 13px; position: absolute; top: 12px; right: 7px; font-size: 12px; color: #999999; } #header .container .partThree { width: 102px; height: 38px; color: #fff; background: #1ebcf0; float: right; margin-top: 17px; font-size: 16px; text-align: center; line-height: 38px; border-radius: 4px; /* opacity: 0; */ /* 元素消失 彻底将元素从页面中删除 display:none */ /* display: none; */ /* 显示元素 */ /* display: block; */ } #header .container .partThree:hover { background: #31ccff; /* opacity: 1; */ } /* 主体 */ #main { width: 100%; height: auto; } #main .partOne { width: 100%; height: 482px; background: url("./images/banner.jpg"); position: relative; } #main .partOne .search { width: 692px; height: 58px; overflow: hidden; position: absolute; top: 218px; left: 616px; border-radius: 4px; background: rgba(0, 0, 0, 0.2); } #main .partOne .search input { width: 583px; height: 50px; outline: none; float: left; border: 1px solid #ccc; padding-left: 20px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; margin-left: 6px; margin-top: 4px; } #main .partOne .search img { width: 98px; height: 50px; float: left; margin-top: 4px; } #main .partTwo { width: 1300px; height: 300px; margin: 0 auto; margin-top: 110px; overflow: hidden; margin-bottom: 40px; } #main .partTwo dl { width: 290px; height: 200px; float: left; margin-left: 30px; position: relative; } #main .partTwo dl .partTwo-one { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: #fff; line-height: 50px; opacity: 0; } #main .partTwo dl .partTwo-one:hover { opacity: 1; } #main .partTwo dl dd { margin: 40px 0 0 0; overflow: hidden; } #main .partTwo dl dd p { width: 122px; height: 36px; border: 1px solid #dfdfdf; float: left; font-size: 14px; text-align: center; line-height: 36px; } #main .partTwo dl dd p:hover { color: #31ccff; } #main .partTwo dl dd .news { float: left; } #main .partTwo dl dd .vase { float: right; } #main .partThree { width: 100%; height: 608px; background: #eee; } #main .partThree .list { width: 1260px; height: auto; margin: 0 auto; padding-top: 60px; } #main .partThree .pTone { width: 1260px; height: 420px; overflow: hidden; } #main .partThree .pTone .report { float: left; } #main .partThree .pTtwo { width: 936px; height: 420px; float: right; } #main .partThree .pTtwo img { margin-left: 27px; } #main .partThree .pTtwo img:nth-child(1) { margin-left: 0; } #main .partThree .pTtwo img:nth-child(4) { margin-left: 0; margin-top: 15px; } #main .partThree .rest { width: 1260px; margin: 40px 0; height: 48px; } #main .partThree .rest ul { overflow: hidden; } #main .partThree .rest ul li{ float: left; width: 140px; height: 48px; border: 1px solid #dfdfdf; text-align: center; line-height: 48px; font-size: 14px; background: #fff; margin-left: 20px; border-radius: 4px; } #main .partThree .rest ul li:first-child { margin-left: 0; } #main .partThree .rest ul li a { color: #000; } #main .partThree .rest ul li a:hover { color: #31ccff; }