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內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持武林網！ ，希望大家以後多多支持武林網！