<meta charset="UTF-8">
<title>梦想之舟，扬帆起航——网站建设进行时</title>
<style>
图片来源于网络，如有侵权联系删除
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
text-align: center;
}
.container {
width: 80%;
margin: 0 auto;
padding: 50px;
}
.construction {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
color: #666;
line-height: 1.6;
}
.progress {
background-color: #eee;
height: 30px;
border-radius: 15px;
overflow: hidden;
margin: 20px 0;
}
.progress-bar {
height: 100%;
background-color: #4CAF50;
width: 0%;
border-radius: 15px;
transition: width 0.4s ease-in-out;
}
.stats {
margin-top: 30px;
}
.stats div {
margin-bottom: 10px;
}
图片来源于网络，如有侵权联系删除
.stats span {
font-weight: bold;
}
.contact {
margin-top: 50px;
}
.contact h3 {
margin-bottom: 10px;
}
.contact p {
color: #888;
}
.social-media {
margin-top: 20px;
}
.social-media a {
margin: 0 10px;
color: #333;
text-decoration: none;
}
.social-media a:hover {
color: #4CAF50;
}
</style>
<div class="container">
<div class="construction">
<h1>梦想之舟，扬帆起航——欢迎光临我们的网站建设进行时</h1>
<p>尊敬的用户，您好！感谢您对我们网站的关心与支持，在此，我们诚挚地告知您，我们的新网站正在紧张而有序地进行建设中，梦想之舟即将扬帆起航，让我们一起期待它带来的精彩。</p>
<div class="progress">
<div class="progress-bar" id="progressBar">0%</div>
</div>
<p>我们的网站建设进度如下：</p>
<div class="stats">
<div>
<span>已完成：</span>
<span id="completed">0%</span>
</div>
<div>
<span>预计完成时间：</span>
<span id="estimatedTime">2023年12月</span>
</div>
<div>
<span>项目团队：</span>
<span id="teamSize">15人</span>
</div>
</div>
图片来源于网络，如有侵权联系删除
<p>我们的团队由一群充满激情和创意的年轻人组成，他们拥有丰富的互联网经验和专业知识，在接下来的时间里，他们将夜以继日地工作，确保网站能够按时、高质量地完成。</p>
<h2>网站建设亮点预览</h2>
<p>为了给您带来更好的用户体验，我们的新网站将具备以下亮点：</p>
<ul>
<li>简洁大方的界面设计，让您的浏览更加舒适。</li>
<li>强大的搜索引擎优化功能，助力您的网站在搜索引擎中脱颖而出。</li>
<li>丰富的内容展示，让您第一时间了解行业动态和最新资讯。</li>
<li>互动性强的社交功能，让您的参与和分享更加便捷。</li>
<li>安全可靠的网站后台管理，让您轻松管理网站内容。</li>
</ul>
<h2>敬请期待</h2>
<p>虽然我们的网站还在建设中，但我们相信，它将为您带来全新的视觉和互动体验，请您保持关注，期待我们的网站正式上线的那一刻。</p>
<div class="contact">
<h3>联系方式</h3>
<p>如有任何建议或疑问，欢迎通过以下方式与我们联系：</p>
<p>邮箱：support@ourwebsite.com</p>
<p>电话：+86-123-4567890</p>
<div class="social-media">
<a href="https://www.facebook.com" target="_blank">Facebook</a>
<a href="https://www.twitter.com" target="_blank">Twitter</a>
<a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
</div>
</div>
</div>
</div>
<script>
// 模拟进度条动态变化
var progressBar = document.getElementById('progressBar');
var completed = document.getElementById('completed');
var estimatedTime = document.getElementById('estimatedTime');
var teamSize = document.getElementById('teamSize');
// 假设每天进度增加5%
var progressRate = 5;
var progressInterval = setInterval(function() {
var currentWidth = parseInt(progressBar.style.width);
if (currentWidth < 100) {
progressBar.style.width = (currentWidth + progressRate) + '%';
completed.textContent = (currentWidth + progressRate).toFixed(2) + '%';
} else {
clearInterval(progressInterval);
}
}, 1000);
</script>
标签： #网站正在建设中 html源码
评论列表