<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
图片来源于网络，如有侵权联系删除
<title>敬请期待 - 网站正在建设中</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding-top: 100px;
}
.container {
width: 80%;
margin: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
color: #e74c3c;
}
p {
line-height: 1.6;
}
.progress-bar {
width: 100%;
background-color: #ddd;
height: 20px;
border-radius: 5px;
margin: 20px 0;
}
.progress {
height: 100%;
background-color: #3498db;
border-radius: 5px;
width: 0%;
}
.info {
font-size: 14px;
color: #666;
}
.social-media {
margin-top: 30px;
}
.social-media a {
图片来源于网络，如有侵权联系删除
display: inline-block;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.social-media a::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-image: url('social-icons.png');
background-size: cover;
left: 5px;
top: 5px;
}
.social-media a:hover::after {
transform: scale(1.1);
}
.social-media a:nth-child(1) {
background-color: #3b5998;
}
.social-media a:nth-child(2) {
background-color: #55acee;
}
.social-media a:nth-child(3) {
background-color: #dd4b39;
}
.social-media a:nth-child(4) {
background-color: #5cb85c;
}
</style>
<div class="container">
<h1>网站正在建设中...</h1>
<p>您好！感谢您对我们的关注和支持，目前我们的网站正处于紧张的建设阶段，我们正在努力打造一个更加完善、便捷的平台，以满足您的需求。</p>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="info">
<p>当前进度：<span id="progressText">0%</span></p>
<p>预计上线时间：2023年第一季度</p>
图片来源于网络，如有侵权联系删除
</div>
<p>在网站正式上线之前，您可以：</p>
<ul>
<li>关注我们的官方社交媒体账号，获取最新动态。</li>
<li>通过电子邮件联系我们，留下您的宝贵意见。</li>
<li>注册成为我们的会员，优先体验新网站功能。</li>
</ul>
<div class="social-media">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<p>我们承诺，新网站的上线将为您带来以下体验：</p>
<ol>
<li>更快的页面加载速度，提升用户体验。</li>
<li>更加丰富的内容展示，满足您的阅读需求。</li>
<li>全新的交互设计，让您操作更便捷。</li>
<li>更多个性化功能，让您的浏览更加个性。</li>
</ol>
<p>再次感谢您的耐心等待，我们期待与您在新的平台上相见！</p>
<p>如果您有任何疑问或建议，请随时通过以下方式联系我们：</p>
<address>
<strong>客服邮箱：</strong> service@website.com<br>
<strong>客服电话：</strong> 400-xxx-xxxx<br>
<strong>公司地址：</strong> XX省XX市XX区XX路XX号
</address>
</div>
<script>
var progress = document.getElementById('progress');
var progressText = document.getElementById('progressText');
var currentProgress = 0;
var interval = setInterval(function() {
if (currentProgress >= 100) {
clearInterval(interval);
} else {
currentProgress += 1;
progress.style.width = currentProgress + '%';
progressText.textContent = currentProgress + '%';
}
}, 50);
</script>
标签： #网站正在建设中 html源码
评论列表