HTML+ag真人线上注册Java金花游戏Script创建响应式404页面
2025-06-17 17:23:22
7855
具有美观宜人的用户界面。
使用HTML+CSS动画和JavaScript创建响应式404页面，演示Responsive 404 website - Bedimcode (bokequ.com)
1、html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--=============== BOXICONS ===============--> <link href='css/boxicons.min.css' rel='stylesheet'> <!--=============== CSS ===============--> <link rel="stylesheet" href="css/styles.css"> <title>Responsive 404 website - Bedimcode</titleag真人线上注册> </head> <body> <!--==================== HEADER ====================--> <header class="header"> <nav class="nav container"> <a href="#" class="nav__logo"> XCOMPANY </a> <div class="nav__menu" id="nav-menu"> &金花游戏lt;ul class="nav__list"> <li class="nav__item"> <a href="/" class="nav__link">Home</a> </li> <li class="nav__item"> <a href="#" class="nav__link">About</a> </li> <li class="nav__item"> <a href="#" class="nav__link">Contact</a> </li> </ul> <div class="nav__close" id="nav-close"> <i class='bx bx-x'></i> </div> </div> <!-- Toggle button --> <div class="nav__toggle" id="nav-toggle"> <i class='bx bx-grid-alt'></i> </div> </nav> </header> <!--==================== MAIN ====================--> <main class="main"> <!--==================== HOME ====================--> <section class="home"> <div class="home__container container"> <div class="home__data"> <span class="home__subtitle">Error 404</span> <h1 class="home__title">Hey Buddy</h1> <p class="home__description"> We can't seem to find the page <br> you are looking for. </p> <a href="/" class="home__button"> Go Home </a> </div> <div class="home__img"> <img src="img/ghost-img.png" alt=""> <div class="home__shadow"></div> </div> </div> <footer class="home__footer"> <span>(554) 987-654</span> <span>|</span> <span>info@company.com</span> </footer> </section> </main> <!--=============== SCROLLREVEAL ===============--> <script src="js/scrollreveal.min.js"></script> <!--=============== MAIN JS ===============--> <script src="js/main.js"></script> </body></html>
2、css样式
/*=============== GOOGLE FONTS ===============*/@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");/*=============== VARIABLES CSS ===============*/:root { --header-height: 3.5rem; /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --first-color: hsl(38, 69%, 59%); --text-color: hsl(38, 8%, 8%); /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: 'Space Grotesk', sans-serif; --biggest-font-size: 2.375rem; --normal-font-size: .938rem; --smaller-font-size: .75rem;}/* Responsive typography */@media screen and (min-width: 1024px) { :root { --biggest-font-size: 5rem; --normal-font-size: 1rem; --smaller-font-size: .813rem; }}/*=============== BASE ===============*/* { box-sizing: border-box; padding: 0; margin: 0;}body { font-family: var(--body-font); font-size: var(--normal-font-size); font-weight: 500; color: var(--text-color);}ul { list-style: none;}a { text-decoration: none;}img { max-width: 100%; height: auto;}/*=============== REUSABLE CSS CLASSES ===============*/.container { max-width: 1024px; margin-left: 1.5rem; margin-right: 1.5rem;}.main { overflow: hidden; /* For the animations ScrollReveal */}/*=============== HEADER & NAV ===============*/.header { position: fixed; width: 100%; background-color: transparent; top: 0; left: 0; z-index: 100;}.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center;}.nav__logo, .nav__toggle { color: var(--text-color); display: inline-flex;}.nav__logo { font-weight: 700;}.nav__toggle { font-size: 1.25rem; cursor: pointer;}@media screen and (max-width: 767px) { .nav__menu { position: fixed; background-color: var(--first-color); left: 0; top: -100%; width: 100%; padding: 5rem 0 4rem; border-radius: 0 0 1.5rem 1.5rem; box-shadow: 0 2px 4px hsla(38, 4%, 15%, .15); transition: .4s; }}.nav__list { text-align: center; display: flex; flex-direction: column; row-gap: 2rem;}.nav__link { color: var(--text-color);}.nav__close { position: absolute; top: 1rem; right: 1.5rem; font-size: 1.5rem; color: var(--text-color); cursor: pointer;}/* Show menu */.show-menu { top: 0;}/*=============== HOME ===============*/.home { background-color: var(--first-color); padding: 9rem 0 2rem; height: 100vh; display: grid;}.home__container { display: grid; align-content: center; row-gap: 2.5rem;}.home__data { text-align: center;}.home__title { font-size: var(--biggest-font-size); margin: .75rem 0;}.home__button { margin-top: 2rem; display: inline-block; background-color: var(--text-color); color: #fff; padding: .80rem 1.5rem; border-radius: 3rem; transition: .4s;}.home__button:hover { box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);}.home__img img { width: 230px; animation: floaty 1.8s infinite alternate;}.home__img { justify-self: center;}.home__shadow { width: 130px; height: 24px; background-color: hsla(38, 21%, 19%, .16); margin: 0 auto; border-radius: 50%; filter: blur(7px); animation: shadow 1.8s infinite alternate;}.home__footer { display: flex; justify-content: center; column-gap: .5rem; font-size: var(--smaller-font-size); align-self: flex-end;}/* Animate ghost */@keyframes floaty { 0% { transform: translateY(0); } 100% { transform: translateY(15px); }}@keyframes shadow { 0% { transform: scale(1, 1); } 100% { transform: scale(.85, .85); }}/*=============== BREAKPOINTS ===============*//* For small devices */@media screen and (max-width: 320px) { .home { padding-top: 7rem; }}/* For medium devices */@media screen and (min-width: 767px) { .nav { height: calc(var(--header-height) + 1.5rem); } .nav__toggle, .nav__close { display: none; } .nav__list { flex-direction: row; column-gap: 3.5rem; }}/* For large devices */@media screen and (min-width: 1024px) { .home__container { grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 2rem; } .home__data { text-align: initial; } .home__img img { width: 400px; } .home__shadow { width: 250px; height: 40px; }}@media screen and (min-width: 1048px) { .container { margin-left: auto; margin-right: auto; }}/* For 2K resolutions (2048 x 1152, 2048 x 1536) */@media screen and (min-width: 2048px) { body { zoom: 1.7; } .home { height: initial; row-gap: 4rem; }}/* For 4K resolutions (3840 x 2160, 4096 x 2160) */@media screen and (min-width: 3840px) { body { zoom: 3.1; }}3、自适应桌面端并兼容移动设备，JavaScript代码
/*=============== SHOW MENU ===============*/const navMenu = document.getElementById('nav-menu'), navToggle = document.getElementById('nav-toggle'), navClose = document.getElementById('nav-close')/*===== MENU SHOW =====*//* Va金花游戏lidate if constant exists */if(navToggle){ navToggle.addEventListener('click', () =>{ navMenu.classList.add('show-menu') })}/*===== MENU HIDDEN =====*//* Validate if constant exists */if(navClose){ navClose.addEventListener('click', () =>{ navMenu.classList.remove('show-menu') })}/*=============== REMOVE MENU MOBILE ===============*/const navLiag真人线上注册nk = document.querySelectorAll('.nav__link')function linkAction(){ const navMenu = document.getElementById('nav-menu') // When we click on each nav__link, we remove the show-menu class navMenu.classList.remove('show-menu')}navLink.forEach(n => n.addEventListener('click', linkAction))/*=============== SCROLL REVEAL ANIMATION ===============*/const sr = ScrollReveal({ distance: '90px', duration: 3000,})sr.reveal(`.home__data`, {origin: 'top', delay: 400})sr.reveal(`.home__img`, {origin: 'bottom', delay: 600})sr.reveal(`.home__footer`, {origin: 'bottom', delay: 800})来源https://github.com/bedimcode/responsive-404-page分享
本文地址：http://4niu3.xny028cc.com/above/3.html
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。