设为首页收藏本站
天天打卡
切换到窄版

 找回密码
 立即注册
搜索
爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享»首页 › 其他交流 | 闲聊交流 › HTML/Xhtml › html实现简单ListViews效果的实例代码
12下一页
返回列表 发新帖
查看: 143|回复: 14

html实现简单ListViews效果的实例代码

[复制链接]
sky未成年丶

2

主题

37

回帖

119

积分

注册会员

积分
119
发表于 2024-4-20 10:34:32 | 显示全部楼层 |阅读模式
html实现简单ListViews效果
实现效果：

css样式文件listviewTest.css
  1. body{
  2.     background: whitesmoke;
  3. }
  4. #mainContentDiv{
  5.     position: absolute;
  6.     width : 70%;
  7.     height :100%;
  8.     background: whitesmoke;
  9.     top: 10%;
  10.     left: 10%;
  11. }
  12. .mainDivMainImgDiv{
  13.     position: absolute;
  14.     width : 100%;
  15.     height : 50px;
  16.     background: white;
  17. }
  18. .mainDivMainInfoiv{
  19.     position: absolute;
  20.     width : 100%;
  21.     height : 100%;
  22.     background: whitesmoke;
  23.     top: 60px;
  24. }
  25. /*js实现悬浮特效的div*/
  26. .occlusionDiv{
  27.     position: absolute;
  28.     width: 100%;
  29.     height: 100%;
  30.     background: rgba(0,0,0,0.3);
  31.     opacity:0;
  32.     z-index: 14;
  33. }
  34. .headLeftDiv{
  35.     position: absolute;
  36.     width: 50%;
  37.     height: 100%;
  38.     left: 4%;
  39.     top: 25%;
  40. }
  41. .headLeftDivFont{
  42.     font-weight: 500;
  43.     /*line-height: 58px;*/
  44.     font-size: 20px;
  45.     color: #333;
  46. }
  47. /*---------------------------subInfoDiv--------------*/
  48. .mainDIvMainInfoDivSubInfoDiv{
  49.     position: absolute;
  50.     width : 100%;
  51.     height: 13%;
  52.     background:white;
  53.     border: 1px solid #eaeaea;
  54. }
  55. .mainDIvMainInfoDivSubInfoDiv:hover{
  56.     background: rgba(0,0,0,0.3);
  57. }
  58. .mainDivMainInfoiv_HeadTextDiv{
  59.     position: absolute;
  60.     top: 10%;
  61.     left: 3%;
  62.     width : 30%;
  63.     height: 30%;
  64.     background:rgba(0,0,0,0);
  65. }
  66. .mainDivMainInfoiv_mainTextDiv{
  67.     position: absolute;
  68.     top: 52%;
  69.     left: 3%;
  70.     width : 95%;
  71.     height: 20%;
  72.     background:rgba(0,0,0,0);
  73. }
  74. .mainDivMainInfoiv_TrailTextDiv{
  75.     position: absolute;
  76.     bottom: 3%;
  77.     left: 3%;
  78.     width : 30%;
  79.     height: 30%;
  80.     background:rgba(0,0,0,0);
  81. }
  82. .mainDivMainInfoiv_HeadTextDiv_TextBox{
  83.     position: absolute;
  84.     top: 25%;
  85.     width: 100%;
  86.     height: 50%;
  87.     background:rgba(0,0,0,0);
  88. }
  89. .cardInfoTitle {
  90.     font-weight: 700;
  91.     /*color: #1f264d;*/
  92.     height: 22px;
  93.     display: inline-block;
  94.     max-width: 600px;
  95.     overflow: hidden;
  96.     text-overflow: ellipsis;
  97.     white-space: nowrap;
  98.     cursor: pointer;
  99. }
  100. .flexFont{
  101.     display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;
  102. }
  103. .rightFlexFont{
  104.     color: #b3b3b3;
  105.     font-weight: 500;
  106.     text-align: right;
  107.     font-size: 12px;
  108.     color: rgb(179, 179, 179);
  109. }
  110. .InfoDiv_Right_1{
  111.     position: absolute;
  112.     top: 30%;
  113.     right: 2%;
  114.     width : 30%;
  115.     height: 30%;
  116.     background:rgba(0,0,0,0);
  117. }
  118. .InfoDiv_Right_2{
  119.     position: absolute;
  120.     top: 55%;
  121.     right: 2%;
  122.     width : 30%;
  123.     height: 30%;
  124.     background:rgba(0,0,0,0);
  125. }
  126. .mainDivMainInfoiv_TrailTextDiv_TextBox{
  127.     position: absolute;
  128.     top: 25%;
  129.     width: 100%;
  130.     height: 50%;
  131.     background:rgba(0,0,0,0);
  132. }
  133. .mainDivMainInfoiv_mainTextDiv_TextBox{
  134.     position: absolute;
  135.     top: 25%;
  136.     width: 100%;
  137.     height: 50%;
  138.     background:rgba(0,0,0,0);
  139. }
复制代码
html页面：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ListviewTest</title>
  6.     <link rel="stylesheet" href="listviewTest.css">
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  8. </head>
  9. <body>

  11. <script>
  12.     $(function () {

  14.         //产生悬浮特效，也可以使用css:hover实现
  15.         //头部由js实现，下面列表的子项由css:hover实现
  16.         $(".occlusionDiv").mouseover(function () {
  17.             //设置其透明度，为1时不透明，为0时透明
  18.             $(this).css("opacity", "1");
  19.         }).mouseout(function () {
  20.             $(this).css("opacity", "0");
  21.         });
  22.     });

  24. </script>

  26. <div id="mainContentDiv">

  28.     <div class="mainDivMainImgDiv" style="">
  29. <!--        实现悬浮特效的div，头部由js实现，后面的子项由css:hover实现-->
  30.         <div class="occlusionDiv"></div>

  32.         <div class="headLeftDiv headLeftDivFont">我收到的</div>

  34.     </div>

  36.     <div class="mainDivMainInfoiv" style="">



  40.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 0%;">

  42.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  43.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  44.                     论电子合同的法律效力及问题_于晓松
  45.                 </div>
  46.             </div>

  48.             <div class="mainDivMainInfoiv_mainTextDiv"
  49.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  50.                 发起人：张三
  51.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  52.             </div>
  53.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  54.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  55.                     参与人：张三，李四
  56.                 </div>
  57.             </div>

  59.             <div class="InfoDiv_Right_1 rightFlexFont">
  60.                 已撤回
  61.             </div>
  62.             <div class="InfoDiv_Right_2 rightFlexFont">
  63.                 2020-02-12 18:41:11
  64.             </div>

  66.             <div></div>
  67.         </div>

  69.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 13%;">

  71.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  72.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  73.                     论电子合同的法律效力及问题_于晓松
  74.                 </div>
  75.             </div>

  77.             <div class="mainDivMainInfoiv_mainTextDiv"
  78.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  79.                 发起人：张三
  80.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  81.             </div>
  82.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  83.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  84.                     参与人：张三，李四
  85.                 </div>
  86.             </div>

  88.             <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
  89.                 已完成
  90.             </div>
  91.             <div class="InfoDiv_Right_2 rightFlexFont">
  92.                 2020-02-12 18:41:11
  93.             </div>
  94.         </div>

  96.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 26%;">

  98.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  99.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  100.                     论电子合同的法律效力及问题_于晓松
  101.                 </div>
  102.             </div>

  104.             <div class="mainDivMainInfoiv_mainTextDiv"
  105.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  106.                 发起人：张三
  107.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  108.             </div>
  109.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  110.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  111.                     参与人：张三，李四
  112.                 </div>
  113.             </div>

  115.             <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
  116.                 已完成
  117.             </div>
  118.             <div class="InfoDiv_Right_2 rightFlexFont">
  119.                 2020-02-12 18:41:11
  120.             </div>
  121.         </div>

  123.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 39%;">

  125.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  126.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  127.                     论电子合同的法律效力及问题_于晓松
  128.                 </div>
  129.             </div>

  131.             <div class="mainDivMainInfoiv_mainTextDiv"
  132.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  133.                 发起人：张三
  134.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  135.             </div>
  136.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  137.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  138.                     参与人：张三，李四
  139.                 </div>
  140.             </div>

  142.             <div class="InfoDiv_Right_1 rightFlexFont">
  143.                 已撤回
  144.             </div>
  145.             <div class="InfoDiv_Right_2 rightFlexFont">
  146.                 2020-02-12 18:41:11
  147.             </div>
  148.         </div>

  150.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 52%;">

  152.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  153.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  154.                     论电子合同的法律效力及问题_于晓松
  155.                 </div>
  156.             </div>

  158.             <div class="mainDivMainInfoiv_mainTextDiv"
  159.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  160.                 发起人：张三
  161.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  162.             </div>
  163.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  164.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  165.                     参与人：张三，李四
  166.                 </div>
  167.             </div>

  169.             <div class="InfoDiv_Right_1 rightFlexFont">
  170.                 已撤回
  171.             </div>
  172.             <div class="InfoDiv_Right_2 rightFlexFont">
  173.                 2020-02-12 18:41:11
  174.             </div>
  175.         </div>

  177.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 65%;">

  179.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  180.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  181.                     论电子合同的法律效力及问题_于晓松
  182.                 </div>
  183.             </div>

  185.             <div class="mainDivMainInfoiv_mainTextDiv"
  186.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  187.                 发起人：张三
  188.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  189.             </div>
  190.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  191.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  192.                     参与人：张三，李四
  193.                 </div>
  194.             </div>

  196.             <div class="InfoDiv_Right_1 rightFlexFont"  style="color: #6db56d;">
  197.                 已完成
  198.             </div>
  199.             <div class="InfoDiv_Right_2 rightFlexFont">
  200.                 2020-02-12 18:41:11
  201.             </div>
  202.         </div>

  204.         <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 78%;">

  206.             <div class="mainDivMainInfoiv_HeadTextDiv" style="">
  207.                 <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
  208.                     论电子合同的法律效力及问题_于晓松
  209.                 </div>
  210.             </div>

  212.             <div class="mainDivMainInfoiv_mainTextDiv"
  213.                  style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
  214.                 发起人：张三
  215.                 <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
  216.             </div>
  217.             <div class="mainDivMainInfoiv_TrailTextDiv" style="">
  218.                 <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
  219.                     参与人：张三，李四
  220.                 </div>
  221.             </div>

  223.             <div class="InfoDiv_Right_1 rightFlexFont">
  224.                 已撤回
  225.             </div>
  226.             <div class="InfoDiv_Right_2 rightFlexFont">
  227.                 2020-02-12 18:41:11
  228.             </div>
  229.         </div>


  232.     </div>
  233. </div>
  234. </body>
  235. </html>
复制代码
总结
到此这篇关于html实现简单ListViews效果的实例代码详解的文章就介绍到这了,更多相关html实现ListViews内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

心灵之光666

0

主题

43

回帖

87

积分

注册会员

积分
87
发表于 2024-5-12 04:42:54 | 显示全部楼层
这个话题很有趣，我想多了解一些
回复 支持 反对

使用道具 举报

多余的解释

0

主题

36

回帖

71

积分

注册会员

积分
71
发表于 2024-5-15 12:11:46 | 显示全部楼层
同意你的观点，我们有共鸣。
回复 支持 反对

使用道具 举报

阿林林的故事

1

主题

37

回帖

97

积分

注册会员

积分
97
发表于 2024-5-18 16:57:08 | 显示全部楼层
好用好用
回复 支持 反对

使用道具 举报

华中薄荷

0

主题

41

回帖

83

积分

注册会员

积分
83
发表于 2024-6-16 17:32:44 | 显示全部楼层
感谢分享，受益匪浅！
回复 支持 反对

使用道具 举报

未知

0

主题

39

回帖

79

积分

注册会员

积分
79
发表于 2024-6-22 15:11:29 | 显示全部楼层
友善的讨论氛围是非常重要的。
回复 支持 反对

使用道具 举报

Honor

0

主题

19

回帖

39

积分

新手上路

积分
39
发表于 2024-7-12 06:23:11 | 显示全部楼层
太棒了！感谢分享这个信息！
回复 支持 反对

使用道具 举报

温柔的猫1199

4

主题

67

回帖

211

积分

中级会员

积分
211
发表于 2024-7-28 22:00:09 | 显示全部楼层
太棒了！感谢分享这个信息！
回复 支持 反对

使用道具 举报

用户fsg_1r1

0

主题

51

回帖

103

积分

注册会员

积分
103
发表于 2024-8-3 08:28:12 | 显示全部楼层
能给个链接吗？我想深入了解一下。
回复 支持 反对

使用道具 举报

快乐的小熊猫

1

主题

56

回帖

113

积分

注册会员

积分
113
发表于 2024-8-6 22:33:51 | 显示全部楼层
非常感谢你的观点，让我受益良多！
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 11:32 , Processed in 0.093263 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表