登录/注册

首页 › 活字格专区 › 专题教程 › 查看内容

175 主题	1万帖子	1万积分

Rank: 8 Rank: 8

积分: 19201

257075
金币
175
主题
13130
帖子

最新发帖

[易学技巧] 活字格中，如何设置更好看的按钮样式 CSS

讲师达人认证

悬赏达人认证

活字格认证

超级版主 / 发表于：2018-3-8 11:37 / 查看：16302 / 回复：13

本帖最后由 Simon.hu 于 2018-3-8 11:39 编辑

在学习活字格模板的时候发现了很多有意思的CSS样式，基于活字格之前线上培训第七课的视频内容，我总结了一部分hover选择器CSS样式的设置。以便于我们做出更有意思，更好看的Web系统。
1.首先活字格设计器中必须要上传对应的css文件。具体css样式文件见附件。
image.png320613707.png

image.png320613707.png

2.打开网址：http://ianlunn.github.io/Hover/
这个网站中囊括了第1步上传的css文件中的所有样式。
image.png943502807.png

image.png943502807.png

3.如果发现了自己想要的css样式，可以在浏览器中按F12，或者右键选择审查（检查）元素。打开下图所示。
image.png995498352.png

image.png995498352.png

4.以Grow样式为例。如果我想在活字格某一个单元格运用该样式。点击“选取元素”按钮，选择对应的Grow元素。
选择Grow元素.gif

选择Grow元素.gif

5.选择Grow元素之后，获取该元素的类名（class=后的内容，此处类名为hvr-grow）。
image.png453457641.png

image.png453457641.png

6.复制类名，在活字格设计器中选择你需要设置css样式的单元格，将复制的类名添加到单元格设置下的CSS类名中。
image.png718088073.png

image.png718088073.png

7.至此，单元格的css样式就已经设置完成了，保存工程文件，运行便可查看效果。
效果演示.gif

效果演示.gif

image.png736275939.png

Hover.css演示.fgcc

530.06 KB, 下载次数: 761

8.53 KB, 下载次数: 699

评分

参与人数 5	金币 +1000	满意度 +19	收起理由
孤狼		+ 5
cnsxwxq		+ 5	赞一个!
宋小猫		+ 5	很给力!
魔法青蛙		+ 4	很给力!
Simon.hu	+ 1000		赞一个!

查看全部评分

收藏

回复

13 个回复

倒序浏览

andy_chen
金牌服务用户 / 发表于：2018-3-8 11:45:44 沙发

收了，很不错，攒

回复 使用道具举报

504146555
金牌服务用户 / 发表于：2018-3-8 19:02:25 板凳

谢谢分享，解决页面部分效果问题了。赞！

回复 使用道具举报

Simon.hu
超级版主 / 发表于：2018-3-9 09:59:49 地板

欢迎更多的同学分享自己的黑科技!

点我了解价格 & 预约官方技术顾问

回复 使用道具举报

jackblues
注册会员 / 发表于：2018-3-18 21:36:12 6^#

好的很，不错！

回复 使用道具举报

Eric.Liang
超级版主 / 发表于：2018-3-19 09:05:00 7^#

jackblues 发表于 2018-3-18 21:36
好的很，不错！

回复 使用道具举报

hadwin
金牌服务用户 / 发表于：2018-6-26 11:00:42 8^#

不错不错~

回复 使用道具举报

Eric.Liang
超级版主 / 发表于：2018-6-26 17:32:25 9^#

hadwin 发表于 2018-6-26 11:00
不错不错~

回复 使用道具举报

豌豆琳
注册会员 / 发表于：2018-7-16 11:45:09 10^#

很不错

回复 使用道具举报

Eric.Liang
超级版主 / 发表于：2018-7-16 11:46:24 11^#

豌豆琳发表于 2018-7-16 11:45
很不错

回复 使用道具举报

12 / 2 页下一页