html——搜索结果简单ListView展示页面

最新推荐文章于 2024-08-02 19:12:16 发布

知北行

最新推荐文章于 2024-08-02 19:12:16 发布

阅读量3k

点赞数 2

分类专栏： Html+Js 文章标签： css html js

本文链接：https://blog.csdn.net/qq_35077107/article/details/107432835

版权

Html+Js 专栏收录该内容

58 篇文章 6 订阅

订阅专栏

1、效果：

在这里插入图片描述

2、html代码（使用了layui，实际使用时需要修改layui路径）：

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

    <script>
        $(function () {

            layui.use('table',function () {

            });


            $(".findKey").each(function () {
                var str=$(this).text();
                var substr="/讲解/g";
                var replaceStr=str.replace(eval(substr),"<span style='color:red;font-weight:bold'>讲解</span>")
                $(this).html(replaceStr);
            });

        })
    </script>
    <!--    这里使用了layui的样式，实际使用时需要改成实际路径-->
    <link rel="stylesheet" href="../LayuiTest/layui/css/layui.css">
    <script src="../frameworkPackage/layui/layui.js"></script>
    <link rel="stylesheet" href="../frameworkPackage/layui/css/layui.css">
</head>
<body>

<div id="mainContentDiv">

    <div class="mainDivMainImgDiv" style="">
        <div class="headLeftDiv headLeftDivFont">搜索结果</div>

        <div class="headRightDiv">

            <div class="layui-form-item">

                <div class="layui-input-inline">
                    <div class="layui-form">
                        <select name="cdSelect" lay-verify="" lay-filter="test" id="conditionSelect">
                            <option value="article" selected>文章</option>
                            <option value="">论文</option>
                            <option value="">资源</option>
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <input class="layui-input" name="conditionInput" id="conditionInput" autocomplete="off">
                </div>
                <button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button>
            </div>

        </div>

        <div class="link-top"></div>
        <div class="headLineBlowDiv">
            <div class="headLeftDiv">
                共搜索到<span>【7】</span>条记录
            </div>
<!--            <div class="headButtonDiv">-->


<!--            </div>-->


        </div>


    </div>

    <div class="mainDivMainInfoiv">


        <div class="mainInfoSubDiv">

            <div class="mainDIvMainInfoDivSubInfoDiv" >

                <div class="mainDivMainInfoiv_HeadTextDiv " >
                    <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle findKey" >
                        神经网络基础用法讲解
                    </div>
                </div>

                <div class="mainDivMainInfoiv_mainTextDiv  findKey">
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所

                </div>

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

            <div class="mainDIvMainInfoDivSubInfoDiv" >

                <div class="mainDivMainInfoiv_HeadTextDiv " >
                    <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle findKey" >
                        神经网络基础用法讲解
                    </div>
                </div>

                <div class="mainDivMainInfoiv_mainTextDiv  findKey">
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所

                </div>

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

            <div class="mainDIvMainInfoDivSubInfoDiv" >

                <div class="mainDivMainInfoiv_HeadTextDiv " >
                    <div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle findKey" >
                        神经网络基础用法讲解
                    </div>
                </div>

                <div class="mainDivMainInfoiv_mainTextDiv  findKey">
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所
                    第一篇文章主要讲解神经网络基础概念，同时讲解TensorFlow2.0的安装过程及基础用法，主要结合作者之前的博客、AI经验和相关视频介绍，后面随着深入会讲解具体的项目及应用。基础性文章，希望对您有所

                </div>

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



        </div>



    </div>
</div>

</body>
</html>

3、html所引用的css文件（listView.css）


body {
    background: whitesmoke;

}

#mainContentDiv {
    position: absolute;
    width: 70%;
    height: 100%;
    background: whitesmoke;
    top: 10%;
    left: 10%;

}

.mainDivMainImgDiv {
    position: absolute;
    width: 100%;
    height: 120px;
    background: white;

}

.mainDivMainInfoiv {

    position: absolute;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    top: 130px;
}

.mainInfoSubDiv{
    position: relative;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    overflow-y: auto;
    overflow-x: hidden;
}

.headLeftDiv {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 4%;
    top: 25%;
}

.headLeftDivFont {
    font-weight: 500;
    /*line-height: 58px;*/
    font-size: 20px;
    color: #333;
}

.headRightDiv {
    position: absolute;
    width: 40%;
    height: 100%;
    right: 2%;
    top: 20%;
}


/*中间的过度的横线*/
.link-top {
    position: absolute;
    top: 60%;
    left: 4%;
    width: 90%;
    height: 1px;
    border-top: solid #e8edf3 1px;
}

.headLineBlowDiv {
    position: absolute;
    top: 63%;
    height: 40%;
    width: 100%;
}


/*---------------------------subInfoDiv--------------*/
.mainDIvMainInfoDivSubInfoDiv {
    position: relative;
    width: 100%;
    height: 13%;
    background: white;
    border: 1px solid #eaeaea;
}


.mainDIvMainInfoDivSubInfoDiv:hover {
    background: rgba(0, 0, 0, 0.05);
}


.mainDivMainInfoiv_HeadTextDiv {
    position: absolute;
    top: 10%;
    left: 4%;
    width: 30%;
    height: 30%;
    background: rgba(0, 0, 0, 0);

}

.mainDivMainInfoiv_mainTextDiv {
    position: absolute;
    top: 52%;
    left: 4%;
    width: 80%;
    background: rgba(0, 0, 0, 0);

    overflow: hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size: 12px;
    color: rgb(102, 102, 102);
}


.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;
}


.rightFlexFont {
    color: #b3b3b3;
    font-weight: 500;
    text-align: right;
    font-size: 12px;
    color: rgb(179, 179, 179);
}


.InfoDiv_Right_2 {
    position: absolute;
    top: 55%;
    right: 2%;
    width: 18%;
    height: 30%;
    background: rgba(0, 0, 0, 0);
}