html實現簡單ListViews效果的例項程式碼

佚名發表於2020-05-20

文章主要介紹了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內容請搜尋以前的文章或繼續瀏覽下面的相關文章，

淡入淡出效果簡單程式碼例項
2018-07-03
HTML 使用表單標籤實現註冊頁面的例項程式碼
2018-12-03
HTML
HTML6實現摺疊選單與手風琴選單的例項程式碼
2019-10-14
HTML
Python實現簡單網頁圖片抓取完整程式碼例項
2020-05-27
Python網頁
簡單實現幾種常見的前端效果，附程式碼！
2021-04-19
前端
jQuery tab選項卡效果程式碼例項
2018-08-05
jQuery
canvas載入效果程式碼例項
2018-07-09
Canvas
CSS橢圓效果程式碼例項
2018-06-02
CSS
python 單一程式例項實現
2020-10-01
Python
HTML5 拖拽程式碼例項
2019-10-05
HTML
使用JS實現一個簡單的選項卡效果
2020-01-11
JS
美化滾動條效果程式碼例項
2018-07-11
canvas原型鐘錶效果程式碼例項
2018-05-27
Canvas原型
css3水滴效果程式碼例項
2018-06-04
CSSS3
css背景虛化效果程式碼例項
2018-05-31
CSS
canvas氣泡上浮效果程式碼例項
2018-03-19
Canvas
Python訪問小程式簡單方法程式碼例項詳解
2021-10-15
Python
jQuery點選滑出層效果程式碼例項
2018-07-12
jQuery
css3晃動效果程式碼例項
2018-07-09
CSSS3
CSS3心形效果程式碼例項
2018-07-09
CSSS3
div前後翻轉效果程式碼例項
2018-05-25
當前文字框高亮效果程式碼例項
2018-05-25
CSS3旋轉效果程式碼例項
2018-05-21
CSSS3
canvas繪製箭頭效果程式碼例項
2018-04-02
Canvas
html網頁中如何實現居中效果（程式碼分享）
2021-09-11
HTML網頁
實現簡單的`Blazor`低程式碼
2023-02-15
Blazor
【深度學習基礎-11】簡單線性迴歸（下）--例項及python程式碼實現
2019-01-11
深度學習Python
刪除字串中的html標籤程式碼例項
2018-05-20
字串HTML
Flutter實現簡單爆炸效果
2021-07-05
Flutter
jQuery實現的表格展開伸縮效果例項
2020-09-23
jQuery
CSS3滑過光束效果程式碼例項
2018-07-12
CSSS3
CSS3小黃人效果程式碼例項
2018-07-08
CSSS3
css3折角效果程式碼例項
2018-05-28
CSSS3
CSS3梯形效果程式碼例項
2018-05-28
CSSS3
CSS3背景漸變效果程式碼例項
2018-05-22
CSSS3
CSS3星系運動效果程式碼例項
2018-07-03
CSSS3
vuejs實現新增tag標籤程式碼例項
2020-11-12
VueJS
例項程式碼分享Python實現Linux監控
2021-07-18
PythonLinux