先上学习地址:http://www.htmleaf.com/Demo/201610234136.html

作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作。

第一个是left按钮,即prev:

.vmc-arrow-left:after {
content: "\e079";
}

第二个是right按钮的,也就是next下一张的按钮:

.vmc-arrow-right:after {
content: "\e080";
}

最后是二者共同的样式代码:

.vmc-arrow-left:after, .vmc-arrow-right:after {
content: '';
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight:;
line-height:;
-webkit-font-smoothing: antialiased;
font-size: 50px;
line-height: 50px;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 2px 2px #000;
}

首先,我觉得核心代码就是伪类中添加的那两个content内容,其次是共同样式中的font-family的作用,如果不使用这个字体,会变成一个“口”。("口"只是表面现象,是因为我的电脑没有装这个字体的缘故,他没有识别读取出这个。)

其余,都是样式了,可以自定义的。

注意到一点是在共同样式部分,还是要有空内容这个设置先放在那里的。(后来再来看,我突然想起来,忽略了这三个样式的先后顺序关系,那要是共同样式在后边,会把前两个单独样式覆盖掉啊。)

还是同一个网站,不同项目中,看到了font文件夹中有icomoon的字体:

好奇查了一下,是一种web图标字体,这样就能解释之前那个案例中,font-family的重要性的原因了。原因是:那种字就是图标字,而content加载的序号应该就是字库中对应的那种图标。如下是一个小房子的图标代码:

.icon-htmleaf-home-outline:before {
content: "\e5000";
}
.htmleaf-icon:before {
margin: 0 5px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'icomoon';
line-height:;
speak: none;
-webkit-font-smoothing: antialiased;
}

也就是说:字体“Glyphicons Halflings”中,

"\e079"、"\e080"分别对应的就是左右箭头了?!

推理没错,因为我换一个字体他就不是这个图标了,眼下搞不懂具体原理,但可以肯定的是,这个字体和这两个号码组合,出来的就是左右箭头图标。

2017-07-13  17:48:34

前几天刚掌握了字体图标,刚好又看到一开始蒙着眼睛走路的自己写的这篇白痴的文章,

左右箭头就是字体图标,这两天字体图标原理及文章整理的计划已经被我提上日程,

文章出来以后,见链接

CSS-用伪元素制作小箭头(轮播图的左右切换btn)的更多相关文章

  1. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  2. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  3. 微信小程序轮播图的制作与跳转

    <!--轮播图 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' au ...

  4. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  5. 一分钟学会如何自定义小程序轮播图(蜜雪冰城Demo)

    最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了.本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解 ...

  6. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  7. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  8. 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码: 这是WXML 页面 代码: <view class='carousel_div'> <swiper class=" ...

  9. 微信小程序------轮播图

    swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...

随机推荐

  1. Android Studio:Multiple dex files define Landroid/support/annotation/AnimRes

    近期真的比較忙,一不小心博客又荒了两个月. 从今天起.决定重返csdn,多多纪录和分享. 先从一个近期被折磨的死去活来的问题. 由于升级了V4包,就一直报这个问题: com.android.dex.D ...

  2. iOS边练边学--UITableView性能优化之三种方式循环利用

    一.cell的循环利用方式1: /** * 什么时候调用:每当有一个cell进入视野范围内就会调用 */ - (UITableViewCell *)tableView:(UITableView *)t ...

  3. C#捕获鼠标消息

    在C#中怎样禁用鼠标按键,我们可以通过ImessageFilter接口下的PreFilterMessage方法.Application类的AddMessageFilter方法,RemoveMessag ...

  4. kettle启动时候报a fatal exception has occurred

    本人刚接触ETL工具 Data Integration - Kettle ,下载了kettle6.0版本,但是在window +jdk1.7(32位)下启动报错, 使用SpoonDebug.bat写的 ...

  5. jQuery方法笔记

    .clone() $(selector).clone(includeEvents) $(this).clone(true) //boolean值,true/false分别对饮是否复制元素的所有事件处理

  6. thinkphp 操作mssql2008

    配置文件 <?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' =&g ...

  7. C API 连接MySQL及批量插入

    CMySQLMgr.h: #ifndef _CMYSQLMGR_H_ #define _CMYSQLMGR_H_ #include <iostream> #include "my ...

  8. e656. 创建基本图形

    Shape line = new Line2D.Float(x1, y1, x2, y2); Shape arc = new Arc2D.Float(x, y, w, h, start, extent ...

  9. perl 实现ascall 码转换

    今天需要在perl中实现一个字母表, 总不能把26个字母一个一个写出来,于是查资料,可以利用ascii码转换把数字转换成对应的字母 chr函数可以利用ascii编码把数字转换成对应的字母 perl - ...

  10. win7 键盘

    请在任务栏的空白处右击,在弹出的选项中选择“工具栏”,再在“Table PC输入面板”选项中打勾,这里任务栏的最右边就会出现一个Table PC 输入面板”的图标