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 バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)
推薦する
ubuntu20.04 LTSにdockerをインストールする方法
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法
フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...
MySQL 外部キー制約とテーブル関係の概要
目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...
React+tsは二次リンク効果を実現します
この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...
VMware 仮想マシンで Linux の IP アドレスを表示する方法
1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...
Nodejs のグローバル変数とグローバルオブジェクトの知識ポイントと使用方法の詳細
1. グローバルオブジェクトすべてのモジュールは呼び出すことができます1) global: ブラウザ...
vue3 で vue-router を使用するための完全な手順
序文ルーティングの管理は、ほとんどのシングルページ アプリケーションにとって不可欠な機能です。 Vu...
カルーセル効果を作成するためのjs
カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...
Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例
Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...
Vue で Google サードパーティ ログインを実装するためのサンプル コード
目次1. 開発者プラットフォームの構成問題を解決する1. 開発者プラットフォームの構成1. 開発者プ...
Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図
1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...
露滴アニメーション効果を実装するための Three.js サンプル コード
序文みなさんこんにちは。CSS ウィザードの alphardex です。この記事では、three.j...
Linux bzip2 コマンドの使用
1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...
MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル (Windows 版)
1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...
ウェブページの画像を素早く表示する方法とテクニック
1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...