使用纯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>【技能】使用纯CSS+html写出方向箭头，简单大方，好看,布布扣,bubuko.com
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）