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 マルチインスタンス構成のアプリケーションシナリオ
推薦する
MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
vue3を使用して人間と猫のコミュニケーションアプレットを実装する
目次序文プロジェクトを初期化するデザインコードの実装オンデマンドロードオーディオを再生録音長押しイベ...
Nginx セッション損失問題の解決策
nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...
Linux プロセスが占有するポート番号を表示する 6 つの方法
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...
Youdaの新しいプチビューの実装
目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...
JavaScript で矢印関数を使用できないシナリオはどれですか
目次1. オブジェクトメソッドを定義する2. プロトタイプメソッドを定義する3. イベントコールバッ...
CSS の位置属性 (absolute|relative|static|fixed) の概要と応用
まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...
Node8 における AsyncHooks 非同期ライフサイクル
Async Hooks は Node8 の新機能です。NodeJs の非同期リソースのライフサイクル...
高性能ウェブサイトの最適化ガイド
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ～ 20% が HTML ドキュメ...
JavaScript でオブジェクトのプロパティを削除する方法
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
B2C ウェブサイトのユーザー エクスペリエンスの詳細設計リファレンス
最近、Apple.com/Ebay.com/Amazon.com/shopping.yahoo.co...
Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)
目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...
JS ベースのページフローティングボックスを実装するためのサンプルコード
スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...
ミニプログラムはリストのカウントダウン機能を実装します
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
Windows 2008 タスク プランが bat スクリプトの実行に失敗したときに 0x1 を返す問題の解決方法
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...