Skip to content

Commit d83cdb5

Browse files
maliangcodermaliangcoder
committed
css实现时间轴
1 parent a82e7f2 commit d83cdb5

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

‎常用的CSS主流布局案例(1~8)/46_时间轴.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>时间轴</title>
6+
<style>
7+
ul li {
8+
list-style: none;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
.timeline {
13+
position: relative;
14+
}
15+
.timeline .line {
16+
height: 100%;
17+
border-right: 2px solid pink;
18+
position: absolute;
19+
left: 10px;
20+
top: 0;
21+
z-index: -1;
22+
}
23+
.item {
24+
margin-bottom: 18px;
25+
}
26+
.item-top {
27+
display: flex;
28+
align-items: center;
29+
}
30+
.item-top-circle {
31+
height: 20px;
32+
width: 20px;
33+
border-radius: 9999px;
34+
background-color: pink;
35+
}
36+
.item-top-title {
37+
flex: 1;
38+
padding-left: 10px;
39+
line-height: 35px;
40+
}
41+
.item-content {
42+
margin-left: 40px;
43+
background-color: pink;
44+
min-height: 100px;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<div class="timeline">
50+
<div class="line"></div>
51+
<ul class="timeline-list">
52+
<li class="item">
53+
<div class="item-top">
54+
<div class="item-top-circle"></div>
55+
<div class="item-top-title">标题...</div>
56+
</div>
57+
<div class="item-content">...</div>
58+
</li>
59+
<li class="item">
60+
<div class="item-top">
61+
<div class="item-top-circle"></div>
62+
<div class="item-top-title">标题...</div>
63+
</div>
64+
<div class="item-content">...</div>
65+
</li>
66+
</ul>
67+
</div>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)