如何使用 HTML 和 Bootstrap 创建即将推出的页面

已发表: 2020-03-02

如果您熟悉网站和应用程序，您可能知道即将推出的页面。当您的网站尚未准备好发布时，它会为您的网站创造品牌价值。即将推出的页面还有助于让用户了解您的存在，并让他们确切知道您何时上线。使用超棒的倒数计时器，您可以在您的网站上创建令人惊叹的即将推出或正在建设中的模板。

为什么需要即将推出的页面？

您可以使用即将推出页面上的订阅表格将访问者转换为订阅者。
您可以推广您的社交链接
您可以通过选择特定的关键字来提高网站排名

即将推出的页面会在您的网站上线时通知人们，您将有更多时间专注于您的网站发布。

使用 HTML CSS 和 JavaScript 创建即将推出的页面

创建一个 Html 文件例如：（commingsoon.html）

 <div class="bgimg"> <div class="topleft"> <p>Logo</p> </div> <div class="middle"> <h1>COMING SOON</h1> <hr> <p>35 days</p> </div> <div class="bottomleft"> <p>Some text</p> </div>

添加 CSS

注意：如果您想在相同的 HTML 文件中使用 CSS，则必须在 <Style> 标记中使用 CSS 代码，或者如果您使用外部 css 文件，则需要使用 .css 扩展名命名，例如comingsoonpages.css

 <style> /* code goes here */ </style>

 /* Set height to 100% for body and html to enable the background image to cover the whole page: */ body, html { height: 100% } .bgimg { /* Background image */ background-image: url('/w3images/forestbridge.jpg'); /* Full-screen */ height: 100%; /* Center the background image */ background-position: center; /* Scale and zoom in the image */ background-size: cover; /* Add position: relative to enable absolutely positioned elements inside the image (place text) */ position: relative; /* Add a white text color to all elements inside the .bgimg container */ color: white; /* Add a font */ font-family: "Courier New", Courier, monospace; /* Set the font-size to 25 pixels */ font-size: 25px; } /* Position text in the top-left corner */ .topleft { position: absolute; top: 0; left: 16px; } /* Position text in the bottom-left corner */ .bottomleft { position: absolute; bottom: 0; left: 16px; } /* Position text in the middle */ .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /* Style the <hr> element */ hr { margin: auto; width: 40%; }

添加 JavaScript

注意：如果你想在下面的 Javascript 中使用相同的 HTML 文件，那么你必须在 <script> 标签中使用 Javascript 代码，或者如果你正在使用外部 JavaScript 文件，那么你需要使用 .js 扩展名来命名，比如comingsoonpages.js

 <script> // code goes here </script>

 // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Get the distance between now an the count down date var distance = countDownDate - now; // Calculations of time for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in an element (demo) with document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, show some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);

我们感谢 w3schools 为即将推出的页面提供了一个很棒的教程，您可以查看是否要在W3schools上现场测试本教程