您现在的位置是:网站首页> 编程资料编程资料
html实现简单ListViews效果的实例代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
2021-08-29
1499人已围观
简介 这篇文章主要介绍了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中input提示文字样式修改的示例代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 详解html中表格table的行列合并问题解决关于表格table嵌套,边框合并问题的解决方法table合并单元格与img图片铺满整个td的html
- Layui表格选中指定行的radio单选框并滚动到该行的实现代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- Quill编辑器插入自定义HTML记录的示例详解纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- html 实现tab切换的示例代码HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
- HTML+CSS相对宽度和绝对宽度冲突时的div解决方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- html table实现复杂表头的示例代码html Table 表头固定的实现
- HTML的relative与absolute使用及区别详解HTML相对路径(Relative Path)和绝对路径(Absolute Path)深入理解
- html页面展示json数据并格式化的方法Html5页面内使用JSON动画的实现HTML5中使用json对象的实例代码基于HTML5的WebGL实现json和echarts图表展现在同一个界面html格式化输出JSON示例(测试接口)html格式化json的实例代码在html中显示JSON数据的方法Html5中localStorage存储JSON数据并读取JSON数据的实现方法举例详解HTML5中使用JSON格式提交表单html table表数据转Json格式示例代码
