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

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

html——搜索结果简单ListView展示页面相关推荐

ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
（写给像我一样刚离开校园进入公司的小菜鸟）在领域架构下，如何实现简单的展示页面以及增删改查（第二步）...
这一片就简单的介绍实现增删改查首先是显示所有数据 Service=>>> 1 /// <summary> 2 /// 加载所有数据 3 /// </summary ...
弘辽科技：新版手淘搜索展示页面改版~
作为老电商人,感受最深的就是,对于淘系或者任何一个能够长久发展的品牌而言,改变就是最持久且不变的规律.自从在年底淘宝修改了升级了各项条约,戴珊走马上任宣布淘宝天猫合并之后,手淘最新版本也推出了新的&q ...
从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
文章作者:张健(Zhang Jonathan) 上一篇文章从产品展示页面谈谈Hybris的特有概念和设计结构我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...
游戏陪玩网站源码开发，搜索功能的实现与页面倒计时跳转
在游戏陪玩网站源码开发时,首页会有一个搜索输入框和按钮区域,我们要做的就是来完善这部分功能.首先游戏陪玩网站源码搜索的逻辑,我们简单地设定为问题的title或者content包含搜索的关键字即可.假设 ...
vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
Elasticsearch（三）——Es搜索（简单使用、全文查询、复合查询）、地理位置查询、特殊查询、聚合操作、桶聚合、管道聚合
Elasticsearch(三)--Es搜索(简单使用.全文查询.复合查询).地理位置查询.特殊查询.聚合操作.桶聚合.管道聚合一.Es搜索这里的 Es 数据博主自己上网找的,为了练习 Es 搜索 ...
使用HTML制作简单的新闻页面
这次我们学习的是如何使用HTML制作简单的新闻页面完成效果如下图所示: 进行效果分析制作结构首先打开dw 创新文件夹(前面已经讲过了) 将所要展示的文字输入在<body>标签内水平 ...
可视化展示——web展示页面
web展示页面展示界面展示界面 1.这个界面用来选择论文集合,在论文集合选择完成之后,分析出论文集合的一些性质,比如平均reference引用数目,平均字数等等论文集合的特征,并用柱状图等形象化表 ...

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

1、效果：

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

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

html——搜索结果简单ListView展示页面相关推荐

最新文章

热门文章