使用纯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. Innodb parent table open时导致crash

    case描述: innodb中,父表和子表通过foreign constraint进行关联, 因为在更新数据时需要check 外键constraint,如果父表被大量的子表reference, 那么在 ...

  2. Spring3中用注解直接注入properties中的值

    在bean(可是controller, service, dao等了)中,使用@Value注解: @Service public class TestService{ @Value("${s ...

  3. ORACLE SQLloader详细语法

    Oracle   SQL   Loader的详细语法     SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据     ...

  4. word2010中莫名出现灰色中括号解决方案

    灰色中括号[]是文中书签,解决方案: word 文件-选项-高级,在“显示文档内容”部分,去掉“显示书签”前面的勾选.

  5. ExpectationMaximum

    2- You may have question marks in your head, especially regarding where the probabilities in the Exp ...

  6. 一个简单的MDI示范程序(Delphi)

    http://www.cnblogs.com/pchmonster/archive/2012/01/07/2316012.html 最为一个巩固之前有关窗体和对象的有关知识,下面就建立一个简单的MDI ...

  7. 【Jenkins】Linux搭建Jenkins平台

    为了配合上一篇的ant+jenkins做持续集成,需要在linux环境下搭建一个jenkins平台.网上有很多安装的例子,我主要记录一下自己遇到的问题,真真的是特别惆怅的,每次我遇到的问题都格外多. ...

  8. QTP检查点和参数化_百度一下

    一.脚本编辑检查点: Browser("百度知道 - 全球最大中文互动问答平台").Page("百度知道 - 全球最大中文互动问答平台").WebEdit(&q ...

  9. Anti-Grain Geometry 概述

    AGG是一个轻量.灵活.可靠的图形算法库,AGG各部分之间是松耦合的,也即是说各部分可以单独使用. The primary goal of Anti-Grain Geometry is to brea ...

  10. 本地已有SVN项目导入到eclipse中

    有时候在本地上checkout了项目,在eclipse中不希望重新checkout一次,可以如下操作: 1.在project上右键-> team -> share project -> ...