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