如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
利用layui样式，不用图片，实现星星图标
来源：互联网
2023-03-16 19:12:44 396
在html页面开发时，我们很多时候都会使用一些图标来美化页面，之前的做法通常都是使用一些小图片来做背景，但现在不需要做图片这样麻烦了，下面我们来看下使用layui库来实现星星图标。
方法/步骤
首先需要我们在页面里引入layui的样式文件，这个大家可以百度搜索下载，版本要2.3或以上的。
还需要将layui的字体文件放到font目录下，font目录和css目录同级。
接下来就很简单了，在html里写几个i标签就行了，要注意的是class样式要加上layui-icon layui-icon-rate。其中第一个是空心的星星，第二个是半心的，第三个是非空心的。
运行页面，我们可以看到现在页面上有三个星星图标了，我们没有使用任何的图标。而是使用字体图标。
使用字体图标有很多好处，除了不需要制作图片外，我们还可以任意改变图标的大小，只要设置其样式font-size就行了。
这样我们就可以看到几个较大的星星图标了。
和文字，字体一样，我们除了改变其大小，还可以改变其颜色，同样是加样式color就行了。
现在我们轻易的就得到了红色的星星图标了。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)