使用纯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写出方向箭头，简单慷慨，好看的更多相关文章

  1. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  2. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  3. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  4. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  5. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  6. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  7. 偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）

    现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...

  8. CSS代码实例:用CSS代码写出的各种形状图形

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; backgrou ...

  9. 【转】用CSS代码写出的各种形状图形的方法

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square {width: 100px;height: 100px;background: ...

随机推荐

  1. bzoj2595

    一开始看是插头dp,后来发现还有一个叫斯坦纳树的东西 什么叫斯坦纳树,就是使给定点连通开销和最小的树(可以包含多余的点) 到这张平面图上,我们不难想到用dp来解决,设f[x,y,S]表示连通集合为S, ...

  2. UPC 2224 Boring Counting ★(山东省第四届ACM程序设计竞赛 tag:线段树)

    [题意]给定一个长度为N的数列,M个询问区间[L,R]内大于等于A小于等于B的数的个数. [题目链接]http://acm.upc.edu.cn/problem.php?id=2224 省赛的时候脑抽 ...

  3. can't able to update the design capacity in bq27441-G1

    /*************************************************************************** * can't able to update ...

  4. eayui 验证扩展

    $.extend($.fn.validatebox.defaults.rules, { idcard : {// 验证身份证 validator : function(value) { return ...

  5. ARM Linux系统的时钟机制

    1. Linux下有两类时钟: 1.1 实时钟RTC 它由板上电池驱动的“Real Time Clock”也叫做RTC或者叫CMOS时钟,硬件时钟.当操作系统关机的时候,用这个来记录时间,但是对于运行 ...

  6. ASP.NET MVC 开篇

    MVC(Model-View-Controller,模型—视图—控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Controller) ...

  7. Python中，如何初始化不同的变量类型为空值

    参考文章  Python中,如何初始化不同的变量类型为空值 常见的数字,字符,很简单,不多解释. 列表List的其值是[x,y,z]的形式 字典Dictionary的值是{x:a, y:b, z:c} ...

  8. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.8

    For any matrix $A$ the series $$\bex \exp A=I+A+\frac{A^2}{2!}+\cdots+\frac{A^n}{n!}+\cdots \eex$$ c ...

  9. HDU5046 Airport dancing links 重复覆盖+二分

    这一道题和HDU2295是一样 是一个dancing links重复覆盖解决最小支配集的问题 在给定长度下求一个最小支配集,只要小于k就行 然后就是二分答案,每次求最小支配集 只不过HDU2295是浮 ...

  10. iOS程序性能优化

    iOS程序性能优化 一.初级 使用ARC进行内存管理 在iOS5发布的ARC,它解决了最常见的内存泄露问题.但是值得注意的是,ARC并不能避免所有的内存泄露.使用ARC之后,工程中可能还会有内存泄露, ...