本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
本文对轮播图左右按钮的处理方法一改往常,不是简单地用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:‘GlyphiconsHalflings‘;
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:2px2px#000;
}
首先,我觉得核心代码就是伪类中添加的那两个content内容,其次是共同样式中的font-family的作用,如果不使用这个字体,会变成一个“口”。
其余,都是样式了,可以自定义的。
注意到一点是到了共同区域还是要有空内容先放在那里的。
还是同一个网站,不同项目中,看到了font文件夹中有icomoon的字体:
,
好奇查了一下,是一种web图标字体,这样就能解释之前那个案例中,font-family的重要性的原因了。是那种字就是图标字,而content加载的序号应该就是字库中对应的那种图标字体。如下是一个小房子的图标代码:
.icon-htmleaf-home-outline:before{
content:"\e5000";
}
.htmleaf-icon:before{
margin:05px;
text-transform:none;
font-weight:normal;
font-style:normal;
font-variant:normal;
font-family:‘icomoon‘;
line-height:1;
speak:none;
-webkit-font-smoothing:antialiased;
}
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!