htmlとCSSで簡単な静的プログレスバーを作成（画像とテキストで詳しく解説）-CSSチュートリアル-php.cn

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

yulia

リリース： 2018-10-29 14:12:23

オリジナル

11602 人が閲覧しました

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;
   }

ログイン後にコピー

効果画像:

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