首页 > 代码库 > 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

2024-07-09 06:37:01   220人阅读

使用纯CSS+html写出方向箭头，贴出来就能够用，100%原创

<html>

                <head>
                <title></title>
                                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                    <style type="text/css">
.pointsRule{
    display: inline-block;
    font-size: 12px;
    margin-top: 20px;
    float: left;
    margin-left: 50px;
}

.pointsRule span{
    float: left;
    display: inline-block;
}

.pointsRule ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    float: left;
    width: 100%;
}

.pointsRule ul li{
    display: list-item;
    text-align: center;
    float: left;
    margin: 10px 0 0;
    background: #fff;
    border-top: 1px solid #0F0F0F;
    border-bottom: 1px solid #0F0F0F;
    height: 45px;
}

.pointsRule ul li:first-child{
    border-left: 1px solid #0F0F0F;
}

.pointsRule ul li:last-child{
}

.pointsRule ul li a{
    display: block;
    padding: 8px 0;
    cursor: pointer;
}
.pointsRule ul li span{
    vertical-align: middle;
    width: 150px;
    height: 18px;
    line-height: 25px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    margin-left: 20px;
}
.pointsRule ul li  i {
    float: right;
    border: #130303 solid;
    border-width: 1px 1px 0 0;
    width: 32px;
    height: 32px;
    margin: -2px -17px 0px 10px;
    top: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background-image: url("");
}
                    </style>
                </head>
                <body>
 <div class="pointsRule">
                 <span>欢迎成为VIP 诚邀您參加VIP购物积分回馈活动，尊享精彩纷呈的购物体验及贵宾礼遇！</span>
                  <ul>
                    <li ><a><span>1.累计购物积分</span><i></i></a></li>
                    <li><a><span>2.兑换购物积分</span><i></i></a></li>
                    <li><a><span>3.使用积分抵用电子礼券</span><i></i></a></li>
                 </ul>
             </div>          
                </body>
</html>


联系
我们