前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >纯CSS序列号

纯CSS序列号

作者头像
发布2021-11-08 11:51:37
1.5K0
发布2021-11-08 11:51:37
举报
文章被收录于专栏:IT杂症
代码语言:javascript
复制
<!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档