炫酷的网站维护提示html页面
时间: 2023-07-28 10:10:57 浏览: 54
以下是一个炫酷的网站维护提示HTML页面的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站维护中</title>
<style>
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
font-size: 60px;
margin-bottom: 50px;
}
p {
font-size: 24px;
margin-bottom: 30px;
}
.countdown {
font-size: 36px;
margin-bottom: 30px;
}
.social-icons {
margin-top: 50px;
}
.social-icon {
display: inline-block;
margin-right: 20px;
font-size: 36px;
color: #fff;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.social-icon:hover {
color: #00bfff;
}
</style>
</head>
<body>
<h1>网站维护中</h1>
<p>非常抱歉,我们正在进行网站维护,预计需要一些时间。</p>
<div class="countdown">00:00:00</div>
<p>请稍后再回来,感谢您的耐心等待!</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-square"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter-square"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram-square"></i></a>
</div>
<script>
// 倒计时
var countdown = document.querySelector('.countdown');
var timer = setInterval(function() {
var hours = Math.floor(Math.random() * 24);
var minutes = Math.floor(Math.random() * 60);
var seconds = Math.floor(Math.random() * 60);
countdown.innerHTML = hours + ':' + minutes + ':' + seconds;
}, 1000);
</script>
</body>
</html>
```
这个页面使用了黑色背景、白色文字和淡蓝色的社交媒体图标,整体风格简洁、大气。在页面上添加了一个倒计时计时器,随机显示小时、分钟和秒数,增加了一些趣味性和互动性。
该页面还使用了FontAwesome图标库,添加了社交媒体图标链接,方便访问者在维护期间与网站保持联系。