如何使用 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上現場測試本教程