最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html如何实现简单ListViews效果 html实现简单ListViews效果代码实例
时间：2022-06-25 17:58:10 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下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%;
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-*/
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;*/
display: inline-block;
max-
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.flexFont{
display: flex; font-size: 12px; color: rgb(102, 102, 102);
}
.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
我收到的
论电子合同的法律效力及问题_于晓松
相关文章
-
王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过
11-22
-
无期迷途主线前瞻兑换码是什么
11-22
-
原神欧洛伦怎么培养
11-22
-
炉石传说网易云音乐联动怎么玩
11-22
-
永劫无间手游确幸转盘怎么样
11-22
-
无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍
11-22
热门栏目
-
php教程
php入门
php安全
php安装
php常用代码
php高级应用
-
asp.net教程
基础入门
.Net开发
C语言
VB.Net语言
WebService
-
手机开发
安卓教程
ios7教程
Windows Phone
Windows Mobile
手机常见问题
-
css教程
CSS入门
常用代码
经典案例
样式布局
高级应用
-
网页制作
设计基础
Dreamweaver
Frontpage
js教程
XNL/XSLT
-
办公数码
word
excel
powerpoint
金山WPS
电脑新手
-
jsp教程
Application与Applet
J2EE/EJB/服务器
J2ME开发
Java基础
Java技巧及代码