*{ margin:0; padding:0; } body{ min-width: 1200px; } img{ object-fit: cover; } .wrapper{ width: 1200px; margin: 0 auto; } .top{ margin: 25px 0; } .top .wrapper{ display: flex; align-items: center; justify-content: space-between; } .top .logo{ margin-left: 10px; margin-top: 29px; width: 445px; height: 64px; } .top .search{ margin-right: 20px; margin-top: 44px; width: 262px; height: 35px; background: #ffffff; border-radius: 20px 20px 20px 20px; border: 1px solid #bbbbbb; } .top .search img{ margin-left: 226px; margin-top: 7px; } /*导航栏*/ .nav { width: 1200px; height: 60px; margin: 0 auto; position: relative; border-top: 1px solid #d4d4d4; background-color: #ffffff; z-index:10; } .nav ul { list-style-type: none; } .nav ul li { float: left; position: relative; } .nav ul li a { width: 120px; height: 39px; display: block; line-height: 50px; text-align: center; text-decoration: none; color: #707070; font-size: 17px; padding-top: 8px; } .nav ul li a:hover { width: 120px; height: 39px; display: block; color: #002865; } .nav ul li ul { margin: 0; padding-top: 12px; display: none; } .nav ul li ul li { float: none; } .nav ul li:hover ul { display: block; float: none; position: absolute; } .nav ul li ul li a { display: block; background-color: #ffffff; color: #707070; width: 120px; height: 40px; font-size: 14px; line-height: 57px; display: flex; align-items: center; justify-content: center; } .nav ul li ul li a:hover { display: block; width: 120px; height: 40px; display: block; color: #002865; background-color: #edf4f9; display: flex; align-items: center; justify-content: center; } /*轮播图*/ .lbt li{ list-style: none; } .lbt{ position: relative; overflow: hidden; /* margin:100px auto; */ /*width: 1400px;*/ height: 600px; margin: 0 auto; } .lbt img{ width: 1400px; height: 600px; } .lbt .pic{ width: 600%; position: relative; } .pic li{ float: left; } .lis{ position: absolute; bottom: 15px; left: 50%; margin-left: -35px; } .lis li{ float: left; width:17px; height: 17px; margin: 5px; border-radius: 50%; background-color: #fff; z-index: 10; } .lis .selected{ background-color: #002865; } /*中间板块*/ .center{ /* width: 1350px; */ background-color:#edf4f9; /* display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin: 0 auto; */ } /*第一个板块*/ .one_box{ height: 450px; display: flex; flex-direction: row; justify-content: center; } /*学院新闻*/ .xyxw{ width: 700px; height: 400px; } .title{ width: 700px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title .more img{ width: 8px; height: 14px; } .xyxw .content{ width: 700px; height: 300px; margin-top: 37px; display: flex; flex-direction: row; background-color: #ffffff; } .cimg{ width: 300px; height: 250px; margin: 15px; } .cimg img{ width: 100%; height: 100%; } .list{ width: 370px; height: 280px; } .list ul li{ list-style-type: none; padding-top: 14px; } .list ul li a{ max-width: 350px; height: 28px; font-family: simhei, simhei; font-weight: 400; font-size: 15px; color:#363636; line-height: 20px; text-align: left; font-style: normal; text-transform: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration:none; } .list ul li a:hover{ max-width: 350px; height: 28px; font-family: simhei, simhei; font-weight: 400; font-size: 15px; color:#153860; line-height: 20px; text-align: left; font-style: normal; text-transform: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list ul li p{ width: 100px; height: 16px; font-family: simhei, simhei; font-weight: 400; font-size: 14px; color: #b4b4b4; line-height: 13px; text-align: left; font-style: normal; text-transform: none; } /*通知公告*/ .tzgg{ width: 500px; height: 400px; margin-left: 40px; } .title_tzgg{ width: 500px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_tzgg .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_tzgg .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title_tzgg .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title_tzgg .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title_tzgg .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title_tzgg .more img{ width: 8px; height: 14px; } .content_tzgg{ width:500px; height: 300px; background-color: #ffffff; margin-top: 37px; } .list_tzgg{ width: 500px; height: 280px; } .list_tzgg ul li{ list-style-type: none; padding-top: 15px; padding-bottom: 5px; padding-left: 20px; display: flex; flex-direction: row; justify-content: space-between; } .list_tzgg ul li a{ max-width: 350px; height: 28px; font-family: simhei, simhei; font-weight: 400; font-size: 15px; color:#363636; line-height: 20px; text-align: left; font-style: normal; text-transform: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration:none; } .list_tzgg ul li a:hover{ max-width: 350px; height: 28px; font-family: simhei, simhei; font-weight: 400; font-size: 15px; color:#153860; line-height: 20px; text-align: left; font-style: normal; text-transform: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list_tzgg ul li p{ width: 90px; height: 16px; font-family: simhei, simhei; font-weight: 400; font-size: 16px; color: #b4b4b4; line-height: 13px; text-align: left; font-style: normal; text-transform: none; } /*第二个板块*/ .two_box{ height: 600px; display: flex; flex-direction: row; justify-content: center; } /*活动预告*/ .hdyg{ width: 1250px; height: 400px; } .title_hdyg{ width: 1240px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_hdyg .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_hdyg .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title_hdyg .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title_hdyg .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title_hdyg .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title_hdyg .more img{ width: 8px; height: 14px; } .content_hdyg{ display: flex; flex-direction: row; justify-content: space-between; padding-top: 30px; } .content_hdyg .image-container { position: relative; /* 为相对定位 */ width: 290px; height: 460px; background: #ffffff; border-radius: 0px 0px 0px 0px; border: 1px solid #707070; } .content_hdyg .image-container img { width: 100%; /* 使图片宽度占满容器 */ height:100%; } .content_hdyg .description-box { position: absolute; /* 绝对定位 */ bottom: 0; /* 在图片下方 */ left: 0; right: 0; /* 宽度与图片容器一致 */ color: white; /* 白色文字 */ text-align: center; /* 文字居中 */ padding: 10px; /* 内边距 */ box-sizing: border-box; /* 盒子模型包含padding和border */ width: 100%; height: 66px; background: #434343; border-radius: 0px 0px 0px 0px; opacity: 0.61; } .content_hdyg .description-box h6{ width: 260px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 20px; color: #ffffff; line-height: 18px; text-align: left; font-style: normal; text-transform: none; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .content_hdyg .description-box p{ width: 323px; height: 18px; font-family: simhei, simhei; font-weight: 400; font-size: 14px; color: #ffffff; line-height: 20px; text-align: left; font-style: normal; text-transform: none; } /*第三个板块*/ .three_box{ height: 700px; display: flex; flex-direction: row; justify-content: center; } /*多元实践*/ .dysj{ width: 1250px; height: 700px; } .title_dysj{ width: 1240px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_dysj .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_dysj .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title_dysj .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title_dysj .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title_dysj .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title_dysj .more img{ width: 8px; height: 14px; } .content_dysj{ padding-top: 30px; } .content_dysj ul{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: space-between; } .content_dysj ul li{ width: 400px; height: 550px; } .content_dysj ul li img{ width: 100%; height: 100%; } /*第四个板块*/ .fouth_box{ height: 550px; display: flex; flex-direction: row; justify-content: center; } /*铸牢专题*/ .zlzt{ width: 700px; height: 600px; } .title_zlzt{ width: 700px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_zlzt .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_zlzt .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title_zlzt .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title_zlzt .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title_zlzt .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title_zlzt .more img{ width: 8px; height: 14px; } .content_zlzt{ width: 700px; height: 400px; padding-top: 30px; } .content_zlzt a{ width:100%; height:100%; display:block; } .content_zlzt img{ height: 100%; width: 100%; } /*数字音舞*/ .szyw{ width: 500px; height: 400px; margin-left: 40px; } .title_szyw{ width: 500px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_szyw .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_szyw .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .content_szyw{ padding-top:30px; display: flex; flex-direction: row; } .c1{ width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding-top: 70px; } .c2{ width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding-top: 90px; } .jzyg{ width: 200px; height: 100px; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .kc{ width: 200px; height: 100px; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .yc{ width: 200px; height: 100px; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .cy{ width: 200px; height: 100px; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .icon{ width: 38px; height: 33px; } .icon img{ width: 100%; height: 100%; } .text{ height: 70px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; } .text h4{ margin: 0; font-family: simhei, simhei; font-weight: 400; font-size: 32px; color: #153860; line-height: 0px; text-align: left; font-style: normal; text-transform: none; } .text p{ margin: 0; font-family: simhei, simhei; font-weight: 400; font-size: 15px; color: #153860; line-height: 0px; text-align: center; font-style: normal; text-transform: none; } .text .line{ display: flex; align-items: center; } .text .line p{ font-family: simhei, simhei; font-weight: 400; font-size: 20px; color: #153860; line-height: 0px; text-align: center; font-style: normal; text-transform: none; } /*第五个板块*/ .five_box{ height: 650px; display: flex; flex-direction: row; justify-content: center; } /*大楼之美*/ .dlzm{ width: 1250px; height: 600px; } .title_dlzm{ width: 1240px; height: 40px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #bbbbbb; margin-top: 40px; } .title_dlzm .htitle{ width: 115px; height: 40px; border-bottom: 2px solid #153860; } .title_dlzm .htitle h5{ width: 115px; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 26px; color: #153860; line-height: 40px; text-align: center; font-style: normal; text-transform: none; } .title_dlzm .more{ width:100px; display: flex; flex-direction: row; justify-content: center; margin-top: 15px; } .title_dlzm .more a{ display: flex; width: 86px; height: 21px; color: #153860; text-decoration:none; } .title_dlzm .more p{ width: 86px; height: 21px; font-family: dengxian, dengxian; font-weight: 400; font-size: 20px; color: #153860; line-height: 15px; text-align: center; font-style: normal; text-transform: none; } .title_dlzm .more img{ width: 8px; height: 14px; } .content_dlzm{ display: flex; flex-direction: row; justify-content: space-between; padding-top: 30px; } .content_dlzm .image-container { position: relative; /* 为相对定位 */ width: 290px; height: 460px; background: #ffffff; border-radius: 0px 0px 0px 0px; border: 1px solid #707070; } .content_dlzm .image-container img { width: 100%; /* 使图片宽度占满容器 */ height:100%; } .content_dlzm .description-box { position: absolute; /* 绝对定位 */ bottom: 0; /* 在图片下方 */ left: 0; right: 0; /* 宽度与图片容器一致 */ color: white; /* 白色文字 */ text-align: center; /* 文字居中 */ padding: 10px; /* 内边距 */ box-sizing: border-box; /* 盒子模型包含padding和border */ width: 100%; height: 100%; background: #434343; border-radius: 0px 0px 0px 0px; opacity: 0.61; } .content_dlzm .description-box .context{ width: 100%; padding-top: 20px; } .content_dlzm .description-box h5{ width: 100%; height: 26px; font-family: simhei, simhei; font-weight: 400; font-size: 20px; color: #ffffff; line-height: 0px; text-align: left; font-style: normal; text-transform: none; } .content_dlzm .description-box h6{ width: 100%; height: 18px; font-family: simhei, simhei; font-weight: 400; font-size: 13px; color: #ffffff; line-height: 0px; text-align: left; font-style: normal; text-transform: none; } .content_dlzm .description-box p{ width: 100; height: 270px; font-family: simhei, simhei; font-weight: 400; font-size: 13px; color: #ffffff; line-height: 28px; text-align: left; font-style: normal; text-transform: none; } /*底部*/ .bottom{ height: 500px; background: #153860; border-radius: 0px 0px 0px 0px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin: 0 auto; } .bottom_logo{ width: 200px; height: 200px; } .bottom_logo img{ width: 240px; height: 157px; margin-top: 50px; } .bottom_center{ width: 1200px; height: 400px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .list_link{ width: 700px; height: 100px; } .list_link ul li{ list-style: none; width: 175px; height: 18px; font-family: simhei, simhei; font-weight: 400; font-size: 17px; color: #ffffff; line-height: 20px; text-align: left; font-style: normal; text-transform: none; float: left; padding-top: 30px; } .list_link ul li a{ text-decoration:none; color: #ffffff; } .ewm{ width: 148px; height: 148px; } .ewm img{ width: 100%; height: 100%; } .copyright{ width: 800px; height: 50px; display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 60px; } .copyright p{ width: 400px; font-family: simhei, simhei; font-weight: 400; font-size: 16px; color: #ffffff; line-height: 0px; text-align: center; font-style: normal; text-transform: none; }