Skip to content

Commit 355a449

Browse files
maliangcodermaliangcoder
committed
css实现分类标签
1 parent 86823c4 commit 355a449

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

‎常用的CSS主流布局案例(1~8)/31_分类标签.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>分类标签</title>
6+
<style>
7+
a {
8+
text-decoration: none;
9+
}
10+
.tag-list {
11+
border: 1px solid #ddd;
12+
padding: 0 10px 6px;
13+
font-size: 0;
14+
background-color: rgb(231,228,228);
15+
}
16+
.tag-list a {
17+
display: inline-block;
18+
height: 23px;
19+
line-height: 23px;
20+
padding: 0 10px;
21+
margin: 6px 10px 0 0;
22+
border: 1px solid #dcdcdc;
23+
border-radius: 3px;
24+
background: #f9f9f9;
25+
font-size: 14px;
26+
color: #666;
27+
vertical-align: top;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="tag-list">
33+
<a href="" class="tag-item">前端开发</a>
34+
<a href="" class="tag-item">web前端</a>
35+
<a href="" class="tag-item">html</a>
36+
<a href="" class="tag-item">css</a>
37+
<a href="" class="tag-item">javascript</a>
38+
<a href="" class="tag-item">vue</a>
39+
<a href="" class="tag-item">html5</a>
40+
<a href="" class="tag-item">css3</a>
41+
<a href="" class="tag-item">react</a>
42+
<a href="" class="tag-item">solidjs</a>
43+
<a href="" class="tag-item">......</a>
44+
<a href="" class="tag-item">........</a>
45+
</div>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)