html listview 实现原理,html实现简单ListViews效果的实例代码

最新推荐文章于 2023-02-06 11:05:53 发布

红帽子船长

最新推荐文章于 2023-02-06 11:05:53 发布

阅读量533

点赞数

文章标签： html listview 实现原理

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;

}

.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页面：

ListviewTest

$(function () {

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

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

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

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

$(this).css("opacity", "1");

}).mouseout(function () {

$(this).css("opacity", "0");

});

我收到的

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