您现在的位置是：网站首页> 编程资料编程资料

html实现简单ListViews效果的实例代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果

2023-10-08 385人已围观

简介这篇文章主要介绍了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页面：

ListviewTest
我收到的
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已撤回 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已完成 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已完成 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已撤回 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已撤回 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已完成 
 2020-02-12 18:41:11 
 论电子合同的法律效力及问题_于晓松 
 发起人：张三 
 参与人：张三，李四 
 已撤回 
 2020-02-12 18:41:11

总结

到此这篇关于html实现简单ListViews效果的实例代码详解的文章就介绍到这了,更多相关html实现ListViews内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：html中把多余文字转化为省略号的实现方法方法html文本溢出显示省略字符的两种常用解决方法HTML超出文本显示省略号...通过text-overflow实现规范HTML代码可以节省修改代码的时间

下一篇：html 表格比较宽溢出的解决方法全面了解html.css溢出html文本溢出显示省略字符的两种常用解决方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢