html實現簡單ListViews效果
實現效果：
css樣式文件listviewTest.css
body{ background: whitesmoke;}#mainContentDiv{ position: absolute; width : 70%; height :100%; background: whitesmoke; top: 10%; left: 10%;}.mainDivMainImgDiv{ position: absolute; width : 100%; height : 50px; background: white;}.mainDivMainInfoiv{ position: absolute; width : 100%; height : 100%; background: whitesmoke; top: 60px;}/*js實現懸浮特效的div*/.occlusionDiv{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.3); opacity:0; z-index: 14;}.headLeftDiv{ position: absolute; width: 50%; height: 100%; left: 4%; top: 25%;}.headLeftDivFont{ font-weight: 500; /*line-height: 58px;*/ font-size: 20px; color: #333;}/*---------------------------subInfoDiv--------------*/.mainDIvMainInfoDivSubInfoDiv{ position: absolute; width : 100%; height: 13%; background:white; border: 1px solid #eaeaea;}.mainDIvMainInfoDivSubInfoDiv:hover{ background: rgba(0,0,0,0.3);}.mainDivMainInfoiv_HeadTextDiv{ position: absolute; top: 10%; left: 3%; width : 30%; height: 30%; background:rgba(0,0,0,0);}.mainDivMainInfoiv_mainTextDiv{ position: absolute; top: 52%; left: 3%; width : 95%; height: 20%; background:rgba(0,0,0,0);}.mainDivMainInfoiv_TrailTextDiv{ position: absolute; bottom: 3%; left: 3%; width : 30%; height: 30%; background:rgba(0,0,0,0);}.mainDivMainInfoiv_HeadTextDiv_TextBox{ position: absolute; top: 25%; width: 100%; height: 50%; background:rgba(0,0,0,0);}.cardInfoTitle { font-weight: 700; /*color: #1f264d;*/ height: 22px; display: inline-block; max-width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}.flexFont{ display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;}.rightFlexFont{ color: #b3b3b3; font-weight: 500; text-align: right; font-size: 12px; color: rgb(179, 179, 179);}.InfoDiv_Right_1{ position: absolute; top: 30%; right: 2%; width : 30%; height: 30%; background:rgba(0,0,0,0);}.InfoDiv_Right_2{ position: absolute; top: 55%; right: 2%; width : 30%; height: 30%; background:rgba(0,0,0,0);}.mainDivMainInfoiv_TrailTextDiv_TextBox{ position: absolute; top: 25%; width: 100%; height: 50%; background:rgba(0,0,0,0);}.mainDivMainInfoiv_mainTextDiv_TextBox{ position: absolute; top: 25%; width: 100%; height: 50%; background:rgba(0,0,0,0);}html頁面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ListviewTest</title> <link rel="stylesheet" href="listviewTest.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><script> $(function () { //產生懸浮特效，也可以使用css:hover實現 //頭部由js實現，下面列表的子項由css:hover實現 $(".occlusionDiv").mouseover(function () { //設置其透明度，為1時不透明，為0時透明 $(this).css("opacity", "1"); }).mouseout(function () { $(this).css("opacity", "0"); }); });</script><div id="mainContentDiv"> <div class="mainDivMainImgDiv" style=""><!-- 實現懸浮特效的div，頭部由js實現，后面的子項由css:hover實現--> <div class="occlusionDiv"></div> <div class="headLeftDiv headLeftDivFont">我收到的</div> </div> <div class="mainDivMainInfoiv" style=""> <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 0%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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 class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 13%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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" style="color: #6db56d;"> 已完成 </div> <div class="InfoDiv_Right_2 rightFlexFont"> 2020-02-12 18:41:11 </div> </div> <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 26%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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" style="color: #6db56d;"> 已完成 </div> <div class="InfoDiv_Right_2 rightFlexFont"> 2020-02-12 18:41:11 </div> </div> <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 39%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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 class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 52%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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 class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 65%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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" style="color: #6db56d;"> 已完成 </div> <div class="InfoDiv_Right_2 rightFlexFont"> 2020-02-12 18:41:11 </div> </div> <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 78%;"> <div class="mainDivMainInfoiv_HeadTextDiv" style=""> <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style=""> 論電子合同的法律效力及問題_于曉松 </div> </div> <div class="mainDivMainInfoiv_mainTextDiv" style="display: flex; font-size: 12px; color: 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></body></html>總結
到此這篇關于html實現簡單ListViews效果的實例代碼詳解的文章就介紹到這了,更多相關html實現ListViews內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
