ホームページ > 記事 > ウェブフロントエンド > HTML で静的なプログレスバーを作成するにはどうすればよいですか? （例）
HTML で静的なプログレスバーを作成するにはどうすればよいですか? （例）
- 藏色散人オリジナル
- 2018-08-14 15:48:566124ブラウズ
この記事では主にHTMLの静的プログレスバーの実装方法を紹介します。これは HTML と CSS コードを組み合わせることで実現でき、操作は非常に簡単です。
HTML プログレスバーコードの例は次のとおりです:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html静态进度条示例</title>
<meta charset="UTF-8">
<style type="text/css">
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
}
.out{
margin:auto;
margin-top:20%;
text-align:center;
height:30px;
width:500px;
background-color: #fff;
border:1px solid #000;
position:relative;
}
.in{
position:absolute;
left:0px;
top:0px;
height:30px;
width:250px;
background-color: #ddd;
}
.num{
position:absolute;
left:0px;
top:0px;
height:30px;
line-height:30px;
width:500px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<div class="mask">
<div class="out">
<div class="in"></div>
<div class="num">50%</div>
</div>
</div>
</body>
</html>Web ページ上の上記のコードの表示効果は次のとおりです:
図に示すように、ページには静的なプログレスバーがあります。 50% の進行状況が表示されます。 HTMLの静的なプログレスバーなので、対応するスタイルを変更すれば、HTMLプログレスバーの速度、つまり数値を変更することも可能です。ここでの原則は、実際には div を 2 つの部分に分割することです。1 つは進行量を示す暗い部分で、もう 1 つは残りの量を示す空白の部分です。次に進行部分のスタイル、つまり色の幅の区別を主に設定します。
上記のコード例を通じて、HTML の静的なプログレス バーの作成についてある程度理解できましたか?この記事が困っている友人たちの助けになれば幸いです。
以上がHTML で静的なプログレスバーを作成するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。