htmlとCSSで簡単な静的プログレスバーを作成（画像とテキストで詳しく解説）

Web サイトを頻繁に閲覧したり、ページを頻繁にレイアウトしたりする友人は、進行状況バーに精通している必要があります。また、フロントエンドの知識を学習している友人は、HTML と CSS を使用することになります。単純な静的なプログレスバー?この記事では、HTML と CSS を使用してプログレス バーの効果を実現する方法を説明し、最後に、興味のある友人が参照できるように、簡単な HTML プログレス バー コードを共有します。

CSS を使用して単純な進行状況バーを作成するには、境界線の半径の丸い角、センタリングなど、CSS の基本的な知識を使用する必要があります。不明な場合は、PHP の関連記事を参照してください。中国語の Web サイト、または CSS ビデオ チュートリアル にアクセスして、基本をしっかり学習してください。

例: HTML と CSS を使用して、単純な静的な進行状況バーを作成します

HTML 部分:

進行状況バーを観察すると、進行状況バーが 2 つの部分で構成されていることがわかります。 、1つは進行状況バーの合計の長さ、1つは進行状況の長さなので、2つのdivを作成し、1つのdivを親要素として、もう1つのdivを子要素として、それぞれにクラス名を付けて設定を容易にします具体的なコードは次のとおりです:

<p>进度条</p>
<div class="container">
   <div class="skills loading">70%</div>
</div>

CSS 部分:

基本的なフレームワークが完成したので、2 つの div をスタイルする必要があります。最初の div の長さを 300 ピクセル、高さを 30 ピクセル、背景色を #ddd に設定して、見た目を美しくするために、border-radius 属性を使用して丸みを付けることもできます。 2 番目の div の長さを 70% に設定します。これは進行状況バーの値です。最後に、line-height と text-align を使用して、親要素とは異なる色を設定します。 center は水平方向と垂直方向の位置を中心にします。具体的なコードは次のとおりです。

.container {
    width: 300px;
    height: 30px;
    background-color: #ddd;
    border-radius: 20px;
   }
   
   .skills {
    line-height: 30px;
    color: white;
    border-radius: 20px;
    text-align: center;
    width: 70%;
    background-color: #4CAF50;
   }

効果画像:

画像からわかるように、 70% の緑色の進行状況バーが生成されました。

上記では、HTML と CSS を使用して単純な静的なプログレス バーを作成する方法を詳しく説明しています。CSS を初めて使用する友人は、ぜひ試してみてください。自分で練習して、できるかどうかを確認してください。コードでプログレス バーの効果を表示できますか? この記事がお役に立てば幸いです。

#その他の関連チュートリアルの推奨事項

1、

CSS オンライン マニュアル

2、

HTML ビデオ チュートリアル 3、

ブートストラップ ビデオ チュートリアル

以上がhtmlとCSSで簡単な静的プログレスバーを作成（画像とテキストで詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。