-
hint.css是一个20kb的css,却实现了和多炫酷的提示效果,无需javascript代码,无需javascript代码,无需javascript代码,重要的事情说三遍,具体是什么效果呢?可以查看自己尝试添加一下,下面来给你做个简单演示,3分钟让你学会怎么用!
1、网页head部分引用hint.css
<link rel="stylesheet" href="hint.css">
2、使用
设置提示框的位置:
<span class="hint--位置" aria-label="提示语">html内容</span>
位置相关的class类
左←:hint--left
右→:hint--right
左上↖:hint--top-left
上↑:hint--top
右上↗:hint--top-right
左下↙:hint--bottom-left
下↓:hint--bottom
右下↘:hint--bottom-right
设置提示框的颜色:
<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>
颜色相关的class类
红色警告:hint--error
黄色提醒:hint--warning
绿色通过:hint--success
蓝色正常:hint--info
<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>
大小相关的class类
小号:hint--small
中号:hint--medium
大号:hint--large
好了,关于纯代码实现提示功能的分享完毕,通过上面各种类的排列组合,完全可以自由发挥,可以自己设置多种不同的风格哦。
hint.css下载:
hint.css纯代码实现超炫提示功能
3381人参与 |分类: 站长百科|时间: 2016年09月08日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法
评论专区德信商城