HTML 인스턴스 코드는 간단한 목록 뷰 효과를 구현합니다

저자：Eve Cole 업데이트 시간：2025-04-14 11:16:02

html 实现简单 listviews 效果

实现效果：

CSS v ListViewTest.css

 Body {배경 : Whitesmoke;}#MainContentDiv {위치 : 절대; 너비 : 70%; 높이 : 100%; 배경 : Whitesmoke; 상단 : 10%; 왼쪽 : 10%;}. MainDivMainimgdiv {위치 : 절대; 너비 : 100%; 높이 : 50px; 배경 : 흰색;}. MainDivMainInfoiv {위치 : 절대; 너비 : 100%; 높이 : 100%; 배경 : Whitesmoke; 상단 : 60px;}/*js 实现悬浮特效的 div*/. OcclusionDiv {위치 : 절대; 너비 : 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;}/*-----------------------------------------------*/. MainDivMainInfodivsubinfodiv {위치 : 절대; 너비 : 100%; 높이 : 13%; 배경 : 흰색; 국경 : 1px solid #eaea;}. MainDivmaininfodivsubinfodiv : hover {배경 : rgba (0,0,0,0.3);}. MainDivMainInfoiv_headtextDiv {위치 : 절대; 상단 : 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; 오버플로 : 숨겨진; 텍스트 오버 플로우 : 일방시스; 흰색 공간 : Nowrap; 커서 : 포인터;}. flexfont {display : flex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;}. rightflexfont {색상 : #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 {위치 : 절대; 상단 : 25%; 너비 : 100%; 높이 : 50%; 배경 : RGBA (0,0,0,0);}. MainDivMainInfoiv_MainTextDiv_TextBox {위치 : 절대; 상단 : 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> src = https : //cdn.staticfile.org/jquery/1.10.2/jquery.min.js> </script> </head> <body> <cript> $ (function () {// 产生悬浮特效 产生悬浮特效, 也可以使用 css : hover 实现 // 头部由 头部由 js 实现 实现, 下面列表的子项由 css : hover 实现 $ (.). {// 设置其透明度 1 时不透明 时不透明, 为 0 时透明 $ (this) .css (불투명도, 1);实现悬浮特效的 div, ， js 实现, 后面的子项由 css : hover 实现-> <div class = occlusiondiv> </div> <div class = headleftdiv headleftdivfont> 我收到的 </div> </div class = maindivmaininfoiv style => <div class = maindivmaininfodivsubinfodiv style = 절대 위치; 왼쪽 : 0%; 상단 : 0%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextBox CardInfotitle Style => _ _ </div> <div class = mainDivMainInfoiv_MainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div> </div> <div class = maindivmaininfodivsubinfodiv 스타일 = 위치 : 절대; 왼쪽 : 0%; 상단 : 13%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextBox CardInfotitle Style => _ _ </div> <div class = mainDivMainInfoiv_mainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </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; 왼쪽 : 0%; 상단 : 26%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextBox CardInfotitle Style => _ _ </div> <div class = mainDivMainInfoiv_MainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </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; 왼쪽 : 0%; 상단 : 39%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextDiv_TextBox CardInfotitle Style => 论电子合同的法律效力及问题 _ </div> <div class = mainDivMainInfoiv_MainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div class = maindivmaininfodivsubinfodiv 스타일 = 위치; 왼쪽 : 0%; 상단 : 52%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextDiv_TextBox CardInfotitle Style => 论电子合同的法律效力及问题 _ </div> <div class = mainDivMainInfoiv_MainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div class = maindivmaininfodivsubinfodiv 스타일 = 위치; 왼쪽 : 0%; 상단 : 65%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ </div> <div class = mainDivMainInfoiv_MainTextDiv Style = display : flex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </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; 왼쪽 : 0%; 상단 : 78%;> <div class = mainDivMainInfoiv_headtextDiv style => <div class = mainDivMainInfoiv_HeadtDiv_TextBox CardInfotitle style => 论电子合同的法律效力及问题 _ </div> </div> <div class = mainDivMainInfoiv_mainTextDiv Style = display : lex; 글꼴 크기 : 12px; 색상 : RGB (102, 102, 102); 높이 : 20px;> 发起人 ： 张三 <div class = mainDivMainInfoiv_MainTextDiv_textBox 스타일 => </div> </div> </div> <div class = mainDivMainInfoiv_trailTextDiv 스타일 => <div class = mainDivMainInfoiv_trailTextDiv_TextBox Plexfont Plex ~ ^ ^ ^ givlivectdiv_textDiv 스타일 => </div> <div class = infodiv_right_1 rightflexfont> </div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> </div> </div> </body> </html>

总结

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