使用纯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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
