Question

我不能用HTML + CSS制作这些：

我尝试所有的东西......以前，之后：之后，但我真的做不到。

我做了一个JsFiddle演示。

Demo

我该怎么做？你知道吗？

其他问题：这也可以是反复的吗？（我想不是...... :(）

代码（CSS）：

<div class="container">
  <div class="span">Lorem ipsum</div>
  <div class="down">Dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem ipsum dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
</div>

代码（HTML）：

from Tkinter import *
from PIL import Image, ImageTk

app_root = Tk()
img = ImageTk.PhotoImage(Image.open("detailedmodel.jpg"))

imglabel = Label(app_root, image=img).grid(row=1, column=1)

app_root.mainloop()

Answer 1

具体细节的描述需要一段时间，所以我只是简单地演示一下一个方法，它看起来像是你想要的东西。

代码ID非常低效（目前没有响应）但我希望基础知识足以让你一路上看到你。

.timeline {
  height: 250px;
  margin: 1em;
  line-height: 250px;
  position: relative;
  text-align: center;
}
.timeline:before {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 26px;
  margin-top: -13px;
  background: red;
}
.event {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 50px;
  display: inline-block;
  background: blue;
  vertical-align: middle;
  border-radius: 50%;
}
.detail {
  position: absolute;
  line-height: 1em;
  white-space: nowrap;
  left: 100%;
}
.event:before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  background: green;
  height: 50px;
}
.event.up:before {
  top: -100%;
}
.event.down:before {
  top: 100%;
}
.up .detail {
  top: -50px;
}
.down .detail {
  bottom: -50px;
}

<div class="timeline">
  <div class="event up">
    <div class="detail">Lorem ipsum dolor.</div>
  </div>
  <div class="event down">
    <div class="detail">lorem</div>
  </div>
  <div class="event up">
    <div class="detail">Lorem ipsum dolor sit amet</div>
  </div>
</div>

Answer 2

试试这个https://jsfiddle.net/hf19qbg2/16/

预览

.container { width:80%; display:block; margin-top: 100px; margin-left: 100px; } .line { width: 100%; background: blue; margin: 50px 0; height: 5px; } .top, .bottom { display: flex; flex-direction: row; } .bottom { padding-left: 50px; } .top .top-element, .bottom .bottom-element { padding: 0 25px; position: relative; } .top-element:before, .bottom-element:before { content: "I"; height: 20px; width: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #C33900; color: white; position: absolute; left: 0; } .top-element:before { bottom: -63px; } .bottom-element:before { top: -63px; } .top-element:after, .bottom-element:after { content: ""; height: 50px; width: 2px; background: #8ACCC6; position: absolute; } .top-element:after { left: 10px; bottom: -40px; } .bottom-element:after { left: 10px; top: -40px; }

<强> HTML

<div class="container"> <div class="top"> <div class="top-element">Lorem top 1</div> <div class="top-element">Lorem top 2</div> <div class="top-element">Lorem top 3</div> <div class="top-element">Lorem top 4</div> </div> <div class="line"></div> <div class="bottom"> <div class="bottom-element">Lorem bottom 1</div> <div class="bottom-element">Lorem bottom 2</div> <div class="bottom-element">Lorem bottom 3</div> <div class="bottom-element">Lorem bottom 4</div> </div> </div>

Answer 3

找到我创建的优雅而简单的示例HERE。我使用ul和li标签来更快地完成工作。要更改项目数，您只需要处理您拥有的li标记的数量。

<强> HTML ：

<div class="container">
  <ul>
    <li>i</li>
    <li>i</li>
    <li>i</li>
    <li>i</li>
  </ul>
</div>

<强> CSS ：

* {
  box-sizing: border-box;
}
.container {
  background: #0048FF;
  position: relative;
  margin-top: 100px;
  width: 500px;
  height: 20px;
  border-radius: 20px;
}

li {
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin: 0 30px;
  padding: 5px 11px;
  top: -3px;
  background: #e59741; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e59741 21%, #c22d0b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e59741 21%,#c22d0b 100%); /*     Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e59741 21%,#c22d0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e59741', endColorstr='#c22d0b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient     */
  border-radius: 50%;
  color: white;
  font-size:14px;
}
li:nth-child(2n+1):after {
  content:"\00a0\00a0number1\00a0number3";
  position: absolute;
  padding: 0 0 20px 0;
  color: black;
  top: -50px;
  bottom: 25px;
  left: 12px;
  border-left: 2px solid #9CD4CF;
}

li:nth-child(2n):after {
  content: "\00a0\00a0number1\00a0number2";
  position: absolute;
  padding: 30px 0 0px 0;
  color: black;
  top: 25px;
  left: 12px;
  border-left: 2px solid #9CD4CF;
}

如何创建简单的水平时间轴

3 个答案: