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内容请搜索武林网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持武林网!,希望大家以后多多支持武林网!