By

文章目录 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>标签</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    
    <style type="text/css">
    /*标签css*/
 
    /*标签ul和li的实现*/
    .tags {
        list-style-type:none;
        float:left;
        margin-left:10px;
        margin-bottom:3px;
    }
    /*连接a的实现，右侧的圆角实现，hover效果实现*/
    .tags a{
        display:block;
        text-decoration:none;
        font-size:10px;
        color:white;
        background-color:#0089e0;
        height:19px;
        line-height:19px;
        padding:0 10px 0 10px;
        position:relative;
        border-radius:0 5px 5px 0;
    }
    .tags a:hover{
        background-color:#666;
    }
     
    /*左侧三角形的实现*/
    .tags a:before{
        content:" ";
        width:0px;
        height:0px;
        position:absolute;
        top:0;
        left:-19px;
        border:10px solid transparent;
        border-right-color:#0089e0;
    }
    .tags  a:hover:before{
        border-color:transparent #666 transparent transparent;
    }
     
    /*小圆点的实现*/
    .tags a:after{
        content:" ";
        width:4px;
        height:4px;
        background-color:#fff;
        border-radius:4px;
        box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);
        position:absolute;
        top:8px;
        left:3px;
    }
    </style>
</head>
<body>
<li class="tags">
     <a href="" >tag</a>
</li>
<li class="tags">
     <a href="" >tag</a>
</li>
<li class="tags">
     <a href="" >tag</a>
</li>
<li class="tags">
     <a href="" >tag</a>
</li>
<li class="tags">
     <a href="" >tag</a>
</li>
<li class="tags">
     <a href="" >tag</a>
</li>
</body>
</html>
文章目录