html實現簡單ListViews效果的實例代碼

2020-05-20 16:07:47 來源：互聯網作者：佚名人氣：次閱讀 116 條評論

文章主要介紹了html實現簡單ListViews效果的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下html實現簡單Li...

文章主要介紹了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表格比較寬溢出的解決方法

文章主要介紹了html 表格比較寬溢出的解決方法，表格如果比較寬，則有可能溢出，所以下面的方法，大家可以看看表格如果比較寬，則有可能溢出。比如有兩個div，左和右。如果表格在右邊的...

HTML/XHTML 2020-05-20 HTML html網頁 HTML代碼 HTMl表格
HTMl中標簽中li橫向排列的實現示例

文章主要介紹了HTMl中標簽中li橫向排列的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧...

HTML/XHTML 2020-05-20 HTML html網頁 HTML代碼 HTMl標簽
解決vscode 中保存后html自動格式化的問題

文章主要介紹了vscode 中保存后html自動格式化的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下...

HTML/XHTML 2020-05-20 html自動格式化 html
HTML在透明輸入框里添加圖標的實現代碼

文章主要介紹了HTML在透明輸入框里添加圖標的實現代碼，代碼簡單易懂，非常不錯對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧...

HTML/XHTML 2020-05-19 HTML html網頁 HTML代碼
html表單控件禁用屬性readonly VS disabled介紹

文章主要介紹了html表單控件禁用屬性readonly VS disabled區別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下在html中有兩種禁...

HTML/XHTML 2020-05-19 html表單 html表單控件 html
HTML頁面插入SVG的多種方式

SVG是一種基于XML語法的圖像格式，接下來通過本文給大家介紹HTML頁面插入SVG的多種方式，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋...

HTML/XHTML 2020-05-19 HTML html網頁 SVG svg格式
html網頁添加音樂視頻的實現示例

文章主要介紹了html網頁添加音樂視頻的實現示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧1.v...

HTML/XHTML 2020-05-19 HTML html網頁
淺析html webpack plugin插件的使用教程

用html-webpack-plugin插件來啟動頁面可將html頁面放入內存以提升頁面的加載速度
并且還能自動設置index.html頁面中JS文件引入的路徑使用前提：項目中安裝了Webpack使用步...

HTML/XHTML 2020-05-19 HTML plugin插件
HTML轉PDF的純客戶端和純服務端實現方案

文章主要介紹了HTML轉PDF的純客戶端和純服務端實現方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學...

HTML/XHTML 2020-05-19 HTML轉PDF HTML PDF
HTML6實現折疊菜單與手風琴菜單的實例代碼

文章主要介紹了HTML6實現折疊菜單與手風琴菜單的實例代碼,需要的朋友可以參考下。頁面主體部分：<body><ul id="menu"> <li> <a href="#">一級菜單1</a> <ul> <li>二級...

HTML/XHTML 2019-10-14 html 折疊菜單手風琴菜單 HTML代碼