html实现简单ListViews效果的实例代码
|
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=http://www.jb51.net/web/"listviewTest.css"> <script src=http://www.jb51.net/web/"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> （编辑：ASP站长网） |
自动定时备份sqlserve
SQL语句练习实例技巧
HTML基本标签及结构详
html post请求之a标签
HTML表单标记教程(1):