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 バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)
推薦する
ログインフォームを実装するためのReactサンプルコード
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
HTML ウェブページのブラウザタイトルバーに小さなアイコンを表示する方法
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
Ubuntu20.04 VNCのインストールと設定の実装
VNC はリモート デスクトップ プロトコルです。 VNC を使用して Ubuntu 20.04 を...
JavaScript配列をツリー構造に変換する方法
1. 需要バックエンドは、フロントエンドがツリー構造（重複データなし）に変換するためのデータを提供し...
Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。
目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...
計算プロパティとリスナーの詳細
目次1. 計算されたプロパティ1.1 基本的な例1.2 計算プロパティキャッシュとメソッド1.3 計...
JS を使用して HTML で回転するクリスマスツリーを実装する
<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...
CSSコンテンツ属性の具体的な使用法
コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...
ダッシュボードを実装するためのjQueryプラグイン
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明
MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...
iFrameは背景を覆うポップアップレイヤーとして使うのに最適です
最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...
FlashFXP FTP クライアント ソフトウェア登録クラッキング方法
FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...
JavaScript配列の一般的なメソッドの詳細な説明
目次元の配列を変更しない方法1. 連結文法：パラメータ:戻り値: 2. 参加する文法：パラメータ:戻...
WindowsでのMySQLインストールチュートリアルの詳細な紹介
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...