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 マルチインスタンス構成のアプリケーションシナリオ
推薦する
Docker Tomcat のアクセス インターフェイスが表示されないのはなぜですか?
質問:オリジン サーバーはターゲット リソースの表現を見つけることができないか、既存の表現を公開した...
HTTP 戻りコード一覧（中国語と英語の説明）
httpリターンコードリスト（以下は概要です）詳細な中国語の説明についてはここをクリックしてくださ...
vue3 再帰コンポーネントカプセル化の全プロセス記録
目次序文1. 再帰コンポーネント2. 右クリックメニューコンポーネント要約する序文今日、プロジェクト...
CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
HTML の相対パスと絶対パスの違いの分析
HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...
JS でシンプルな画像カルーセル効果を実現
この記事では、シンプルな画像カルーセル効果を実現するためのJSの具体的なコードを参考までに紹介します...
HTML の表の行と列を結合する問題の解決策の詳細な説明
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
Node.js のモジュール性、npm パッケージ マネージャーの説明
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
ウェブページの幅を携帯電話の画面（ビューポート）の幅に自動的に適応させる実装コード
一般的な書き方は次のとおりです。 XML/HTML コードコンテンツをクリップボードにコピー<...
Linux Bash スクリプトを使用してユーザーを識別する方法の例
多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...
JSscriptタグの属性は何ですか
JS スクリプト タグの属性は何ですか? charset : オプション。 src 属性で指定された...
VUEは登録とログインの効果を実現します
この記事の例では、登録とログインの効果を実現するためのVUEの具体的なコードを紹介します。具体的な内...
Linux での MySQL のインストールに関するチュートリアル
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説
システム管理者は複数のサーバーを同時に管理する場合があり、これらのサーバーは異なる場所に配置されてい...
MySQL 8.0.12 winx64 詳細なインストールチュートリアル
この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...