纯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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2013年11月07日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
