html 实现简单 ListViews 效果
实现效果 ：
CSS 样式文件 ListViewTest.CSS
body {background: whitesmoke;}#mainContentDiv {position: absolute; Lebar: 70%; Tinggi: 100%; Latar Belakang: Whitesmoke; Atas: 10%; Kiri: 10%;}. MainDivMainimgDiv {position: absolute; Lebar: 100%; Tinggi: 50px; latar belakang: white;}. MainDivMainInfoiv {position: absolute; Lebar: 100%; Tinggi: 100%; Latar Belakang: Whitesmoke; Atas: 60px;}/*js 实现悬浮特效的 Div*/. OcclusionDiv {position: absolute; Lebar: 100%; Tinggi: 100%; Latar Belakang: RGBA (0,0,0,0,3); Opacity: 0; z-index: 14;}. headleftDiv {position: absolute; Lebar: 50%; Tinggi: 100%; Kiri: 4%; Atas: 25%;}. HeadleftDivfont {font-weight: 500; /*line-height: 58px;*/ font-size: 20px; Warna: #333;}/*--------------------------- Subinfodiv --------------*/. MainDivMainInfodivSubinFodiv {Posisi: Absolute; Lebar: 100%; Tinggi: 13%; Latar Belakang: Putih; Border: 1px solid #eaeaea;}. MainDivMainInfodivSubinFodiv: Hover {latar belakang: rgba (0,0,0,0.3);}. MainDivMainInfoiv_headtextDiv {posisi: absolute; Atas: 10%; Kiri: 3%; Lebar: 30%; Tinggi: 30%; latar belakang: rgba (0,0,0,0);}. MainDivMainInfoiv_MaintextDiv {position: absolute; Atas: 52%; Kiri: 3%; Lebar: 95%; Tinggi: 20%; latar belakang: rgba (0,0,0,0);}. MainDivMainInfoiv_trailtextDiv {position: absolute; Bawah: 3%; Kiri: 3%; Lebar: 30%; Tinggi: 30%; latar belakang: rgba (0,0,0,0);}. MainDivMainInfoiv_HeadTextDiv_TextBox {Posisi: Absolute; TOP: 25%; Lebar: 100%; Tinggi: 50%; Latar belakang: RGBA (0,0,0,0);}. Cardinfotitle {font-weight: 700; /*Warna: #1F264D;*/ Tinggi: 22px; Tampilan: blok inline; Max-Width: 600px; meluap: tersembunyi; teks-overflow: ellipsis; SPACE PUTIH: Nowrap; kursor: pointer;}. flexfont {display: flex; font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;}. RightFlexFont {Color: #B3B3B3; Font-Weight: 500; Teks-Align: Benar; font-size: 12px; Warna: RGB (179, 179, 179);}. Infodiv_right_1 {Posisi: Absolute; Atas: 30%; Kanan: 2%; Lebar: 30%; Tinggi: 30%; latar belakang: rgba (0,0,0,0);}. infodiv_right_2 {position: absolute; Atas: 55%; Kanan: 2%; Lebar: 30%; Tinggi: 30%; latar belakang: rgba (0,0,0,0);}. MainDivMainInfoiv_trailTextDiv_TextBox {Posisi: Absolute; TOP: 25%; Lebar: 100%; Tinggi: 50%; latar belakang: rgba (0,0,0,0);}. MainDivMainInfoiv_MaintextDiv_TextBox {position: absolute; TOP: 25%; Lebar: 100%; Tinggi: 50%; Latar belakang: RGBA (0,0,0,0);}html 页面 ：
<!!! src = https: //cdn.staticfile.org/jQuery/1.10.2/jquery.min.js> </script> </head> <body> <script> $ (function () {// 产生悬浮特效 产生悬浮特效 也可以使用 也可以使用 css: hover 实现 // 头部由 js 实现 ， ， 产生悬浮特效 ， ， ， ， ， ， ， ， ， ， {{{{{{cs {// 设置其透明度 ， 为 1 时不透明 ， 为 0 时透明 $ (ini) .css (opacity, 1);实现悬浮特效的 Div ， 头部由 JS 实现 ， 后面的子项由 CSS: Hover 实现-> <Div class = oklusionDiv> </div> <div class = headleftDiv headleftDivFont> 我收到的 </div> </div> <div class = MainDivAininfoIv style = <Div class = MainDivmMinfodod; Kiri: 0%; TOP: 0%;> <Div class = MainDivMainInfoiv_HeadTextDiv style => <Div class = MainDivMainInfoiv_headTextDiv_textbox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </Div> </Div> <Div Class = MainDivMainInfoiv_MaintextDy style = Div> <Div> <Div Class = MainDivMainFoIV_MaintextDyger font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <Div class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> <div class = MainDivAnInInfodSubinfodiv style: Posisi; Kiri: 0%; TOP: 13%;> <Div class = MainDivMainInfoiv_HeadTextDiv style => <Div class = MainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </Div> <Div class = MainDivMainInfoiv_maintextDyger font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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; Kiri: 0%; TOP: 26%;> <Div class = MainDivMainInfoiv_HeadTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textbox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </Div> <Div class = MainDivMainInfoiv_maintextDy style = div> <Div> <Div Class = MainDivMainFoIV_MaintextDyger font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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; Kiri: 0%; TOP: 39%;> <Div class = MainDivMainInfoiv_HeadTextDiv style => <Div class = MainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </Div> </Div> <Div Class = MainDivMainInfoiv_MaintextDyger = </Div> <Div Class = MainDivMainFoIV_MaintextDerx font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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 = posisi: absolute; Kiri: 0%; TOP: 52%;> <Div class = MainDivMainInfoiv_headTextDiv style => <Div class = MainDivMainInfoiv_headtextDiv_textbox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </Div> </Div> <Div class = MainDivMainInfoiv_MaintextDyger = </Div> <Div Class = MainDivMainInfoiv_MaintextDerx font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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 = posisi: absolute; Kiri: 0%; TOP: 65%;> <Div class = MainDivMainInfoiv_HeadTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </Div> </Div> <Div Class = MainDivMainInfoiv_MaintextDyger = </Div> <Div Class = MainDivMainFoIV_MaintextDeVer = Delover: MainDivMainFoIV_MaintextDEXTDEXTDEXDEX; font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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; Kiri: 0%; TOP: 78%;> <Div class = MainDivMainInfoiv_headTextDiv style => <div class = MainDivMainInfoiv_headTextDiv_textbox CardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <Div class = MainDivMainInfoiv_MaintextDyge = Delover: MainDivMainFoIV_MaintextDEXTDEXTREXTDEXDEXTDEVEIV_MAINTEXTREXDEX; font-size: 12px; Warna: RGB (102, 102, 102); Tinggi: 20px;> 发起人 ： 张三 <div class = MainDivMainInfoiv_MaintextDiv_textbox style => </div> </div> <div class = MainDivMainInfoiv_trailtextDiv style => <Div class = MainDivAinInfoiv_trailtextDiv_textbox = 李四 ~ ， ~ ， ~ 李四 ~ <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 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！