html 实现简单 listViews 效果
实现效果 ：
CSS 样式文件 ListViewTest.css
Body {Background: Whitesmoke;}#MainContentDiv {posición: absoluto; Ancho: 70%; Altura: 100%; Antecedentes: Whitesmoke; arriba: 10%; Izquierda: 10%;}. MainDivMainImgdiv {posición: Absolute; Ancho: 100%; Altura: 50px; Antecedentes: blanco;}. MainDivMainInfoiv {posición: Absolute; Ancho: 100%; Altura: 100%; Antecedentes: Whitesmoke; superior: 60px;}/*js 实现悬浮特效的 div*/. occlusionDiv {posición: absoluto; Ancho: 100%; Altura: 100%; Antecedentes: RGBA (0,0,0,0.3); Opacidad: 0; Z-índice: 14;}. HeadleftDiv {posición: absoluto; Ancho: 50%; Altura: 100%; Izquierda: 4%; arriba: 25%;}. HeadleftDivFont {Font-Weight: 500; /*Línea-aguja: 58px;*/ font-size: 20px; Color: #333;}/*--------------------------- Ancho: 100%; Altura: 13%; Fondo: blanco; Border: 1px Solid #eaeaea;}. MainDivMainInfodivSubinfodiv: Hover {Background: RGBA (0,0,0,0.3);}. MainDivMainInfoiv_headTextDiv {Position: Absolute; arriba: 10%; Izquierda: 3%; Ancho: 30%; Altura: 30%; Antecedentes: RGBA (0,0,0,0);}. MainDivMainInfoiv_MaintextDiv {posición: absoluto; Arriba: 52%; Izquierda: 3%; Ancho: 95%; Altura: 20%; Antecedentes: RGBA (0,0,0,0);}. MainDivMainInfoiv_TrailTextDiv {posición: Absolute; Abajo: 3%; Izquierda: 3%; Ancho: 30%; Altura: 30%; Antecedentes: RGBA (0,0,0,0);}. MainDivMainInfoiv_headTextDiv_TextBox {posicion: Absolute; arriba: 25%; Ancho: 100%; Altura: 50%; Antecedentes: RGBA (0,0,0,0);}. CardInfotitle {Font-Weight: 700; /*color: #1f264d;*/ altura: 22px; Pantalla: bloque en línea; Máxido: 600px; desbordamiento: oculto; Texto-Overflow: Ellipsis; White-Space: Nowrap; cursor: pointer;}. FlexFont {Display: Flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;}. RightflexFont {color: #b3b3b3; Font-peso: 500; Text-Align: Right; tamaño de fuente: 12px; color: rgb (179, 179, 179);}. infodiv_right_1 {posición: absoluto; arriba: 30%; Derecha: 2%; Ancho: 30%; Altura: 30%; Antecedentes: RGBA (0,0,0,0);}. Infodiv_right_2 {posición: absoluto; arriba: 55%; Derecha: 2%; Ancho: 30%; Altura: 30%; Antecedentes: RGBA (0,0,0,0);}. MainDivMainInfoiv_TrailTextDiv_TextBox {posición: absoluto; arriba: 25%; Ancho: 100%; Altura: 50%; Antecedentes: RGBA (0,0,0,0);}. MainDivMainInfoiv_MaintextDiv_TextBox {posicion: Absolute; arriba: 25%; Ancho: 100%; Altura: 50%; Antecedentes: RGBA (0,0,0,0);}HTML ： ：
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> 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 () {// 产生悬浮特效 产生悬浮特效 ， 也可以使用 css: hover 实现 // js 实现 ， 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 实现 实现 $ (. {// 设置其透明度 ， 为 1 时不透明 ， 为 0 时透明 $ (this) .css (opacidad, 1);实现悬浮特效的 div ， 头部由 js 实现 ， 后面的子项由 后面的子项由 css: hover 实现-> <div class = occlusionDiv> </div> <div class = headleftDiv Headleftdivfont> 我收到的 </div> </div> <divs class = mainDivMainInfoiv style => <div class = MainDivMainInfodivsubinfodiv Izquierda: 0%; superior: 0%;> <div class = mainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divse class = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<Div class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div> </div> </div> <divse class = mainDivMainInfodivsubinfodiv estilo = posición: absoluto; Izquierda: 0%; arriba: 13%;> <div class = mainDivMainInfoiv_headTextDiv style => <div class = mainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divse class = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<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 estilo = posición: absoluto; Izquierda: 0%; arriba: 26%;> <div class = mainDivMainInfoiv_headTextDiv style => <div class = mainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divse class = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<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 estilo = posición: absoluto; Izquierda: 0%; arriba: 39%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divse class = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<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: Absolute; Izquierda: 0%; arriba: 52%;> <div class = mainDivMainInfoiv_headTextDiv style => <div class = mainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divs de divs = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<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: Absolute; Izquierda: 0%; arriba: 65%;> <div class = MainDivMainInfoiv_headTextDiv style => <div class = mainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divs de divs = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<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 estilo = posición: absoluto; Izquierda: 0%; arriba: 78%;> <div class = mainDivMainInfoiv_headTextDiv style => <div class = mainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <divs de divs = mainDivMainInfoiv_MainTextDiv style = display: flex; tamaño de fuente: 12px; Color: RGB (102, 102, 102); altura: 20px;> 发起人 ： 张三 <Div class = MainDivMainInfoiv_MaintextDiv_TextBox style => </div> </div> <div class = MainDivMainInfoiv_TrailTextDiv style => <Div class = MainDivMainFoiv_TrailTextDiv_TextBox FlexFont style => ： ： ： 张三 张三 张三 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四 李四<Div class = 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 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！