HTML 实现简单 ListViews 效果
实现效果 ：
CSS 样式文件 ListViewTest.css
Body {Hintergrund: WhitesMoke;}#MainContentDiv {Position: absolut; Breite: 70%; Höhe: 100%; Hintergrund: Whitesmoke; Top: 10%; links: 10%;}. MainDivmainimgdiv {Position: absolut; Breite: 100%; Höhe: 50px; Hintergrund: weiß;}. MainDivmainInfoiv {Position: absolut; Breite: 100%; Höhe: 100%; Hintergrund: Whitesmoke; Top: 60px;}/*js 实现悬浮特效的 div*/. occlusionDiv {Position: absolut; Breite: 100%; Höhe: 100%; Hintergrund: RGBA (0,0,0,0,3); Deckkraft: 0; Z-Index: 14;}. Headleftdiv {Position: absolut; Breite: 50%; Höhe: 100%; Links: 4%; TOP: 25%;}. HeadleftDivfont {Schriftgewicht: 500; /*Zeilenhöhe: 58px;*/ Schriftgröße: 20px; Farbe: #333;}/*--------------------------- subinfodiv --------------*/. Breite: 100%; Höhe: 13%; Hintergrund: weiß; Grenze: 1px solide #eaeaa;}. MainDivmainInfodivSubInfodiv: Hover {Hintergrund: RGBA (0,0,0,0,3); Top: 10%; Links: 3%; Breite: 30%; Höhe: 30%; Hintergrund: RGBA (0,0,0,0); Top: 52%; Links: 3%; Breite: 95%; Höhe: 20%; Hintergrund: RGBA (0,0,0,0); unten: 3%; Links: 3%; Breite: 30%; Höhe: 30%; Hintergrund: RGBA (0,0,0,0);}. MainDivmainInfoiv_headtextdiv_textBox {Position: absolut; Top: 25%; Breite: 100%; Höhe: 50%; Hintergrund: RGBA (0,0,0,0);}. Cardinfotitle {Schriftgewicht: 700; /*Farbe: #1f264d;*/ Höhe: 22px; Anzeige: Inline-Block; Max-Breite: 600px; Überlauf: versteckt; Text-Overflow: Ellipsis; weißer Raum: Nowrap; Cursor: Zeiger;}. Flexfont {Anzeige: Flex; Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;}. rightflexfont {color: #b3b3b3; Schriftgewicht: 500; Text-Align: Recht; Schriftgröße: 12px; Farbe: RGB (179, 179, 179);}. Infodiv_right_1 {Position: absolut; Top: 30%; Rechts: 2%; Breite: 30%; Höhe: 30%; Hintergrund: RGBA (0,0,0,0);}. Infodiv_right_2 {Position: absolut; Top: 55%; Rechts: 2%; Breite: 30%; Höhe: 30%; Hintergrund: RGBA (0,0,0,0);}. MainDivmainInfoiv_trailTextDiv_textBox {Position: absolut; Top: 25%; Breite: 100%; Höhe: 50%; Hintergrund: RGBA (0,0,0,0);}. MainDivmainInfoiv_maintextdiv_textBox {Position: absolut; Top: 25%; Breite: 100%; Höhe: 50%; Hintergrund: RGBA (0,0,0,0);}html 页面 ：
<! DocType html> <html lang = en> <kopf> <meta charset = utf-8> <tites> listViewTest </title> <link rel = stylesheet href = listViewTest.css> <script src = https: //cdn.staticFile.org/jquery/1.10.2/jquery.min.js> </script> </head> <body> <script> $ (function () {// 产生悬浮特效 ， 也可以使用 也可以使用 cs: hover 实现 // 头部由 js 实现 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 css: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: Hover: {// 设置其透明度 ， 为 1 时不透明 ， 为 0 时透明 $ (this) .css (Opazität, 1);实现悬浮特效的 div ， 头部由 js 实现 ， 后面的子项由 CSS: Hover 实现-> <div class = occlusiondiv> </div> <div class = headleftdiv headleftdivfont> 我收到的 </div> </div> <divc-class = MainDivmainfoiv-Stil => <divc-Klasse = MainDivmainInfodivsubinfodiv-Position: Links: 0%; TOP: 0%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 于晓松 </div> </div> <div class = maindivMaininfoiv_maintextdiv style = display: flex. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rechter Links: 0%; TOP: 13%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivMaininfoiv_maintextdiv style = display: flex. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div 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; Links: 0%; Oben: 26%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 于晓松 </div> </div> <div class = maindivMaininfoiv_maintextdiv style = display: flex. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div 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; Links: 0%; TOP: 39%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divclass = maindivMaininfoiv_maintexTDIV -Style = Display: Flex; Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div 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: absolut: Absolute; Links: 0%; Oben: 52%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divclass = maindivMaininfoiv_maintextextdiv style = display: flex. maindivmainfoIV_MainTextdiv style = display: flex. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div 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: absolut: Absolute; Links: 0%; Oben: 65%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divclass = mainDivMaininfoiv_maintexTDIV -Style = Display: Flex. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div 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; Links: 0%; TOP: 78%;> <div class = mainDivmainInfoiv_headtextdiv style => <div class = mainDivmainInfoiv_headtextdiv_textBox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divclass = maindivMaininfoiv_maintextextdiv style = display. Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;> 发起人 ： 张三 <div class = mainDivmainInfoiv_maintextdiv_textbox style => </div> </div> <div class = mainDivmainInfoiv_trailtextdiv style => <div class = maindivmainfoiv_traildiv_textdiv flexfont style = </div> <div class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rechter总结到此这篇关于 html 实现简单 listViews 效果的实例代码详解的文章就介绍到这了, 更多相关 html 实现 listViews 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！