纯CSS序列号 - 成长小破站

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>per-Css-ol</title>
<!---this code written by jcomey 2013-11-7-15:43:52  
IE8+ 、FF、chrome...modern Browser
my website:http://www.lookcss.com
-->

<style type="text/css">
.ol {
     cursor:pointer;
    list-style-type: none;
    counter-reset: sectioncounter;
}
.ol li:before {
    font-family: Helvetica, Arial, sans-serif;
    content: "第" counter(sectioncounter) "步";
    counter-increment: sectioncounter;
}
.bookmarks {
    display: inline-block;
    background: #21A557;
    width: 80px;
    color: #fff;
    position: relative;
    height: 24px;
    line-height: 24px;
    margin: 5px 0;
    text-indent: 0.5em;
}
.bookmarksArro {
    width: 0;
    position: absolute;
    right: 0;
    top: 0px;
    height: 0;
    width: 0;
    border-width: 12px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #fff transparent transparent;
}
/*书签ol bookmarks 利用border制作的小三
角 可改变三角形位置和颜色组合不同样式（自己修改）*/
.vol {
    display: inline-block;
    background: #21A557;
    width: 24px;
    white-space: normal;
    color: #fff;
    position: relative;
    height: 80px;
    text-align: center;
    margin: 5px 0;
}
.volArro {
    width: 0;
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 0;
    width: 0;
    border-width: 12px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #fff transparent;
}/*vertical ol 简称vol*/
.radius {
    background: #21A557;
    display: inline-block;
    color: #FFF;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
}/*圆角 ol*/
.cube {
    display: inline-block;
    background: #21A557;
    padding: 6px 12px;
    color: #fff;
    position: relative;
    text-align: center;
    margin: 5px 0;
}/*方形 ol*/
.triangle {
    display: inline-block;
    width: 80px;
    color: #000;
    position: relative;
    height: 24px;
    line-height: 24px;
    margin: 5px;
    text-indent: 0.5em;
}
.triaArro {
    width: 0;
    position: absolute;
    right: -10px;
    top: 0px;
    height: 0;
    width: 0;
    border-width: 12px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #21A557;
}
/*常见的triangle三角形 ol*/
.semiCircle {
    background: #21A557;
    display: inline-block;
    color: #FFF;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    position: relative;
    line-height: 60px;
    overflow: hidden;
    text-align: center;
    border-radius: 50%;
}
.semiArro {
    width: 0;
    position: absolute;
    left: 18px;
    bottom: -10px;
    height: 0;
    width: 0;
    border-width: 12px;
    border-style: solid dashed dashed dashed;
    border-color: #fff transparent transparent transparent;
    z-index: 100;
}
/*圆内三角形可改变三角形位置来组合不同图像*/
.border {
    background: #fff;
    display: inline-block;
    color: #21A557;
    vertical-align: middle;
    width: 60px;
    border: 2px solid #21A557;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
}
</style>
</head>
<body>
<div style="width:1024px; margin:0 auto;">
  <ol class="ol">
    <li class="vol"><span class="volArro"></span></li>
    <li class="bookmarks"><span class="bookmarksArro"></span></li>
    <li class="bookmarks"><span class="bookmarksArro"></span></li>
    <li class="bookmarks"><span class="bookmarksArro"></span></li>
    <li class="triangle"><span class="triaArro"></span></li>
    <li class="triangle"><span class="triaArro"></span></li>
    <li class="cube"></li>
    <li class="cube"></li>
    <li class="semiCircle"><span class="semiArro"></span></li>
    <li class="radius"></li>
    <li class="radius"></li>
    <li class="border"></li>
    <li class="vol"><span class="volArro"></span></li>
  </ol>
</div><script type="text/javascript">
var li=document.getElementsByTagName("li")
for(var i=0;i<li.length;i++){    
    var anchor=li[i]; 
    anchor.onclick=function(){ 
     alert("(?_?)? 走你 青年~");    
    window.location.href="http://www.lookcss.com"
        }    
    }

</script>
</body>
</html>