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