body { margin: 0; min-width: 1200px; max-width: 1920px; } a { text-decoration: none; color: inherit; } header { height: 541px; box-sizing: border-box; background: url(../images/header.jpg) center no-repeat; } nav { background: #2329BB; } nav ul { list-style: none; padding: 0; display: flex; margin: auto; width: 1200px; } nav ul li { flex: 1; position: relative; } nav ul a { display: block; text-align: center; text-decoration: none; color: #fff; line-height: 74px; font-size: 24px; font-weight: lighter; } nav ul a.active { position: relative; } nav ul a.active::after { content: ''; display: block; width: 100%; height: 4px; background: linear-gradient(#FFB115, #FFB115) center/97px 4px no-repeat; position: absolute; bottom: 0; } nav ul .sub-menu { display: none; position: absolute; z-index: 10; flex-direction: column; min-width: 100%; background: var(--menu-item-color); left: 50%; transform: translateX(-50%); word-break: keep-all; color: inherit; white-space: nowrap; background-color: rgba(54, 94, 169, 0.6); font-size: 20px; padding: 10px 18px; } nav ul .sub-menu a { font-size: inherit; line-height: 2; } nav ul .sub-menu a:not(:last-child) { border-bottom: 1px dashed #fff; margin-bottom: 8px; padding-bottom: 4px; } nav ul li:hover .sub-menu { display: flex; } footer { height: 342px; background: url(//www.sce.com.cn/gjkc/images/footer.jpg) center no-repeat; color: #fff; padding-top: 64px; box-sizing: border-box; } footer .content { width: 1200px; margin: auto; display: grid; grid-template-columns: auto 155px; grid-template-rows: 81px auto 18px; font-size: 18px; font-weight: lighter; line-height: 1; } footer .link { display: flex; justify-content: space-between; grid-column: 1/-1; } footer .link a { color: inherit; text-decoration: none; } footer .wechat { grid-column: 2; grid-row: 2/-1; width: 145px; border: 5px solid #fff; border-radius: 5px; } .w-1200 { width: 1200px; margin: auto; }