HTML 实现简单 ListViews 效果
实现效果 ：
CSS 样式文件 ListViewTest.css
Body {founale: Whitesmoke;}#mainContentDiv {position: Absolute; Ширина: 70%; высота: 100%; Фон: Whitesmoke; Верх: 10%; Слева: 10%;}. MainDivMainImgdiv {позиция: абсолют; Ширина: 100%; Высота: 50px; фон: белый;}. MainDivMainInfoiv {позиция: абсолют; Ширина: 100%; высота: 100%; Фон: Whitesmoke; Верх: 60px;}/*js 实现悬浮特效的 div*/. occlusiondiv {position: Absolute; Ширина: 100%; высота: 100%; Предпосылки: RGBA (0,0,0,0,3); непрозрачность: 0; z-index: 14;}. HeadleftDiv {позиция: абсолют; Ширина: 50%; высота: 100%; Слева: 4%; Верх: 25%;}. HeadleftDivfont {font-Weight: 500; /*Линия-высота: 58px;*/ font-size: 20px; Цвет: #333;}/*--------------------------- Subinfodiv --------------*/. MainDivMainInfodivSubinfodiv {позиция: Absolute; Ширина: 100%; высота: 13%; Фон: белый; Граница: 1px solid #eaeaea;}. maindivmaininfodivsubinfodiv: hover {founal: rgba (0,0,0,0,3);}. MainDivmainFoiv_headTextDiv {позиция: Absolute; Верх: 10%; Слева: 3%; Ширина: 30%; высота: 30%; Фон: rgba (0,0,0,0);}. MainDivMainInfoiv_maintextDiv {позиция: абсолют; Верх: 52%; Слева: 3%; Ширина: 95%; высота: 20%; Фон: rgba (0,0,0,0);}. MainDivMainInfoiv_trailTextDiv {позиция: абсолют; Внизу: 3%; Слева: 3%; Ширина: 30%; высота: 30%; Фон: rgba (0,0,0,0);}. MainDivMainInfoiv_headTextDiv_Textbox {позиция: абсолют; Верх: 25%; Ширина: 100%; высота: 50%; Предпосылки: RGBA (0,0,0,0);}. CardinFotitle {Font-Weight: 700; /*Цвет: #1F264D;*/ Высота: 22px; дисплей: встроенный блок; максимальная ширина: 600px; переполнение: скрыто; Текст-переполнение: ellipsis; Белое пространство: Nowrap; Cursor: pointer;}. Flexfont {Display: Flex; размер шрифта: 12px; Цвет: RGB (102, 102, 102); Высота: 20px;}. Rightflexfont {color: #b3b3b3; шрифт-вес: 500; Текст-альбом: верно; размер шрифта: 12px; Цвет: RGB (179, 179, 179);}. Infodiv_right_1 {позиция: абсолют; Верх: 30%; Справа: 2%; Ширина: 30%; высота: 30%; Фон: rgba (0,0,0,0);}. Infodiv_right_2 {позиция: абсолют; Верх: 55%; Справа: 2%; Ширина: 30%; высота: 30%; Фон: rgba (0,0,0,0);}. MainDivMainInfoiv_trailTextDiv_Textbox {позиция: Absolute; Верх: 25%; Ширина: 100%; высота: 50%; Фон: rgba (0,0,0,0);}. MainDivMainInfoiv_maintextDiv_Textbox {позиция: Absolute; Верх: 25%; Ширина: 100%; высота: 50%; Предпосылки: RGBA (0,0,0,0);}html 页面 ：
<! 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 实现 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 下面列表的子项由 occ 实现 实现 实现 实现 实现 实现. () {// 设置其透明度 ， 1 时不透明 ， 为 0 时透明 $ (this) .css (непрозрачность, 1);实现悬浮特效的 div ， 头部由 js 实现 ， 后面的子项由 css: hover 实现-> <div class = occlusiondiv> </div> <div class = headleftdiv headleftdivfont> 我收到的 </div> </div> <div class = maindivmaininfoiv style => <div class = maindivmainfodivsubinfinfodiv style: absolute style => <div = maindivmainfodivsubinfinfodiv style: Absolute; слева: 0%; Верх: 0%;> <div class = mainDivMainInfoiv_headTextDiv Style => <div class = mainDivMainInfoiv_headtextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdiv style = show: flex; размер шрифта: 12px; Цвет: 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 = положение: абсолютно; слева: 0%; Верх: 13%;> <div class = mainDivMainInfoiv_headTextDiv Style => <div class = mainDivMainInfoiv_headTextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdiv style = show: flex; размер шрифта: 12px; Цвет: 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 = maindivmainfodivsubinfodiv Style = Положение: Абсолют; слева: 0%; Верх: 26%;> <div class = mainDivMainInfoiv_headTextDiv Style => <div class = mainDivMainInfoiv_headTextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdiv style = show: flex; размер шрифта: 12px; Цвет: 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 = maindivmainfodivsubinfodiv Style = Положение: Абсолют; слева: 0%; Верх: 39%;> <div Class = mainDivMainInfoiv_headTextDiv Style => <div class = mainDivMainInfoiv_headTextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdivdiv = show: flex; размер шрифта: 12px; Цвет: 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 = положение: абсолютное; слева: 0%; Верх: 52%;> <div Class = mainDivMainInfoiv_headTextDiv Style => <div class = mainDivMainInfoiv_headTextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdiv style = show: flex; размер шрифта: 12px; Цвет: 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 = положение: абсолютное; слева: 0%; Верх: 65%;> <div Class = mainDivMainInfoiv_headTextDiv Style => <div Class = mainDivMainInfoiv_headTextDiv_Textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdivdev = show: flex: flex; размер шрифта: 12px; Цвет: 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 = maindivmainfodivsubinfodiv Style = Положение: Абсолют; слева: 0%; Верх: 78%;> <div class = mainDivMainInfoiv_headTextDiv Style => <div Class = mainDivMainInfoiv_headTextDiv_textbox cardInfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> <div class = maindivmainfoiv_maintextdivdiv = show: flex: flex; размер шрифта: 12px; Цвет: 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 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！