CSS 水平プログレスバーと垂直プログレスバーの実装コード
|
時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法を紹介します。 1. 水平プログレスバー
<html>
<ヘッド>
<title>水平プログレスバー</title>
<スタイル タイプ="text/css">
.ロードバー
{
幅:200px;
高さ:25px;
背景色:#fff;
境界線:1px実線 #ccc;
}
。バー
{
行の高さ:25px;
高さ:100%;
表示:ブロック;
フォントファミリ:arial;
フォントサイズ:12px;
背景色:#bb9319;
色:#fff;
}
</スタイル>
</head>
<本文>
<div class="ロードバー">
<strong class="bar" style='width:30%;'>30%</strong>
</div>
</本文>
</html>効果は以下のとおりです。
2. 垂直プログレスバー
<html>
<ヘッド>
<title>垂直プログレスバー</title>
<スタイル タイプ="text/css">
.ロードバー
{
幅:25px;
高さ:200px;
背景色:#fff;
境界線:1px実線 #ccc;
位置:相対;
}
。バー
{
幅:100%;
表示:ブロック;
フォントファミリ:arial;
フォントサイズ:12px;
背景色:#bb9319;
色:#fff;
位置:絶対;
下:0;
}
</スタイル>
</head>
<本文>
<div class="ロードバー">
30%
</div>
</本文>
</html>
CSS 水平プログレスバーと垂直プログレスバーの実装コードに関するこの記事はこれで終わりです。CSS 水平プログレスバーと垂直プログレスバーの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)
推薦する
HTML ページ スタイルの !-- -- の機能は何ですか?
主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...
Linux 面接で最もよく聞かれる 10 の質問のまとめ
序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...
ReactプロジェクトにSCSSを導入する方法
まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...
Vueは複数列レイアウトドラッグを実装します
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
TypeScript で時間を費やした場所の概要
TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...
MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
VirtualBox でのホストオンリー + NAT モードのネットワーク構成
VirtualBoxのHost Only+NATモードのネットワーク構成は参考用です。具体的な内容は...
Linux ssh サービス情報と実行ステータスを表示する方法
Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...
CSSでカスタムフォント（font-face）を導入する方法の詳細な説明
なぜこれを使ったのか？それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...
ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装
1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...
CSS+SVGでBステーションの課金効果を実現するサンプルコード
困難SVG グラフィックの 2 つのマスクの作成まず、コード左側のピンク色のボックスの内容ですこれに...
Reactを使用して画像認識アプリを実装する方法
まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...
JSON.stringify のさまざまな用途のまとめ
序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...
get メソッドによる HTML フォームの値転送の例
google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...
MySQLデータベースとテーブルシャーディングの概要
プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...