帮助:CSS样式库 发条狐狸 于1年前修改了此页面。

帮助

版权信息(CC BY-SA)编辑摘要版权信息(CC BY-NC)FAQHuiji缓存建站评估快速指南吐槽与讨论维基化页面图片邀请新用户站点等级站点评分保护页面表格编辑冲突编辑页面创建新页面恶意编辑Bot重定向页面短域名选择封禁公告模板灰机workshop快速插入项历史与回退链接命名常规视频教程上传媒体文件/1添加引用Wiki标记语言消歧义图片教程修改站点页脚修改站点导航学习地图页面分类移动页面用户权限站长指南章节变量AWB机器人BOOTSTRAPCSS样式库ExcelHTML灰机Wiki数据更新器简繁处理建站心得解析器扩展标签解析器函数命名空间魔术字模板模板参数使用CSS变量Tab切换SMongo素材库灰机停机坪文本处理工具图像处理工具XnView用户组限定的CSS/JS预设模板站点CSS编辑站点JS编辑主题编辑器折叠自动翻译字体搜索器与检索工具使用cockpit组件数学公式在灰机使用Less灰机Json编辑器可配置的站点功能API复杂模板狗头人APP灰机Wiki数据更新器\使用VS Code维护代码机器人开发者101零件MongoDB支持模块PythonMustache模板Semantic FormsSemantic Result Formats/echartsSemantic MediaWiki使用SPA提升访问速度推土机架构用Git管理MediaWiki在灰机使用Vue.js

简单

入门

进阶

复杂

开发

灰机帮助中心

本页面的内容已经过时，当前版本不再支持<hover.css/>但相关库仍然可以通过零件gadget导入，请自行判断

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

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

• HTML
• class（类）

工作原理

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

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

但是请务必注意两点：

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

开启方法

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

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

样式的调用与修改方法

调用

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

“SerGawen”

源代码编辑器下是

[[user:SerGawen|点我]]

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

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

效果是：SerGawen

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

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

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

修改

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

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

.hvr-buzz {background:#333;}

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

支持的样式库表

Hover.css

一款简洁、实用的悬浮效果样式库，支持与Fontawesome图标库一起实用：

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

iHover.css

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

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

纯css背景图案

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

其他推荐

如果您有其他优秀的样式库向我们推荐，请在本页面下留言或者发邮件到[email protected]告知我们！