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 マルチインスタンス構成のアプリケーションシナリオ
推薦する
JS でカルーセル画像を実装するいくつかの方法
カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...
Axiosは繰り返しのリクエストをキャンセル
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。
序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...
Jenkins を通じて None のイメージを定期的にクリーンアップする方法
序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...
Vueでアイコンをカスタマイズする手順
ant-design-vue は Ali iconfont icons の使用をカスタマイズします\...
ReactとAntdのFormコンポーネントを組み合わせてログイン機能を実装する方法を詳しく説明します
目次1. ReactとAntdを組み合わせてログイン機能を実現2. ReactとAntdを組み合わせ...
すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション
データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...
アプレットにおけるwx.getUserProfileインターフェースの具体的な使用
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...
jQueryは記事の折りたたみと展開の機能を実装します
この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...
Vue プロジェクトで addRoutes を使用する際の問題の解決策
目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...
tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード
目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...
VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル
ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...
Docker で MySQL マスターとスレーブをデプロイする方法
画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...
Web2.0: 情報過多の原因と解決策
<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...