body { margin: 0; padding: 0; font-family: Arial, sans-serif; } /* 导航栏 */ .navbar { background-color: #444445; color: #fff; position: sticky; /* 粘性定位，相当于fixed，但相对其最近的滚动祖先（通常是）定位 */ top: 0; z-index: 1000; /* 确保在其他内容之上 */ display: flex; align-items: center; padding: 15px 0; } .logo { width: 70px; height: 30px; margin-right: 10px; margin-left: 10%; } .navbar-title { font-size: 14px; margin-right: 10%; } .navbar a { color: #CBC9C9; font-size: 14px; text-decoration: none; margin: 0 20px; } /* 首页内容区 */ .content { padding: 20px; } /* 页脚 */ .footer { background-color: #333; color: #fff; position: relative; bottom: 0; background: url('../img/footer.png') no-repeat; background-size: 100% 100%; } .footer-content{ display: flex; justify-content: space-between; padding: 0 15%; max-height: 250px; } .contact{ display: flex; flex-direction: column; justify-content: space-around; height: 150px; padding: 50px 0; } .img-circle{ display: inline-block; width: 24px; height: 24px; background-color: #FBFBFF30; border-radius: 12px; vertical-align: bottom; margin-right: 10px; } .img-circle > img{ width: 14px; height: 14px; margin: 5px; } .footer-top-compony,.footer-top-code{ padding: 50px 0; } .title{ font-size: 16px; margin-bottom: 20px; } p > a{ color: #fff; font-size: 14px; } .footer-info{ text-align: center; font-size: 12px; padding: 25px 0; border-top: 1px solid #555555; } .qrcode{ background-color: #fff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 5px; font-size: 12px; } .qrcode>img{ width: 80px; height: 80px; }