Layui 按照时间线显示照片的 格式

最新推荐文章于 2024-05-28 17:26:25 发布
最新推荐文章于 2024-05-28 17:26:25 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： LayUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HC1qq/article/details/80912292
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        img {
            margin: 5px;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>常规时间线</legend>
    </fieldset>
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月18日</h3>
              
                  <div class="layui-container">
                    <div class="layui-row  layui-col-space3">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                            <img src="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" style="width:100%;height:100%;"></img>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                            <img src="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" style="width:100%;height:100%;"></img>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                            <img src="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" style="width:100%;height:100%;"></img>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
                            <img src="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" style="width:100%;height:100%;"></img>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
                            <a href="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" target="_blank">
                                <img src="http://jlttest.cqkas.com/UploadPicture/%E6%8B%9B%E5%95%86%E8%8A%B1%E5%9B%AD%E5%9F%8E%E4%B8%89%E6%9C%9FN17%E5%9C%B0%E5%9D%97%E7%9B%91%E7%90%86%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C/20180628/20180628163958071.jpg" style="width:100%;height:100%;"></img>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>



    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    </script>

</body>
</html>


HC1qq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Layui】动态时间线
德仔
11-25 1056
分析结构Layui中与时间线相关的预设类及其大致结构如下图所示，官网中采用无序列表为例介绍时间线的样式，但从layui.css文件来看，使用其它元素也可以，测试时采用div元素作为时间线顶层元素及时间线项也能显示时间线样式。相关样式layui-timeline 代表一个时间线|-- layui-timeline-item 代表一个时间节点|-- layui-timeline-axis 代表左边的竖线|-- layui-timeline-content 时间线的内容。
ASP.NET 使用Layui 显示后台数据
遇见--专栏
12-27 1419
此篇文字为项目代码，中间有包含未知引用的类不会提供，这里只是告诉大家asp.net 使用Layui的基本流程，
layui时间线
OpenSource_的博客
08-11 2872
时间线 常规时间线 相关样式 layui-timeline  代表一个时间线          |-- layui-timeline-item  代表一个时间节点          |-- layui-...
layui框架学习（10：时间线）
gc_2299的博客
02-25 2658
学习并记录layui框架中页面元素的时间线相关样式设置方式。
layui timeline使用
weixin_33775572的博客
01-07 1597
使用layui timeline过程记录： layui官网时间线介绍比较少，可能是太简单了，这里把时间线通过请求后台数据。再自动填写到对应区块，进行了封装； 代码如下： function timelineshow(url,json,div){ $.ajax({ url: url, type: "post", data: json, da...
Layui前端框架2.6.6
01-13
此外，还有图片上传、树形结构、进度条、时间线等实用组件，覆盖了日常开发中的常见场景。 Layui还提供了强大的JavaScript API和CSS样式类，使得开发者可以方便地自定义和扩展组件。通过API，可以对组件进行动态...
layui-v2.5.5_layui前端模板_substanceb4u_layui-v2.5.5_wplayui-v2.5.5_
10-01
同时，substanceb4u还包含了丰富的组件库，如面包屑导航、折叠面板、时间线等，帮助开发者实现复杂功能。 另一款主题模板"wplayui-v2.5.5"则更注重用户体验和交互设计。它采用了扁平化的设计风格，色彩搭配和谐，...
layui2.2.5 离线版文档
10-14
9. **时间线**：layui的时间线组件用于展示事件序列，常用于新闻动态、项目进度等场景。 10. **树形结构**：layui的树形组件可展现层次关系，常见于组织结构、目录层级等。 离线版文档包含了所有这些组件的使用...
layui2.2.5离线文档下载.zip
10-19
11. **其他组件**：还包括菜单、面包屑、下拉菜单、时间线、树形结构、轮播图等组件，满足多样化的设计需求。 12. **自定义主题**：layui允许开发者自定义主题，改变框架的颜色和样式，以适应不同项目的需求。 13....
一条横向的时间线
12-12
一条横向的时间线。
LayUI时间线优化
最新发布
2401_85112133的博客
05-28 632
width: 31%;width: 31%;z-index: 1;top: 6px;height: 0;width: 0;left: 35%;top: 0;width: 2px;
时间线
weixin_46703930的博客
06-29 448
今天来给大家讲个layui的时间线哒哒哒. 1、首先新建一个jsp界面 2、导入需要的css和js 3、总体代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos
layui----页面元素之徽章，时间线，辅助
weixin_43846020的博客
07-16 365
徽章 https://www.layui.com/doc/element/badge.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"&g
layui框架（时间线、进度条和卡片面板）
q_2540638774的博客
12-12 3621
一、时间线 class属性：layui-timeline a、图标可以任意定义（但并不推荐更改） <i class="layui-icon layui-timeline-axis"></i> b、标题区域并不意味着一定要加粗 <h3 class="layui-timeline-title">2019年12月1日</h3> c、内容区域可自由填充...
layui中日期控件的添加小图标控制日期选择器
qq_46091278的博客
05-10 1727
layui中日期控件的添加小图标控制日期选择器
layui 之动态改变表格中单元格的背景色
haodiaoji9386的博客
08-04 3104
处理之前： 处理之后： 核心代码： done:function (res, page, count) { var that = this.elem.next(); res.data.forEach(function (item,index) { debugger var tr = that.find("[data-index=" + index + "]").children(); tr.each(fu...
layui中根据条件判断使table单元格变色
li22356的博客
05-19 1814
今天接到一个需求，要求要根据后台给的条件判断这条数据是否过期，过期整行数据变色。 效果如下图所示： 代码如下图： 动态的根据后台给的条件使整行数据变色，也可以指定行变色，把下面的index变成你要指定行的数据就可以了。例如：that.find(“.layui-table-box tbody tr[data-index='” + 6+ “']”).css(“background-color”, “#FA8072”); // 行变色 （第6行变色） done:function (res,curr,.
Echarts 中使用时间轴，如何修改数据视图显示格式
06-06
在 Echarts 中，可以通过 `xAxis` 的 `axisLabel` 属性来配置时间轴的显示格式。具体来说，可以通过 `formatter` 属性来设置时间轴的格式，例如： ```javascript option = { xAxis: { type: 'time', axisLabel: { formatter: function (value, index) { var date = new Date(value); return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); } } }, yAxis: { type: 'value' }, series: [{ data: [ [new Date('2022/01/01'), 100], [new Date('2022/02/01'), 200], [new Date('2022/03/01'), 300], [new Date('2022/04/01'), 400], [new Date('2022/05/01'), 500] ], type: 'line' }] }; ``` 在这个示例中，通过 `axisLabel` 的 `formatter` 属性，可以将时间轴的格式设置为年月日的格式，例如 `2022-01-01`。在 `formatter` 函数中，首先将时间戳转换为 `Date` 对象，然后使用 `getFullYear()`、`getMonth()` 和 `getDate()` 方法获取年、月和日的值，最后拼接起来返回。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值