Html 水平时间轴css实现_Html_Css_Timeline

Html 水平时间轴css实现

html css

Html 水平时间轴css实现,html,css,timeline,Html,Css,Timeline,我试图实现一个水平的时间表，但我被卡住了。我需要帮助实现它正文{ 背景色：黑色； } .时间表{ 空白：nowrap；溢出x：隐藏； } .时间线ol{ 字号：0；宽度：100vw；填充：250px0；过渡：所有1； } 李国宝{ 位置：相对位置；显示：内联块；列表样式类型：无；宽度：160px；高度：3倍；背景：#fff； } 李：最后一个孩子{ 宽度：280px； } .李：不是（：第一个孩子）{ 左边距：14px； } 时间线ol li:不是（：最后一个孩子）：：之

我试图实现一个水平的时间表，但我被卡住了。我需要帮助实现它

正文{
背景色：黑色；
}
.时间表{
空白：nowrap；
溢出x：隐藏；
}
.时间线ol{
字号：0；
宽度：100vw；
填充：250px0；
过渡：所有1；
}
李国宝{
位置：相对位置；
显示：内联块；
列表样式类型：无；
宽度：160px；
高度：3倍；
背景：#fff；
}
李：最后一个孩子{
宽度：280px；
}
.李：不是（：第一个孩子）{
左边距：14px；
}
时间线ol li:不是（：最后一个孩子）：：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：计算（100%+1px）；
底部：0；
宽度：12px；
高度：12px；
转化：translateY（-50%）；
边界半径：50%；
背景#F45B69；
}
.李国章分区{
位置：绝对位置；
左：计算（100%+7px）；
宽度：280px；
填充：15px；
字号：1rem；
空白：正常；
颜色：黑色；
背景：白色；
}
.ol li div：：之前{
内容：''；
位置：绝对位置；
最高：100%；
左：0；
宽度：0；
身高：0；
边框样式：实心；
}
.L.li:第n个儿童（单数）分区{
顶部：-16px；
转换：translateY（-100%）；
}
.ol li:第n个子（奇数）div:：before{
最高：100%；
边框宽度：8px 8px 0；
边框颜色：白色透明；
}
.ol li:第n个孩子（偶数）分区{
顶部：计算（100%+16px）；
}
.时间线ol li:n个孩子（偶数）div:：before{
顶部：-8px；
边框宽度：8px 0 0 8px；
边框颜色：透明白色；
}



2015年赤文公司成立


2016与格罗宁根大学建立长期合作伙伴关系


2017年关于机器学习、深度学习、分布式培训、大脑启发模式识别算法、Neo4J和区块链以及分布式计算的研究


2018年1月至3月开始TuDoLink项目团队建设项目可行性分析


2018年4月至7月系统框架设计社交互动优化合作伙伴关系优化商业计划种子资金准备MVP准备ICO前期在社交媒体上活跃


2018年8月至12月MVP开发收集MVP反馈改进和更新MVP优化团队开发优化业务开发发布系统Beta V1.0系统测试准备ICO准备上市


2019年1月至6月ICO清单代币发布应用程序和交易平台V1.0适用于全球分布的大多数CPU、GPU和VPU

您应该尝试使用Visjs.org。下面是一些你可以用它做什么的例子

例如，从“文档”页面可以看到如何创建基本时间线：

<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="http://visjs.org/dist/vis.js"></script>
  <link href="ttp://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>


时间线|基本演示
正文，html{
字体系列：无衬线；
}
//将附加时间线的DOM元素
var container=document.getElementById（'visualization'）；
//创建数据集（允许双向数据绑定）
var items=new vis.DataSet([
{id:1，内容：'item 1'，开始：'2013-04-20'}，
{id:2，内容：'item 2'，开始：'2013-04-14'}，
{id:3，内容：'item 3'，开始：'2013-04-18'}，
{id:4，内容：'item 4'，开始：'2013-04-16'，结束：'2013-04-19'}，
{id:5，内容：'item 5'，开始：'2013-04-25'}，
{id:6，内容：'item 6'，开始：'2013-04-27'}
]);
//时间线的配置
var选项={}；
//创建时间线
var timeline=新的可视时间线（容器、项目、选项）；

使用带有2行的CSS网格，可以将时间轴的每个段定义为2列宽。使第二段的3列宽度立即为您提供交错布局。我建立了一个描述列表，但这是基本的想法：

dl{
显示：网格；
网格自动列：最大内容；
网格自动流：列；
网格模板行：自动；
}
.细胞{
格构柱：跨度2；
}
.单元格：第n个孩子（2）{
格构柱：跨度3；
}

。你的问题是什么？我知道你在做什么，但你到底想让别人帮你做什么？