如何制作简单的ListViews效果

云南仟龙Mark

于 2021-10-27 17:04:30 发布

阅读量152

点赞数

文章标签： list css css3

原文链接：https://blog.51cto.com/u_15111999/4135626

版权

今天分享下”如何制作简单的ListViews效果“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

html实现简单ListViews效果

实现效果：

在这里插入图片描述

css样式文件listviewTest.css

body{

background: whitesmoke;

}

#mainContentDiv{

position: absolute;

width : 70%;

height :100%;

background: whitesmoke;

top: 10%;

left: 10%;

}

.mainDivMainImgDiv{

position: absolute;

width : 100%;

height : 50px;

background: white;

}

.mainDivMainInfoiv{

position: absolute;

width : 100%;

height : 100%;

background: whitesmoke;

top: 60px;

}

/js实现悬浮特效的div/

.occlusionDiv{

position: absolute;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.3);

opacity:0;

z-index: 14;

}

.headLeftDiv{

position: absolute;

width: 50%;

height: 100%;

left: 4%;

top: 25%;

}

.headLeftDivFont{

font-weight: 500;

/line-height: 58px;/

font-size: 20px;

color: #333;

}

/---------------------------subInfoDiv--------------/

.mainDIvMainInfoDivSubInfoDiv{

position: absolute;

width : 100%;

height: 13%;

background:white;

border: 1px solid #eaeaea;

}

.mainDIvMainInfoDivSubInfoDiv:hover{

background: rgba(0,0,0,0.3);

}

.mainDivMainInfoiv_HeadTextDiv{

position: absolute;

top: 10%;

left: 3%;

width : 30%;

height: 30%;

background:rgba(0,0,0,0);

}

.mainDivMainInfoiv_mainTextDiv{

position: absolute;

top: 52%;

left: 3%;

width : 95%;

height: 20%;

background:rgba(0,0,0,0);

}

.mainDivMainInfoiv_TrailTextDiv{

position: absolute;

bottom: 3%;

left: 3%;

width : 30%;

height: 30%;

background:rgba(0,0,0,0);

}

.mainDivMainInfoiv_HeadTextDiv_TextBox{

position: absolute;

top: 25%;

width: 100%;

height: 50%;

background:rgba(0,0,0,0);

}

.cardInfoTitle {

font-weight: 700;

/color: #1f264d;/

height: 22px;

display: inline-block;

max-width: 600px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

cursor: pointer;

}

.flexFont{

display: flex; font-size: 12px; color: rgb(102, 102, 102);

height:20px= http://www.qlyl1688.com/ ;

}

.rightFlexFont{

color: #b3b3b3;

font-weight: 500;

text-align: right;

font-size: 12px;

color: rgb(179, 179, 179);

}

.InfoDiv_Right_1{

position: absolute;

top: 30%;

right: 2%;

width : 30%;

height: 30%;

background:rgba(0,0,0,0);

}

.InfoDiv_Right_2{

position: absolute;

top: 55%;

right: 2%;

width : 30%;

height: 30%;

background:rgba(0,0,0,0);

}

.mainDivMainInfoiv_TrailTextDiv_TextBox{

position: absolute;

top: 25%;

width: 100%;

height: 50%;

background:rgba(0,0,0,0);

}

.mainDivMainInfoiv_mainTextDiv_TextBox{

position: absolute;

top: 25%;

width: 100%;

height: 50%;

background:rgba(0,0,0,0);

}

html页面：

<head>

<title>ListviewTest</title>

</head>

<body>

$(function () {

//产生悬浮特效，也可以使用css:hover实现

//头部由js实现，下面列表的子项由css:hover实现

$(".occlusionDiv").mouseover(function () {

//设置其透明度，为1时不透明，为0时透明

$(this).css(“opacity”, “1”);

}).mouseout(function () {

$(this).css(“opacity”, “0”);

});

</script>

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已撤回

</div>

2020-02-12 18:41:11

</div>

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已完成

</div>

2020-02-12 18:41:11

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已完成

</div>

2020-02-12 18:41:11

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已撤回

</div>

2020-02-12 18:41:11

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已撤回

</div>

2020-02-12 18:41:11

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已完成

</div>

2020-02-12 18:41:11

</div>

论电子合同的法律效力及问题_于晓松

</div>

<div class="mainDivMainInfoiv_mainTextDiv"

style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">

发起人：张三

</div>

参与人：张三，李四

</div>

已撤回

</div>

2020-02-12 18:41:11

</div>

</body>

</html>

总结

今天的文章就分享到这啦，内容转自脚本之家，下篇文章再见！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何制作简单的ListViews效果

今天分享下”如何制作简单的ListViews效果“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。html实现简单ListViews效果实现效果：css样式文件listviewTest.css12345678910111213141516171819202122232425262728293031323334353637383940
复制链接

扫一扫