html 实现简单 listviews 效果
：
CSS 样式文件 ListViewTest.css
Body {Background: Whitesmoke;} # MainContentDiv {position: Absolute; Largeur: 70%; hauteur: 100%; Contexte: Whitesmoke; TOP: 10%; gauche: 10%;}. MaindivMainImgDiv {position: absolue; Largeur: 100%; hauteur: 50px; Contexte: blanc;}. MaindivMainInfoiv {position: absolue; Largeur: 100%; hauteur: 100%; Contexte: Whitesmoke; en haut: 60px;} / * js 实现悬浮特效的 div * /. occlusionDiv {position: absolu; Largeur: 100%; hauteur: 100%; Contexte: RGBA (0,0,0,0,3); Opacité: 0; z-index: 14;}. HeadleftDiv {position: absolue; Largeur: 50%; hauteur: 100%; Gauche: 4%; en haut: 25%;}. HeadleftDivFont {Font-Weight: 500; / * line-height: 58px; * / la taille de police: 20px; Couleur: # 333;} / * --------------------------- Subinfodiv -------------- * /. MainDivMainInfodivSubinFodiv {position: Absolute; Largeur: 100%; hauteur: 13%; Contexte: blanc; Border: 1px solide #eaea;}. MaindivMainInfodivSubinFodiv: hover {background: rgba (0,0,0,0.3);}. MaindivMainInfoiv_HeadTextDiv {position: absolue; TOP: 10%; Gauche: 3%; Largeur: 30%; hauteur: 30%; Contexte: rgba (0,0,0,0);}. MaindivMainInfoiv_MainTextDiv {position: Absolute; Top: 52%; Gauche: 3%; Largeur: 95%; hauteur: 20%; Contexte: rgba (0,0,0,0);}. MaindivMainInfoiv_TrailTextDiv {position: Absolute; En bas: 3%; Gauche: 3%; Largeur: 30%; hauteur: 30%; Contexte: rgba (0,0,0,0);}. MaindivMainInfoiv_headTextDiv_textBox {position: absolue; TOP: 25%; Largeur: 100%; hauteur: 50%; Contexte: RGBA (0,0,0,0);}. CardinFoTitle {Font-Weight: 700; / * Couleur: # 1f264d; * / hauteur: 22px; Affichage: bloc en ligne; largeur maximale: 600px; débordement: caché; Text-overflow: ellipsis; Espace blanc: Nowrap; curseur: pointeur;}. flexfont {affichage: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); hauteur: 20px;}. RightFlexFont {Color: # b3b3b3; Police-poids: 500; Texte-aligne: à droite; taille de police: 12px; Couleur: RGB (179, 179, 179);}. Infodiv_Right_1 {position: Absolute; TOP: 30%; À droite: 2%; Largeur: 30%; hauteur: 30%; Contexte: rgba (0,0,0,0);}. infodiv_right_2 {position: absolue; Top: 55%; À droite: 2%; Largeur: 30%; hauteur: 30%; Contexte: rgba (0,0,0,0);}. MaindivMainInfoiv_TrailTextDiv_textBox {position: absolue; TOP: 25%; Largeur: 100%; hauteur: 50%; Contexte: rgba (0,0,0,0);}. MaindivMainInfoiv_MainTextDiv_textBox {position: absolue; TOP: 25%; Largeur: 100%; hauteur: 50%; Contexte: RGBA (0,0,0,0);}HTML 页面 ：
<! Doctype html> <html Lang = en> <A-head> <meta charset = utf-8> <t titre> listViewTest </Title> <link Rel = Stylesheet href = listViewTest.css> <script src = https: //cdn.staticfile.org/jquery/1.10.2/jquery.min.js> </ script> </ad> <body> <cript> $ (function () {// 产生悬浮特效 ， 也可以使用 css: hover 实现 // 头部由 js 实现 ， 下面列表的子项由 css: hover 实现 $ (.. {// 设置其透明度 ， 为 1 时不透明 ， 为 0 时透明 $ (this) .css (opacité, 1);实现悬浮特效的 Div ， 头部由 JS 实现 ， 后面的子项由 CSS: Hover 实现 -> <div class = occlusionDiv> </div> <div class = HeadleftDiv HeadleftDivfont> 我收到的 </div> </div> <div class = MainDivMaininfoiv style => <div class = MainDivMaininfodivSubinfodiv style = position: Absolute; Gauche: 0%; en haut: 0%;> <div class = MainDivMainInfoiv_HeadTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmaininfoiv_maintextdiv style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => Class = infodiv_Right_1 RightFlexFont> 已撤回 </div> <div class = infodiv_right_2 RightFlexfont> 2020-02-12 18:41:11 </div> <div> </div> </div> <div class = MainDivMainInfodivSubinFodiv style = position: Absolute; Gauche: 0%; en haut: 13%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmaininfoiv_maintextdiv style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => Class = Infodiv_Right_1 RightFlexFont Style = Color: # 6DB56D;> 已完成 </div> <div class = Infodiv_Right_2 RightFlexFont> 2020-02-12 18:41:11 </div> </div> <div class = MaindivMainInfodivSubinFodiv Style = Position: Absolute; Gauche: 0%; En haut: 26%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmaininfoiv_maintextdiv style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => Class = Infodiv_Right_1 RightFlexFont Style = Color: # 6DB56D;> 已完成 </div> <div class = Infodiv_Right_2 RightFlexFont> 2020-02-12 18:41:11 </div> </div> <div class = MaindivMainInfodivSubinFodiv Style = Position: Absolute; Gauche: 0%; en haut: 39%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 于晓松 </div> </div> <div class = MaindivMaininfoiv_MaintextDiv Style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> <div class = MaindivmainInfodivSubinFodiv style = position: absolue; Gauche: 0%; en haut: 52%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 于晓松 </div> </div> <div class = MaindivMaininfoiv_MaintextDiv Style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> <div class = MaindivmainInfodivSubinFodiv style = position: absolue; Gauche: 0%; en haut: 65%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textBox CardinFoTitle Style => 论电子合同的法律效力及问题 _ 于晓松 于晓松 </div> </div> <div class = MaindivMaininfoiv_MaintextDiv Style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => Class = Infodiv_Right_1 RightFlexFont Style = Color: # 6DB56D;> 已完成 </div> <div class = Infodiv_Right_2 RightFlexFont> 2020-02-12 18:41:11 </div> </div> <div class = MaindivMainInfodivSubinFodiv Style = Position: Absolute; Gauche: 0%; en haut: 78%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = maindivmaininfoiv_headtextDiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmaininfoiv_maintextdiv style = affiche: flex; taille de police: 12px; Couleur: RVB (102, 102, 102); Hauteur: 20px;> 发起人: ： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </ div> </ div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = Maindivmaininfoiv_trailTextDiv_textbox flexfont => classe = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> </div> </ body> </html>总结到此这篇关于 HTML 实现简单 ListViews 效果的实例代码详解的文章就介绍到这了, 更多相关 HTML 实现 ListViews 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！