html实现简单listViews效果
实现效果：
CSS样式文件listViewTest.css
body {background：whitesmoke;}＃maincontentdiv {position：absolute;幅：70％;高さ：100％;背景：ホワイトスモーク;トップ：10％;左：10％;}。maindivmainimgdiv {position：absolute;幅：100％;高さ：50px;背景：white;}。maindivmaininfoiv {position：absolute;幅：100％;高さ：100％;背景：ホワイトスモーク; TOP：60px;}/*js div*/。occlusiondiv {position：absolute;幅：100％;高さ：100％;背景：RGBA（0,0,0,0.3）;不透明：0; z-index：14;}。headleftdiv {position：absolute;幅：50％;高さ：100％;左：4％;上：25％;}。headleftdivfont {font-weight：500; /*line-height：58px;*/ font-size：20px;色：＃333;}/*--------------------------------------------------------------*/。MainDivMainInfodivsubinfodiv{position：absolute;幅：100％;高さ：13％;背景：白。境界：1px solid #eaeaeaトップ：10％;左：3％;幅：30％;高さ：30％;背景：rgba（0,0,0,0）;}。maindivmaininfoiv_maintextdiv {position：absolute;上：52％。左：3％;幅：95％;高さ：20％;背景：rgba（0,0,0,0）;}。maindivmaininfoiv_trailtextdiv {position：absolute;下：3％;左：3％;幅：30％;高さ：30％;背景：rgba（0,0,0,0）;}。maindivmaininfoiv_headtextdiv_textbox {position：absolute;トップ：25％;幅：100％;高さ：50％;背景：rgba（0,0,0,0）;}。cardinfotitle {font-weight：700; /*色：＃1f264d;*/ height：22px;ディスプレイ：インラインブロック。最大幅：600px;オーバーフロー：隠し;テキストオーバーフロー：省略記号;ホワイトスペース：nowrap;カーソル：pointer;}。flexfont {display：flex;フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;}。右flexfont{color：＃b3b3b3; font-weight：500;テキストアライグ：右;フォントサイズ：12px;色：RGB（179、179、179）;}。infodiv_right_1 {position：absolute;トップ：30％;右：2％;幅：30％;高さ：30％;背景：RGBA（0,0,0,0）;}。infodiv_right_2 {position：absolute;上：55％。右：2％;幅：30％;高さ：30％;背景：rgba（0,0,0,0）;}。maindivmaininfoiv_trailtextdiv_textbox {position：absolute;トップ：25％;幅：100％;高さ：50％;背景：rgba（0,0,0,0）;}。maindivmaininfoiv_maintextdiv_textbox {position：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> <スクリプトsrc = https：//cdn.staticfile.org/jquery/1.10.2/jquery.min.js> </script> </head> <body> <script> $（function（）{// {//设置其透明度、为1时不透明0时透明$（this）.css（ofacity、1）;实现悬浮特效的div、头部由js实现、后面的子项由css：hover实现 - > <div class = oclusiondiv> </div> <div class = headleftdivfont>我收到的</div> </div> <div class = maindivmaininfoiv style => <div class = maindivsubdivinfodiv style = asopute;左：0％; TOP：0％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题</div> </div> <div class = maindivmaininfoiv_maintdiv style = disply：flex;フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <div class = infodiv_right_1 rightflexfont>已撤回</div> <div class = infodiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div> </div> </div>左：0％; TOP：13％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题</div> </div> <div class = maindivmaininfoiv_maintdiv style = disply：flex;フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <div class = infodiv_right_1 rightflexfont style = color：＃6DB56D;>左：0％; TOP：26％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题</div> </div> <div class = maindivmaininfoiv_maintdiv style = disply：flex;フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <div class = infodiv_right_1 rightflexfont style = color：＃6DB56D;>左：0％; TOP：39％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题_フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <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;左：0％; TOP：52％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题_フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <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;左：0％; TOP：65％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题_フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <div class = infodiv_right_1 rightflexfont style = color：＃6DB56D;>左：0％; TOP：78％;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style =>论电子合同的法律效力及问题_フォントサイズ：12px;色：RGB（102、102、102）;高さ：20px;>发起人>：张三<div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class => maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextddiv_textbox flexfont =>>>>>>> <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>总结到此这篇关于HTMLlistViews