html实现简单listViews效果
实现效果：
CSS样式文件listViewTest.css
身体{背景：whitesmoke;}＃mainContentDiv {位置：绝对;宽度：70％；身高：100％；背景：Whitesmoke；高层：10％；左：10％;}。MaindivMainImgDiv{位置：绝对；宽度：100％；身高：50px;背景：white;}。MAINDIVMAININFOIV{位置：绝对；宽度：100％；身高：100％；背景：Whitesmoke；顶部：60px;}/*js实现悬浮特效的div*/。occlusionDiv {position：absolute;宽度：100％；身高：100％；背景：RGBA（0,0,0,0.3）;不透明度：0; z-index：14;}。headleftDiv {位置：absolute;宽度：50％；身高：100％；左：4％；顶部：25％;}。headleftdivfont {font-prong-rate：500; /*线高：58px;*/ font-size：20px; color: #333;}/*---------------------------subInfoDiv--------------*/.mainDIvMainInfoDivSubInfoDiv{ position: absolute;宽度：100％；身高：13％；背景：白色；边界：1PX实心#eeaea;}。MaindivMainInfodivSubinFodiv：hover {background：rgba（0,0,0,0,0.3）;}。MAINDIVMAININFOIV_HEADTDEXTDIV{位置{位置：absolute; absolute;高层：10％；左：3％；宽度：30％；身高：30％；背景：rgba（0,0,0,0）;}。MaindivMainInfoiv_maintextDiv{位置：absolute;顶部：52％；左：3％；宽度：95％；身高：20％；背景：rgba（0,0,0,0）;}。MaindivMainInfoiv_trailTextDiv{位置：绝对;底部：3％；左：3％；宽度：30％；身高：30％；背景：rgba（0,0,0,0）;}。MaindivMainInfoiv_headTextDiv_textbox{位置：absolute;顶部：25％；宽度：100％；身高：50％；背景：RGBA（0,0,0,0）;}。cardinfotitle {font-pronger：700; /*颜色：＃1F264D;*/高度：22px;显示：内联块；最大宽度：600px;溢出：隐藏；文字跨流：省略号；白色空间：nowrap;光标：指针;}。flexfont {display：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{position：absolute; absolute;顶部：25％；宽度：100％；身高：50％；背景：rgba（0,0,0,0）;}。MaindivMainInfoiv_maintextDiv_TextBox{position：absolute; absolute;顶部：25％；宽度：100％；身高：50％；背景：RGBA（0,0,0,0）;}html：：
<！doctype html> <html lang = en> <head> <head> <meta charset = utf-8> <title> listViewTest </title> <link rel = stylesheet href = listViewTest.css> <脚本src = https：//cdn.staticfile.org/jquery/1.10.2/jquery.min.js> </script> </script> </head> <身体> <body> <script> $（function（function（）{//产生悬浮特效{//设置其透明度，为，为，为$（this）.css（opcity，1）;实现悬浮特效的div，头部由左：0％； top：0％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textdiv_textbox cardinfotitle style =>> __于晓松_于晓松</div> </div> </div> <div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> </div> </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodiv style = sigal = soption = location：absoalte：absolute;左：0％； top：13％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmainInfoiv_headtextddiv_textdiv_textbox cardinfotitle style =>> __于晓松_于晓松</div> </div> </div> </div class = div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont样式=颜色：＃6db56d;>已完成</div </div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:41:11 </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodivsubinfodiv样式左：0％；顶部：26％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextddiv_textdiv_textbox cardinfotitle style =>>_于晓松_于晓松_于晓松</div> </div> </div> <div class = nimdivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont样式=颜色：＃6db56d;>已完成</div </div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:41:11 </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodivsubinfodiv样式左：0％；顶部：39％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextddiv_textddiv_textbox cardinfotitle style =>>_于晓松_于晓松</div> </div> </div> </div> <div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodiv style = position = position = position = location = bortion：barter;左：0％；顶部：52％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextddiv_textdiv_textbox cardinfotitle style =>>_于晓松_于晓松_于晓松</div> </div> </div> </div> <div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodiv style = position = position = position = location = bortion：barter;左：0％；顶部：65％;> <div class = maindivMainInfoiv_headtextDiv style => <div class = maindivmaininfoiv_headtextddiv_textddiv_textbox cardinfotitle style =>>_于晓松_于晓松</div> </div> </div> </div> <div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont样式=颜色：＃6db56d;>已完成</div </div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:41:11 </div> </div> </div> <div class = maindivmaininfodivsubinfodivsubinfodivsubinfodiv样式左：0％；顶部：78％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextddiv_textbox cardinfotitle style =>>_于晓松_于晓松_于晓松</div> </div> </div> </div> <div class = maindivmaininfoiv_maintextddiv style字体大小：12px;颜色：RGB（102，102，102）; height: 20px;> 发起人：张三 <div class=mainDivMainInfoiv_mainTextDiv_TextBox style=></div> </div> <div class=mainDivMainInfoiv_TrailTextDiv style=> <div class=mainDivMainInfoiv_TrailTextDiv_TextBox flexFont style=> 参与人：张三，李四 </div> </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> </div> </div> </div> </div> </div> </div> </hody> </html> </html>总结到此这篇关于html实现简单listViews效果的实例代码详解的文章就介绍到这了，更多相关html listViews内容请搜索武林网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持武林网！，希望大家以后多多支持武林网！