24小时在线 - 古典小说 - 文学小说 - 关于我们
您的当前位置:首页 > web开发 > Html/Css >

【技艺】使用纯CSS+html写出方向箭头,简单大方,好看

来源:比特技术 编辑:比特技术网 时间:2018-05-19点击:
导读:【技能】使用纯CSS+html写出方向箭头,简单大方,好看使用纯CSS+html写出方向箭头,贴出来
【技能】使用纯CSS+html写出方向箭头,简单大方,好看

使用纯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>


来源:比特技术在线(www.byte.online),欢迎分享本文,转载请保留出处!
http://www.byte.online/a/webkaifa/Html_Css/2018/338446.html
责任编辑:比特技术网

    打赏

    取消

    感谢您的支持,我会继续努力的!

    扫码支持
    扫码打赏,你说多少就多少

    打开支付宝扫一扫,即可进行扫码打赏哦

    网友评论:

    Copyright © www.byte.online 比特技术在线 版权所有 粤ICP备15038486号-3
    本站所有资料来源于网络,由个人收集整理,仅限于个人学习和研究,如果侵犯您的权益请联系我们删除!
    Top