HTML 实现简单 ListViews 效果
实现效果：
CSS 样式文件 ListViewTest.css
ร่างกาย {พื้นหลัง: 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;*/ ตัวอักษรขนาด: 20px; สี: #333;}/*------------------------------- Subinfodiv --------------*/. maindivmaininfodivsubinfodiv {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 13%; ความเป็นมา: สีขาว; ชายแดน: 1px Solid #EAEAEA;}. MAINDIVMAINFODIVSUBINFODIV: โฮเวอร์ {พื้นหลัง: RGBA (0,0,0,0.0.3);}. MAINDIVMAINFOIV_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; แสดง: Inline-Block; ความกว้างสูงสุด: 600px; ล้น: ซ่อน; Text-Overflow: Ellipsis; พื้นที่สีขาว: NowRap; เคอร์เซอร์: ตัวชี้;}. FlexFont {Display: Flex; ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;}. rightflexfont {color: #b3b3b3; Font-Weight: 500; TEXT-ALIGING: ถูกต้อง; ขนาดตัวอักษร: 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> <body> <body> <body> {// 设置其透明度， 为 1 时不透明， 为 0 时透明 $ (นี่) .css (ความทึบ, 1);实现悬浮特效的 div， 头部由 js 实现， 后面的子项由 css: โฮเวอร์实现-> <div class = occlusiondiv> </div> <div class = headleftdiv headleftdivfont> 我收到的 </div> </viv> <div class = maindivmaininfoiv style => ซ้าย: 0%; ด้านบน: 0%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infoDiv_right_2 rightflexfont> 2020-02-12 18:41:11 </div> <div> </div> </div> ซ้าย: 0%; ด้านบน: 13%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont style = color: #6db56d;> 已完成 </div> <div class = infoDiv_right_2 Rightflexfont> 2020-02-12 18:41:11 </div> </div> ซ้าย: 0%; ด้านบน: 26%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont style = color: #6db56d;> 已完成 </div> <div class = infoDiv_right_2 Rightflexfont> 2020-02-12 18:41:11 </div> </div> ซ้าย: 0%; ด้านบน: 39%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infoDiv_right_2 Rightflexfont> 2020-02-12 18:41:11 </div> </div> ซ้าย: 0%; ด้านบน: 52%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont> 已撤回 </div> <div class = infoDiv_right_2 Rightflexfont> 2020-02-12 18:41:11 </div> </div> ซ้าย: 0%; ด้านบน: 65%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人class = infodiv_right_1 rightflexfont style = color: #6db56d;> 已完成 </div> <div class = infoDiv_right_2 Rightflexfont> 2020-02-12 18:41:11 </div> </div> ซ้าย: 0%; ด้านบน: 78%;> <div class = maindivmaininfoiv_headtextdiv style => <div class = maindivmaininfoiv_headtextdiv_textbox cardinfotitle style => 论电子合同的法律效力及问题 _ 于晓松 </div> </div> ขนาดตัวอักษร: 12px; สี: RGB (102, 102, 102); ความสูง: 20px;> 发起人： 张三 <div class = maindivmaininfoiv_maintextdiv_textbox style => </div> </div> <div class = maindivmaininfoiv_trailtextdiv style => <div class = maindivmaininfoiv_trailtextbox 参与人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 内容请搜索武林网以前的文章或继续浏览下面的相关文章， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！