| CSS | 您所在的位置：网站首页 › css图片左右切换 › CSS |
CSS
|
先上学习地址：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: 400; line-height: 1; -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加载的序号应该就是字库中对应的那种图标。如下是一个小房子的图标代码：
也就是说：字体“Glyphicons Halflings”中， "\e079"、"\e080"分别对应的就是左右箭头了？！ 推理没错，因为我换一个字体他就不是这个图标了，眼下搞不懂具体原理，但可以肯定的是，这个字体和这两个号码组合，出来的就是左右箭头图标。 2017-07-13 17:48:34 前几天刚掌握了字体图标，刚好又看到一开始蒙着眼睛走路的自己写的这篇白痴的文章， 左右箭头就是字体图标，这两天字体图标原理及文章整理的计划已经被我提上日程， 文章出来以后，见链接 |
，
【本文地址】