如何使用HTML和CSS建立進度條-html教學-PHP中文網

首頁

web前端

html教學

如何使用HTML和CSS建立進度條

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 am 09:09 AM

csshtml進度條

如何使用HTML和CSS建立進度條

概述

進度條是任何 Web 應用程式的主要元件。進度表示某個專案或任務的完成情況。在本模組中，我們將使用 HTML 建立進度條，並透過 CSS 對其進行樣式設定。我們還將為進度條提供進度動畫。在此任務中，我們將使用 @keyframes 來使進度條動畫化。使用動畫樣式屬性，例如動畫持續時間、名稱、計時等。

演算法

第 1 步 - 在文字編輯器中建立 HTML 樣板。

第 2 步 - 建立父 div 容器並將類別名稱定義為 barContainer。

第 3 步 - 現在建立目前父 div 的另一個子層級並定義類別名稱。

第 4 步 - 建立一個在進度中繼承的子級，該子級將會被動畫化。

步驟 5 - 使用頁面 head 標籤內的連結標籤將樣式表連結到網頁。

第 6 步 - 建立一個新檔案 style.css 並設定頁面樣式，使用動畫屬性在進度條中建立動畫。

第 7 步 - 進度條已成功建立。

範例

在這個範例中，我們將使用 HTML 和 CSS 建立一個簡單的進度條。其中，index.html 是主頁，它是頁面的骨架，我們剛剛創建了元件的框架，所有動畫和樣式部分都在 style.css 部分中完成。 style.css 檔案由組件的樣式和動畫部分組成。

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>Progress Bar</title>
   <style>
      * {
         margin: 0;
      }
      .barContainer {
         min-height: 100vh;
         width: 100vw;
         display: flex;
         align-items: center;
      }
      .progress,.progressBar {
         width: 20rem;
         height: 2rem;
         border-radius: 1.2rem;
         margin: auto;
         background-color: rgb(243, 243, 243);
      }
      .progressBar{
         background-color: green;
         animation: backp 3s;
         margin: 0;
         padding: 0;
         width: 80%;
         height: 2rem;
         border-radius: 1rem;
         box-shadow: none;
      }
      span{
         color: white;
         text-align: end;
         display: block;
         padding: 0.5rem;
      }
      @keyframes backp {
         0% {
            width: 0%;
         }
         100%{
            width: 80%;
         }
      }  
   </style>   
</head>
<body>
   <div class="barContainer">
      <div class="progress">
         <div class="progressBar">
            <span> 80% Completed</span>
         </div>
      </div>
   </div>
</body>
</html>

下面給出的圖像顯示了輸出，其中顯示了一個進度條，該進度條在頁面加載時加載，因為我們僅使用了 css，因此進度條固定為 80% 進度。因此，創建這個進度條是為了演示那些包含課程完成等任務的應用程式。因此，要追蹤任務的完成情況，這是以圖形使用者介面的形式表示任務的完美方式。

結論

進度條用於許多應用程序，例如安裝更新、下載任何應用程式、載入應用程式等等。進度條使用戶介面更具吸引力。要即時運行進度條，我們不能僅使用HTML 和CSS 來做到這一點，因此為了在實時專案中實現進度條，我們還使用了Javascript 腳本語言，它可以檢查互聯網連接以及上傳和下載透過網路我們可以製作進度條的進度。使用 HTML 和 CSS 只能用於建立靜態進度條。所以一般比較喜歡使用javascript等腳本語言來建立進度條。

以上是如何使用HTML和CSS建立進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles