灰机整合了一些备受好评的第三方开源CSS样式库,以方便用户自行调用,免去手写/搬运之苦。

本文的一些内容需要一些入门级的CSS知识基础,如果您还不太明白“CSS样式表”、“class”和相关html知识,请另行参见以下内容:

工作原理

Css库示意图.png
灰机在站点资源层打包整合了一些第三方开源的样式库,在这些不同的样式库中包含了若干个Class,用户可以在自己的站点中任意页面里的任意元素中插入class="<想要引用的class名称>"即可获得对应的样式效果。例如:

<div class="hover-buzz"></div>

但是请务必注意两点:

  • 必须在源代码模式下操作
  • 必须先在页面中声明想要引用的库,才可以成功引用,否则不会加载。开启方法详见:开启方法

开启方法

为了减少预加载,提高页面浏览速度,样式库是默认关闭的,只有在声明引用的时候才会加载,具体方式是在您想要使用样式库的页面中的任意位置输入: <样式表名称.css/>

例如我想调用“ihover”这个样式库,就在页面的任意位置写入“<ihover.css/>”即可

样式的调用与修改方法

调用

<hover.css/> 举个例子,比如您的页面中有这么一段话:

点我

源代码编辑器下是

[[user:SerGawen|点我]]

这是我想给这句话添加一个悬浮效果,我觉得使用来自“hover”样式库的“buzz”样式(我们在hover的手册中找到这一样式的class ID是“hvr-buzz”) 那么操作过程如下:

<span class="hvr-buzz">[[user:SerGawen|点我]]</span>

效果是:点我

这里我使用的是“<span>”标签,类似的您也可以在div、table、li等其他元素中使用。

与class的属性一样,样式可以叠加,比如

<span class="hvr-buzz hvr-sweep-to-left">[[user:SerGawen|点我]]</span>,效果:点我

修改

您可以在站点层对class样式进行修改,站点的class属性会覆盖默认的class属性,比如如果您认为默认的蓝色不合适,可以在本地将对应的background字段改为其他颜色,再进行引用。更改方法有两种

  • 在站点css页面中修改,需要管理员权限,效果不会马上生效,要等后服务器缓存最近一次更新,亦可以手动使用“调试”功能看到效果;

.hvr-buzz {background:#333;}

  • 在页面中使用{{#css:}}解析器函数,{{#css:.hvr-buzz {background:#333;}}可以立刻生效,但是使用不当会增加页面加载内容,慎用。

支持的样式库表

Hover.css

Hovercss.png一款简洁、实用的悬浮效果样式库,支持与Fontawesome图标库一起实用:

  • 源链接地址:Hover.css @Github(有效果预览)
  • 代码库地址:github代码库
  • 教程地址:hovercss教程(英文)
  • huiji开启方法:任意位置输入<hover.css/>
  • class命名规则:“hvr”+“class类名”。如果您想使用的效果是“Grow”,那么只需在本站开启<hover.css/>后,调用“hvr-grow”class即可。

iHover.css

Ihovercss.png比起hover更加酷炫的一套 悬浮效果库。

  • 源链接地址:iHover.css @Github(有效果预览)
  • 代码库地址:github代码库
  • huiji开启方法:任意位置输入<ihover.css/>
  • class命名规则:ihover使用的是样式组合的方法,具体请参见源链接地址上的代码效果和说明。

纯css背景图案

一些好看的纯CSS背景素材。 http://lea.verou.me/css3patterns/

其他推荐

如果您有其他优秀的样式库向我们推荐,请在本页面下留言或者发邮件到support@huiji.wiki告知我们!

avatar