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 バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)
推薦する
jsネイティブ構文プロトタイプ、__proto__、コンストラクタの徹底的な理解
目次1 はじめに2 前提条件2.1 データ型2.2 それが自身のプロパティであるかどうかを判断する ...
MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。
各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲（符号付き）範囲...
MySQL バージョン 5.7.24 のデータベース インストール プロセスの詳細なグラフィック説明
MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...
入力タイプの制限（複数の方法）
1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...
MySQL データベースの鉄則 (要約)
適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...
Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)
前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...
Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
JavaScript を使用して QR コードを解析する 3 つの方法
目次1. JavaScriptを使用してQRコードを解析する1. QR コードとは何ですか? 2.q...
HTMLヘッダータグの使用に関する詳細な説明
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル
この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...
MySQL で UTF-8 エンコーディングを使用しないのはなぜですか?
MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...
MySQLデータベースをアンインストールするための完全な手順
MySQLデータベースを完全にアンインストールするプロセスは次のとおりです。 1. MySQLサービ...
MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)
目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...
MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法
実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...
JavaScript で配列の変更を監視する方法
序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...