Skip to content

Commit 809ab89

Browse files
maliangcodermaliangcoder
committed
css实现点引导线
1 parent 0d224e1 commit 809ab89

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

‎常用的CSS主流布局案例(1~8)/16_点引导线.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>点引导线</title>
6+
<style>
7+
.container {
8+
border: 1px solid #ddd;
9+
padding: 10px;
10+
}
11+
.item {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
margin: 5px 0;
16+
}
17+
.item-dots {
18+
border-bottom: 1px dashed #ddd;
19+
flex: 1;
20+
margin: 0 4px;
21+
}
22+
.item-label {
23+
padding: 3px 4px;
24+
border-radius: 4px;
25+
background-color: var(--color);
26+
font-size: 14px;
27+
color: #fff;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="container">
33+
<div class="item">
34+
<div class="item-title">把中国饭碗端得更牢</div>
35+
<div class="item-dots"></div>
36+
<div class="item-label" style="--color:pink">新</div>
37+
</div>
38+
<div class="item">
39+
<div class="item-title">教育部回应教材插图事件</div>
40+
<div class="item-dots"></div>
41+
<div class="item-label" style="--color:skyblue">热</div>
42+
</div>
43+
<div class="item">
44+
<div class="item-title">欧冠决赛</div>
45+
<div class="item-dots"></div>
46+
<div class="item-label" style="--color:orange">热</div>
47+
</div>
48+
</div>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)