body,html{ width: 100%; height: 100%; margin:0 auto; font-family:PingFangSC-Regular,sans-serif; } body{ font-size: 16px; background-color: white; } @media screen and (min-width:1025px){ .main{ width: 62.5%; margin: 0 auto; } .wenan::before{ width: 25%; top: 15px; left: 6%; } .wenan::after{ width: 25%; top: 15px; right: 6%; } .footer{ padding: 20px 20%; } .footer .infobox{ float: left; } .chuli{ position: relative; top: 0; left:12px; } /* 返回顶部按钮 */ .aside{ display: block; width: 40px; height: 40px; position: fixed; bottom: 120px; right: 120px; cursor: pointer; display: none; } .aside img{ width: 100%; position: absolute; top: 0; left: 0; } .aside.show{ display: block; } .email{ margin-left: 40px; } } @media screen and (min-width:768px) and (max-width:1024px){ .main{ width: 96%; margin: 0 auto; } .wenan::before{ width: 20%; top: 15px; left: 20px; } .wenan::after{ width: 20%; top: 15px; right: 20px; } .footer{ padding: 20px 18%; } .footer .infobox{ float: none; } /* 返回顶部按钮 */ .aside{ display: block; width: 30px; height: 30px; position: fixed; bottom: 40px; right: 40px; cursor: pointer; display: none; } .aside img{ width: 100%; position: absolute; top: 0; left: 0; } .aside.show{ display: block; } } @media screen and (max-width:767px){ .main{ width: 99%; margin: 0 auto; } .wenan::before{ width: 180px; top: 15px; left: 30px; } .wenan::after{ width: 180px; top: 15px; right: 30px; } .footer{ padding: 20px 10%; } .footer .infobox{ float: none; } /* 返回顶部按钮 */ .aside{ display: block; width: 30px; height: 30px; position: fixed; bottom: 30px; right: 30px; cursor: pointer; display: none; } .aside img{ width: 100%; position: absolute; top: 0; left: 0; } .aside.show{ display: block; } } body,html{ width: 100%; height: 100%; margin:0 auto; } body{ font-size: 16px; font-family:PingFangSC-Regular,sans-serif; background-color: #000; } a{ color: #fff; } .container{ width: 100%; background-color: #000; overflow: hidden; } /* 导航样式 */ .header{ width: 100%; height:100px; overflow: hidden; } .header .icon{ width: 70px; height:100px; float: left; } .icon img{ display: block; width: 100%; margin-top: 5px; } .nav{ height: 100%; float: right; } .nav ul{ margin: 0; padding: 0; height: 100%; overflow: hidden; line-height:100px; } .nav ul li{ float: left; height: 100%; line-height: 100px; font-size: 36px; color: #FFF; } .nav a{ display: inline-block; width:108px; height: 98px; line-height: 98px; font-size: 18px; font-family:PingFangSC-Regular,sans-serif; } .nav ul li.active{ background-color: #b6885d; } /* 页脚 */ .footer{ box-sizing: border-box; width: 100%; background: #b6885d; } .footer .title{ font-size: 20px; margin-bottom: 20px; } .footer ul{ display: flex; justify-content: space-between; width: 100%; overflow: hidden; } .footer ul li{ float: left; color: #fff; width: 16.6%\0; text-align: left\0; } .footer ul li span { font-size: 20px; } .footer .info{ font-size: 18px; color: #fff; } .footer .infobox{ text-align: left; margin-right: 30px; font-size: 16px; margin-bottom:10px; } .footer .box{ overflow: hidden; font-size: 16px; margin-right: 11px; } .footer .infobox img{ width: 20px; } .clearfix::after{ content: ''; clear: both; } .beian{ text-align: left; } .beianinfo{ display: inline-block; margin-left: 65px; } .footer .clear-right{ margin-right: 0; }