layui时间线

最新推荐文章于 2024-05-28 17:26:25 发布
最新推荐文章于 2024-05-28 17:26:25 发布
阅读量5.4k 收藏 1
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101916785
版权

  1. 时间线

常规时间线

相关样式

layui-timeline  代表一个时间线

         |-- layui-timeline-item  代表一个时间节点

         |-- layui-timeline-axis  代表左边的竖线

                  |-- layui-timeline-content 时间线的内容

                  |-- layui-text  代表文本

                          |-- layui-timeline-title  代表标题

                                   |--可以分为标题和内容

                                            |--<h2>标题

                                            |--<p>内容

简约时间线

<%--

  Created by IntelliJ IDEA.

  User: Lenovo

  Date: 2019/10/2

  Time: 14:24

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

    <title>时间线</title>

    <link rel="stylesheet" href="./libs/layui/css/layui.css">

    <link rel="stylesheet" href="./libs/css/global.css">

    <script type="text/javascript" src="./libs/layui/layui.js"></script>

</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>

                <p>

                    layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。

                    

不枉近百个日日夜夜与之为伴。因小而大，因弱而强。

                    

无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>

                </p>

            </div>

        </li>

        <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月16日</h3>

                <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>

                <ul>

                    <li>《登高》</li>

                    <li>《茅屋为秋风所破歌》</li>

                </ul>

            </div>

        </li>

        <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月15日</h3>

                <p>

                    中国人民抗日战争胜利日

                    

常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代

                    

铭记、感恩

                    

所有为中华民族浴血奋战的英雄将士

                    

永垂不朽

                </p>

            </div>

        </li>

        <li class="layui-timeline-item">

            <i class="layui-icon layui-timeline-axis"></i>

            <div class="layui-timeline-content layui-text">

                <div class="layui-timeline-title">过去</div>

            </div>

        </li>

    </ul>

 

 

    <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">

                <div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>

            </div>

        </li>

        <li class="layui-timeline-item">

            <i class="layui-icon layui-timeline-axis"></i>

            <div class="layui-timeline-content layui-text">

                <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>

            </div>

        </li>

        <li class="layui-timeline-item">

            <i class="layui-icon layui-timeline-axis"></i>

            <div class="layui-timeline-content layui-text">

                <div class="layui-timeline-title">2016年，layui 首个版本发布</div>

            </div>

        </li>

        <li class="layui-timeline-item">

            <i class="layui-icon layui-timeline-axis"></i>

            <div class="layui-timeline-content layui-text">

                <div class="layui-timeline-title">2015年，layui 孵化</div>

            </div>

        </li>

        <li class="layui-timeline-item">

            <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>

            <div class="layui-timeline-content layui-text">

                <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>

            </div>

        </li>

    </ul>

</body>

</html>

 

 

zhouzhou_98
关注
专栏目录
【Layui】动态时间线
德仔
11-25 1104
分析结构Layui中与时间线相关的预设类及其大致结构如下图所示，官网中采用无序列表为例介绍时间线的样式，但从layui.css文件来看，使用其它元素也可以，测试时采用div元素作为时间线顶层元素及时间线项也能显示时间线样式。相关样式layui-timeline 代表一个时间线|-- layui-timeline-item 代表一个时间节点|-- layui-timeline-axis 代表左边的竖线|-- layui-timeline-content 时间线的内容。
前端框架Layui学习二：面板、布局、徽章、时间线、颜色选择器
zhengzaifeidelushang的博客
07-14 1607
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。
gis 数据框裁剪_零基础、无资料如何制作GIS分析图？
weixin_39959335的博客
10-30 543
文章首发于微信公众号“数据规划说”，作者“叫我三三就好”。一位不愿意透露姓名的博士师姐最近终于开始撰写她的毕业论文了然而刚下笔，便遇到了技术上的瓶颈呆师姐：“师弟，这个…高程坡度坡向分析怎么做？数据又是从哪来”……经常使用GIS的同学，都知道这些操作算是非常基础的操作但是对于想入手的小白来说做出一张自己想要的分析图，需要迈过无数个坑So这次三三君就为大家系统的整理一下在完全没有基础资料的情况下如何...
layui横向时间线_揭秘！无缝衔接的长长长长时间轴，其实是这么做的
weixin_39614146的博客
11-18 3149
本文操作适用于微软 Office 全系列版本时间轴是 PPT 常见的制作页面之一，经常用来展示公司发展历程、项目进度安排、个人成长轨迹等。一张完整的时间轴 PPT 应该包括三要素：时间线、时间节点(序号)、事件。在制作时，内容的准备是容易的，主要在于形式上的设计需要花心思。如何做好时间轴 PPT？相信你看完本文，会有启发。01 传统的时间轴做法一般制作时间轴，所有的内容都会放在一页 PPT 上。内...
一条横向的时间线
12-12
一条横向的时间线。
LayUI时间线优化，sql基础教程和mysql必知必会
m0_54865014的博客
12-30 651
图标用的是font-awesome.css图标库，font-awesome图标库：http://fontawesome.dashgame.com/ 动画效果是用的animate.css，网址：https://daneden.github.io/animate.css/ 自己写的css样式代码： .clear { clear: both } .timeline-box { background: #fff; padding: 20px 8px; position: relative; opacity: 0.7
LayUI时间线优化，java工作三年面试题
2401_83740129的博客
03-23 844
width: 31%;z-index: 1;top: 6px;height: 0;width: 0;left: 35%;top: 0;width: 2px;HTML部分代码。
简洁的横向水平时间轴特效
12-13
【横向水平时间轴特效】是一种在网页设计中用于展示序列事件或历史进程的视觉元素，它将时间点和相关的事件沿着一条线性路径排列，帮助用户直观地理解信息的顺序和时间关系。在这个案例中，特效是基于流行的前端框架...
layui左右面板时间范围查找
FairyHe的博客
12-18 905
layui范围时间查找 1.定义好一个时间分割的工具类 /** * 2020-11-05 12:12:12 - 2020-11-06 12:12:12 * * 会处理成 2020-11-05 12:12:12 赋值给 startTimeStart * 会处理成 2020-11-06 12:12:12 赋值给 startTimeEnd */ public String startTime; // 搜索时间 // 开始时间 搜索范围的开
layui横向时间线_500万次成功试验从未失：趋势线+攻击线+防守线=三线趋势交易系统，把握进场和出场点...
weixin_39794130的博客
11-25 968
做股票无非就是做趋势，做长线就是做大趋势，做短线就是做小趋势，今天给大家分享简单有效的趋势线交易方法，真心实用!1、按趋势线方向可分为：上升趋势线、下跌趋势线和横向趋势线。2、按趋势线周期可分为：长期、中长期、中短期和短期趋势线。一般来讲跨度在6个月以上称为长期趋势,跨度在3-6个月称为中长期趋势,跨度在1-3个月为中短期趋势,跨度在1个月以下称为短期趋势。趋势线的市场意义,趋势线最基本的两个市场...
layui横向时间线_影像时间丨想看懂磁共振报告，先了解这些吧！
weixin_39556702的博客
11-22 384
去医院看病，医生的这些话，你听过几个？不管你有没有，反正我是都听过……X线、CT、磁共振（MRI）、PET/CT 等医学影像学检查在医学上有着不可替代的作用，有人称它们为“医生的眼睛”。它们可以提供人体组织、结构、功能信息，为临床诊断提供基础。这就需要临床工作者能够看懂影像医生的报告（对一些特别科室的医生如骨科等更需要医生自己会看拍出来的片子)。磁共振成像由于其无辐射、软组织分辨率高等特点在临床运...
layui框架学习（10：时间线）
gc_2299的博客
02-25 2701
学习并记录layui框架中页面元素的时间线相关样式设置方式。
Layui静态表格.时间线
qq_34820433的博客
04-17 474
时间线是一种将时间抽象到二维平面，垂直呈现一段过去的故事？这个说法比较抽象，直接看官网手册的例子就懂了；静态表格支持一些基础属性，可以定义不同风格。自带的静态表格和时间线的用法。若使用默认风格不设置该属性即可。静态表格只需要定义一个头部。本节课我们来开始了解。
layui横向时间线_操盘线：线上阴线满仓，线下阳线清仓
weixin_39525243的博客
11-29 148
炒股时间长了，越来越觉得要在股市中生存，需要的不是掌握多少技术指标，而是要树立正确的理念，也就是说股市检验的是你的性格。股市如人生，炒股即 做人，贪婪、恐惧、多疑、浮躁，人性的弱点都在股市中暴露无遗，可以说炒股的过程就是锻炼人性的过程，当你的性格变的勇敢、冷静、专注、不悔时，你就达到 了成功的顶峰。清人王国维说，人生有三种境界，分别用古人的三句诗词来形容，我看放在股市再合适不过了。长期以来，这三种...
layui横向时间线_赚钱秘籍——牢记支撑位和阻力位，轻松找买卖点，关键还得学会江恩角度线...
weixin_39622150的博客
11-29 438
(本文由公众号越声投顾(yslcw927))整理，仅供参考，不构成操作建议。如自行操作，注意仓位控制和风险自负。)之前有很多朋友问到怎么判断一个股票的支撑位或者压力位，那在这里我就和大家做一个简单的分享，如何用江恩角度线快速的判断支撑位和压力位。第一个问题，什么是江恩角度线呢?江恩角度线是由时间单位和价格单位定义价格的运动，每一角度线由时间和价格的关系所决定，从重要的高点或低点延伸并画出的，分为上...
layui横向时间线_K线三重底部形态『技术分享』
weixin_39687814的博客
11-17 381
大家好，今天行情比较好，带了会员群客户强势抓住了几波原油行情，黄金行情，共计不少于47W美刀，所以晚间不急于指导交易，有时间继续分享技术方面的看盘指标，上期我们讲的W底部，那么今天我们就来讲三重底，多次论证底部支撑的形态，抓住该形态，则可以大大中期抓住一波完美的行情！当价格下行过程中确认1低点，反弹后再次测试2的水平位低点，再次反弹前一次高点，此时此刻，我们以为价格走出的W底部形态，不料，价格再次...
layui横向时间线_知道了K线也并不能帮你成为股神
weixin_39635130的博客
11-14 683
大家好，又被A股毒打了一天，尤其是下午一点半后，“雷猴”们冲进来砸盘，不地道。大盘我个人觉的还是没问题，只不过个别前期涨的多板块，有可能会有一些回调。这周末我再调整一下模型，下周开启我们的月定投计划~今天给大家说一说如何在支付宝里看K线，以及K线上的内容是个啥。（这里首先提醒一下，知道了K线也并不能帮你成为股神，大家都知道的东西是不值钱的）。下面就以A股白马王子，贵州茅台为例。在支付宝，或者蚂蚁财...
LayUI时间线优化
最新发布
2401_85112133的博客
05-28 655
width: 31%;width: 31%;z-index: 1;top: 6px;height: 0;width: 0;left: 35%;top: 0;width: 2px;
layui竖着的分割线
03-16
在layui中，可以使用垂直分割线来实现页面的布局和分隔。 在layui中，垂直分割线可以通过使用CSS类名来实现。具体步骤如下： 1. 在HTML中，创建一个容器元素，例如一个div元素。 2. 给这个容器元素添加一个CSS类名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值