HTML でシンプルな ListViews 効果を実装するためのサンプル コード
|
シンプルなリストビュー効果を実現するHTML 結果：
CSS スタイル ファイル listviewTest.css
体{
背景: ホワイトスモーク;
}
#メインコンテンツDiv{
位置: 絶対;
幅：70%;
高さ:100%;
背景: ホワイトスモーク;
上位: 10%
左: 10%;
}
.mainDivメイン画像Div{
位置: 絶対;
幅: 100%;
高さ: 50px;
背景: 白;
}
.mainDivメイン情報iv{
位置: 絶対;
幅: 100%;
高さ: 100%;
背景: ホワイトスモーク;
上: 60px;
}
/*js はフローティング特殊効果を持つ div を実装します*/
.occlusionDiv{
位置: 絶対;
幅: 100%;
高さ: 100%;
背景: rgba(0,0,0,0.3);
不透明度:0;
zインデックス: 14;
}
.headLeftDiv{
位置: 絶対;
幅: 50%;
高さ: 100%;
左: 4%;
上位: 25%
}
.headLeftDivFont{
フォントの太さ: 500;
/*行の高さ: 58px;*/
フォントサイズ: 20px;
色: #333;
}
/*---------------------------サブ情報部--------------*/
.mainDIvメイン情報Divサブ情報Div{
位置: 絶対;
幅: 100%;
高さ: 13%;
背景：白;
境界線: 1px 実線 #eaeaea;
}
.mainDIvメイン情報Divサブ情報Div:hover{
背景: rgba(0,0,0,0.3);
}
.mainDivメイン情報_ヘッドテキストDiv{
位置: 絶対;
上位: 10%
左: 3%;
幅：30%;
高さ: 30%;
背景:rgba(0,0,0,0);
}
.mainDivメイン情報iv_mainTextDiv{
位置: 絶対;
トップ：52%
左: 3%;
幅：95%;
高さ: 20%;
背景:rgba(0,0,0,0);
}
.mainDivメイン情報_トレイルテキストDiv{
位置: 絶対;
下位：3%
左: 3%;
幅：30%;
高さ: 30%;
背景:rgba(0,0,0,0);
}
.mainDivメイン情報iv_ヘッドテキストDiv_テキストボックス{
位置: 絶対;
上位: 25%
幅: 100%;
高さ: 50%;
背景:rgba(0,0,0,0);
}
.cardInfoTitle {
フォントの太さ: 700;
/*色: #1f264d;*/
高さ: 22px;
表示: インラインブロック;
最大幅: 600px;
オーバーフロー: 非表示;
テキストオーバーフロー: 省略記号;
空白: ラップなし;
カーソル: ポインタ;
}
.flexFont{
表示: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;
}
.rightFlexFont{
色: #b3b3b3;
フォントの太さ: 500;
テキスト配置: 右;
フォントサイズ: 12px;
色: rgb(179, 179, 179);
}
.InfoDiv_Right_1{
位置: 絶対;
上位: 30%
右：2%
幅：30%;
高さ: 30%;
背景:rgba(0,0,0,0);
}
.InfoDiv_Right_2{
位置: 絶対;
上位：55%
右：2%
幅：30%;
高さ: 30%;
背景:rgba(0,0,0,0);
}
.mainDivMainInfoiv_TrailTextDiv_TextBox{
位置: 絶対;
上位: 25%
幅: 100%;
高さ: 50%;
背景:rgba(0,0,0,0);
}
.mainDivメイン情報iv_mainTextDiv_テキストボックス{
位置: 絶対;
上位: 25%
幅: 100%;
高さ: 50%;
背景:rgba(0,0,0,0);
}html ページ:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>リストビューテスト</title>
<link rel="スタイルシート" href="listviewTest.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<本文>
<スクリプト>
$(関数() {
// フローティング特殊効果を生成します。css:hover を使用して実現することもできます // ヘッダーは js によって実装され、以下のリストのサブ項目は css:hover によって実装されます $(".occlusionDiv").mouseover(function () {
// 透明度を設定します。1 の場合は不透明、0 の場合は透明になります。$(this).css("opacity", "1");
}).mouseout(関数() {
$(this).css("不透明度", "0");
});
});
</スクリプト>
<div id="mainContentDiv">
<div class="mainDivMainImgDiv" style="">
<!-- フローティング効果を実装する div。ヘッダーは js によって実装され、次のサブ項目は css:hover によって実装されます -->
<div class="occlusionDiv"></div>
<div class="headLeftDiv headLeftDivFont">受け取りました</div>
</div>
<div class="mainDivMainInfoiv" style="">
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 0%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" スタイル="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 右フレックスフォント">
撤回</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
<div></div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 13%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont" スタイル="color: #6db56d;">
完了しました</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 26%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont" スタイル="color: #6db56d;">
完了しました</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 39%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 右フレックスフォント">
撤回</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 52%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 右フレックスフォント">
撤回</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 65%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont" スタイル="color: #6db56d;">
完了しました</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" style="位置: 絶対; 左: 0%; 上: 78%;">
<div class="mainDivMainInfoiv_HeadTextDiv" スタイル="">
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox カード情報タイトル" スタイル="">
電子契約の法的効果と問題について_于暁松</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
スタイル="display: flex; フォントサイズ: 12px; 色: rgb(102, 102, 102); 高さ: 20px;">
発起者: 張三<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" スタイル="">
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
参加者: 張三、李思</div>
</div>
<div class="InfoDiv_Right_1 右フレックスフォント">
撤回</div>
<div class="InfoDiv_Right_2 右フレックスフォント">
2020-02-12 18:41:11
</div>
</div>
</div>
</div>
</本文>
</html>要約する シンプルな ListViews 効果を HTML で実装する方法の詳細なサンプル コードに関するこの記事はこれで終わりです。ListViews を HTML で実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL マルチインスタンス構成のアプリケーションシナリオ
推薦する
Linux に nodejs 環境とパス構成をインストールするための詳細な手順
Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...
クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明
k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...
MySQLの制限を使用して大規模なページングの問題を解決する方法
序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...
RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
nginxサーバーのダウンロード、インストール、使用方法の詳細な説明
ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...
Linux mysql-5.6 でルート パスワードをリセットする方法
1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...
MySQLの日付加算と減算関数の詳細な説明
1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...
Bツリーの削除プロセスの紹介
前回の記事 https://www.jb51.net/article/154157.htm では、B...
docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル
目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...
MySQL 基本チュートリアル パート 1 MySQL5.7.18 のインストールと接続チュートリアル
この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...
CSSにおけるマージン値と垂直マージンの重なりについて
平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...
Node.jsサービスDockerコンテナアプリケーション実践のまとめ
この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...
Reactは感情を使ってCSSコードを書く
目次導入：感情のインストール：一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...
JS にこれがあるのはなぜですか?
目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...
K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル
k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...