html实现简单ListViews效果的实例代码
发布时间:2020-03-11 14:32:27 作者:知北行 我要评论
这篇文章主要介绍了html实现简单ListViews效果的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
html实现简单ListViews效果
实现效果:
css样式文件listviewTest.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 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页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 | <!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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 在 Web 开发中,文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧,我们可以创造出许多独特的效果,例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
- 在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25
- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域(textarea)的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
- 本文详细介绍了如何利用HTML和CSS实现多种风格的进度条,包括基础的水平进度条、环形进度条以及球形进度条等,还探讨了如何通过动画增强视觉效果,内容涵盖了使用HTML原生标签2024-09-19
- Canvas 提供了一套强大的 2D 绘图 API,适用于各种图形绘制、图像处理和动画制作,可以帮助你创建复杂且高效的网页图形应用,这篇文章主要介绍了HTML中Canvas关键知识点总结2024-06-03
- 本文主要介绍了html table+css实现可编辑表格的示例代码,主要使用HTML5的contenteditable属性,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习2024-03-06
- 本文主要介绍了HTML中使用Flex布局实现双行夹批效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2024-02-22
- 在网站开发中,登录页面是必不可少的一部分,本文就来介绍一下HTML+CSS实现登录切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需2024-02-02
- 本文主要介绍了HTML+CSS实现全景轮播的示例代码,实现了一个简单的网页布局,其中包含了五个不同的盒子,每个盒子都有一个不同的背景图片,并且它们之间有一些间距,下面就2024-02-02
- 来到圣诞节了,那么就可以制作一颗HTML的圣诞树送给朋友,没有编程基础的小白也可以按照步骤操作也可以运行起来代码的,喜欢的朋友快来体验吧2023-12-26
最新评论