html实现简单ListViews效果的实例代码

  发布时间:2020-03-11 14:32:27   作者:知北行   我要评论
这篇文章主要介绍了html实现简单ListViews效果的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ListviewTest</title>
    <link rel="stylesheet" href="listviewTest.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<script>
    $(function () {

        //产生悬浮特效,也可以使用css:hover实现
        //头部由js实现,下面列表的子项由css:hover实现
        $(".occlusionDiv").mouseover(function () {
            //设置其透明度,为1时不透明,为0时透明
            $(this).css("opacity", "1");
        }).mouseout(function () {
            $(this).css("opacity", "0");
        });
    });

</script>

<div id="mainContentDiv">

    <div class="mainDivMainImgDiv" style="">
<!--        实现悬浮特效的div,头部由js实现,后面的子项由css:hover实现-->
        <div class="occlusionDiv"></div>

        <div class="headLeftDiv headLeftDivFont">我收到的</div>

    </div>

    <div class="mainDivMainInfoiv" style="">



        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 0%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont">
                已撤回
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>

            <div></div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 13%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 26%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont" style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 39%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <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; left: 0%; top: 52%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <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; left: 0%; top: 65%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <div class="InfoDiv_Right_1 rightFlexFont"  style="color: #6db56d;">
                已完成
            </div>
            <div class="InfoDiv_Right_2 rightFlexFont">
                2020-02-12 18:41:11
            </div>
        </div>

        <div class="mainDIvMainInfoDivSubInfoDiv" style="position: absolute; left: 0%; top: 78%;">

            <div class="mainDivMainInfoiv_HeadTextDiv" style="">
                <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" style="">
                    论电子合同的法律效力及问题_于晓松
                </div>
            </div>

            <div class="mainDivMainInfoiv_mainTextDiv"
                 style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
                发起人:张三
                <div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
            </div>
            <div class="mainDivMainInfoiv_TrailTextDiv" style="">
                <div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
                    参与人:张三,李四
                </div>
            </div>

            <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>

总结

到此这篇关于html实现简单ListViews效果的实例代码详解的文章就介绍到这了,更多相关html实现ListViews内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • HTML中link标签属性的具体用法

    link标签是用于样式表、图标与外部资源的关联,有很多属性,本文就详细的介绍 一下HTML中link标签属性的具体用法,感兴趣的可以了解一下
    2023-05-05
  • html解决浏览器记住密码输入框的问题

    在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,自动填充密码很不安全,本文就介绍了html解决浏览器记住密码输入框的问题,具有一定的参考价值,感兴趣的可
    2023-04-28
  • Html获取登陆用户名的示例代码

    本文主要介绍了Html获取登陆用户名的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-13
  • HTML表格合并的具体实现方式

    表格是日常常用的工具,很多时候需要用到单元合并,本文主要介绍了HTML表格合并的具体实现方式, 具有一定的参考价值,感兴趣的可以了解一下
    2023-01-05
  • HTML页面点击按钮关闭页面的多种方式

    这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式,实现思路非常简单,有不带任何方式的关闭窗口,提示之后关闭页面,点击关闭本页面并跳转到其他页面等等,每种方式
    2022-11-22
  • html网页引入svg图片的4种方式

    本文主要介绍了html网页引入svg图片的4种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-03
  • HTML静态页面获取url参数和UserAgent的实现

    本文主要介绍了HTML静态页面获取url参数和UserAgent的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2022-08-02
  • HTML实现仿Windows桌面主题特效的实现

    本文主要介绍了HTML实现仿Windows桌面主题特效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2022-06-27
  • html中两种获取标签内的值的方法

    本文主要介绍了html中两种获取标签内的值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2022-06-09
  • HTML页面中使两个div并排显示的实现

    本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2022-05-13

最新评论