网站首页 网站源码 正文
在做泛目录程序的很多时候,我们为了让网站备案保留的时间长一些,会使用我那个站历史的首页作为首页。
在无法获取到网站历史首页的情况下,我们只能通过给游客展现网站正在建设中的样式,使得游客看上去更加美观与正规。
实现上述效果的代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <title>网站正在建设中.</title> <style> @import url(https://fonts.googleapis.com/css?family=Montserrat); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); body { overflow: hidden; } h1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 4em; color: #333; -webkit-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); -moz-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); word-spacing: 16px; } p { font-family: 'Open Sans', sans-serif; font-size: 1.4em; font-weight: bold; color: #222; text-shadow: 0 0 40px #FFFFFF, 0 0 30px #FFFFFF, 0 0 20px #FFFFFF; } .container { position: absolute; top: 0; bottom: 0; width: 100%; background: url(''); background-size: cover; } .wrapper { width: 100%; min-height: 100%; height: auto; display: table; } .content { display: table-cell; vertical-align: middle; } .item { width: auto; height: auto; margin: 0 auto; text-align: center; padding: 8px; } canvas { position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; } .background { display: flex; z-index: 3; height: 100vh; flex-direction: column; align-content: center; justify-content: center; font-family: 'Text Me One', sans-serif; } @media only screen and (min-width: 800px) { h1 { font-size: 6em; } p { font-size: 1.6em; } } @media only screen and (max-width: 320px) { h1 { font-size: 2em; } p { font-size: 1.2em; } } </style> </head> <body><canvas id='background' width='1280' height='642'></canvas> <div> <div> <div> <div> <!-- Place your content here to have it be centered vertically and horizontally --> <h1>即将上线</h1> <p>网站正在建设中...</p> </div> </div> </div> </div> <script> const particles = []; for (let i = 0; i < 100; i++) { particles.push({ x: Math.random() > 0.5 ? 0 : window.innerWidth, y: window.innerHeight / 2, vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, history: [], size: 4 + Math.random() * 6, color: Math.random() > 0.5 ? '#ccc': Math.random() > 0.5 ? '#00174a': '#3c8dbc' }); } const mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; const canvas = document.getElementById('background'); if (canvas && canvas.getContext) { var context = canvas.getContext('2d'); Initialize(); } function Initialize() { canvas.addEventListener('mousemove', MouseMove, false); window.addEventListener('resize', ResizeCanvas, false); TimeUpdate(); context.beginPath(); ResizeCanvas(); } function TimeUpdate(e) { context.clearRect(0, 0, window.innerWidth, window.innerHeight); for (let i = 0; i < particles.length; i++) { particles[i].x += particles[i].vx; particles[i].y += particles[i].vy; if (particles[i].x > window.innerWidth) { particles[i].vx = -1 - Math.random(); } else if (particles[i].x < 0) { particles[i].vx = 1 + Math.random(); } else { particles[i].vx *= 1 + Math.random() * 0.005; } if (particles[i].y > window.innerHeight) { particles[i].vy = -1 - Math.random(); } else if (particles[i].y < 0) { particles[i].vy = 1 + Math.random(); } else { particles[i].vy *= 1 + Math.random() * 0.005; } context.strokeStyle = particles[i].color; context.beginPath(); for (var j = 0; j < particles[i].history.length; j++) { context.lineTo(particles[i].history[j].x, particles[i].history[j].y); } context.stroke(); particles[i].history.push({ x: particles[i].x, y: particles[i].y }); if (particles[i].history.length > 45) { particles[i].history.shift(); } for (var j = 0; j < particles[i].history.length; j++) { particles[i].history[j].x += 0.01 * (mouse.x - particles[i].history[j].x) / (45 / j); particles[i].history[j].y += 0.01 * (mouse.y - particles[i].history[j].y) / (45 / j); } let distanceFactor = DistanceBetween(mouse, particles[i]); distanceFactor = Math.pow(Math.max(Math.min(10 - distanceFactor / 10, 10), 2), 0.5); context.fillStyle = particles[i].color; context.beginPath(); context.arc(particles[i].x, particles[i].y, particles[i].size * distanceFactor, 0, Math.PI * 2, true); context.closePath(); context.fill(); } requestAnimationFrame(TimeUpdate); } function MouseMove(e) { mouse.x = e.layerX; mouse.y = e.layerY; } function Draw(x, y) { context.strokeStyle = '#ff0000'; context.lineWidth = 4; context.lineTo(x, y); context.stroke(); } function ResizeCanvas(e) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function DistanceBetween(p1, p2) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; return Math.sqrt(dx * dx + dy * dy); } </script> <div style='display:none;'><script type='text/javascript' src='https://s6.cnzz.com/z_stat.php?id=4350952&web_id=4350952'></script></div> </body> </html>
这样的页面还加载了js的动画效果,页面美观有趣。
必看说明
- 本站中所有被研究的素材与信息全部来源于互联网,版权争议与本站无关。
- 本站文章或仅为文本内容原创,非程序原创。如有侵权、不妥之处,请联系站长第一时间删除。敬请谅解!
- 本站所有内容严格遵守国家法律的条例,所有研究的算法技术均来源于搜索引擎公开默认允许用户研究使用的接口。
- 阅读本文及获取资源前,请确保您已充分阅读并理解《访问曹操SEO网站需知:行为准则》。
- 本站分享的任何工具、程序仅供学习参考编写架构,仅可在本地的虚拟机内断网测试,严禁联网运行或上传搭建!
- 任何资源必须在下载后24个小时内,从电脑中彻底删除。不得传播或者用于其他任何用途!否则一切后果用户自负!
- 转载请注明 : 文章转载自 曹操SEO 404页面代码:即将上线:网站正在建设中...
- 本文标题:《404页面代码:即将上线:网站正在建设中...》
- 本文链接:https://www.ccooc.cn/1800.html
猜你喜欢
- 2024-04-01 CCSEO原创蜘蛛统计v1.3
- 2024-03-23 搜狐自媒体批量发布软件V2.3
- 2024-01-27 CCSEO原创蜘蛛统计v1.2
- 2023-10-22 CCSEO原创蜘蛛统计v1.1
- 2023-08-28 链接中“?scm=1102.xchannel:1475:110036.0.3.0~9010.400.0.5.0”的含义
- 2023-06-27 粉色移动影视泛目录
- 2023-06-16 泛目录爬词工具PHP代码
- 2023-06-16 为泛目录关键词提供下拉词联想功能
- 2023-06-01 使用Curl的方式采集新闻标题及文章内容的php代码
- 2023-05-31 分享一段采集文章段落、标题及实时热词的php代码
你 发表评论:
欢迎- 7749℃遵纪守法:一起举报违法网址
- 6825℃警惕“冒用身份”的电信网络诈骗
- 6859℃备案域名的买卖管控会越来越严,不要尝试!
- 4825℃6月1日是《中华人民共和国网络安全法》实施五周年
- 4318℃违规事件分类与违规信息类型说明
- 4153℃关于严格遵守网络安全法规的公告
- 6126℃百度正打击构造虚假标题等违规站点
- 7873℃「百日行动」“断卡”行动持续发力
- 15421℃懒人开源站群程序V2.4.2:影视模板V2
- 15101℃通过Nginx配置增强网站安全性
- 14151℃多线程批量查询百家号文章存活情况
- 13779℃搜狐号安全系统升级通知
- 11781℃多线程批量查询链接收录情况(免代理)
- 11680℃百家号批量发布软件V1.8.5
- 10668℃企业网站安全漏洞应对:从修复到增强全方位安全新举措
- 7874℃CCSEO原创蜘蛛统计v1.3
- 08-18罪恶克星:不良网站举报工具填表版
- 05-01多线程批量查询百家号文章存活情况
- 04-22通过Nginx配置增强网站安全性
- 04-22企业网站安全漏洞应对:从修复到增强全方位安全新举措
- 04-21搜狐号安全系统升级通知
- 04-18多线程批量查询链接收录情况(免代理)
- 04-09懒人开源站群程序V2.4.2:影视模板V2
- 04-03百家号批量发布软件V1.8.5
- 近期评论
- 文章归档
-
- 2024年8月 (1)
- 2024年5月 (1)
- 2024年4月 (10)
- 2024年3月 (6)
- 2024年1月 (2)
- 2023年12月 (4)
- 2023年11月 (2)
- 2023年10月 (7)
- 2023年9月 (24)
- 2023年8月 (6)
- 2023年7月 (20)
- 2023年6月 (13)
- 2023年5月 (26)
- 2023年4月 (48)
- 2023年3月 (21)
- 2023年2月 (15)
- 2023年1月 (10)
- 2022年12月 (10)
- 2022年11月 (3)
- 2022年10月 (28)
- 2022年9月 (37)
- 2022年8月 (16)
- 2022年7月 (23)
- 2022年6月 (24)
- 2022年5月 (10)
- 2022年4月 (53)
- 2022年3月 (67)
- 2022年2月 (3)
- 2022年1月 (4)
- 2021年12月 (24)
- 2021年11月 (18)
- 2021年10月 (3)
- 2021年9月 (22)
- 2021年8月 (60)
- 2021年7月 (3)
- 2021年6月 (16)
- 2021年5月 (25)
- 2021年4月 (1)
- 2021年3月 (39)
- 2021年1月 (7)
- 2020年12月 (19)
- 2020年11月 (11)
- 2020年10月 (49)
- 2020年9月 (114)
- 2020年8月 (63)
- 2020年7月 (28)
- 2020年6月 (50)
- 2020年5月 (124)
- 2020年4月 (83)
- 2020年3月 (91)
- 2020年2月 (81)
- 2020年1月 (18)
- 2019年12月 (79)
- 2019年11月 (16)
- 2019年10月 (35)
- 2019年9月 (3)
- 2017年12月 (1)
- 2017年11月 (203)
- 2017年10月 (155)
- 标签列表
- 站点信息
-
- 文章总数:2024
- 页面总数:7
- 分类总数:46
- 标签总数:340
- 评论总数:9339
- 浏览总数:5831584
已有61位网友发表了看法: