文章列表 | 月光中的污点

文章列表

分类: 前端

当前位置: 首页 / 分类 / 前端

CSS3 之 filter 属性

在编写前端页面的动画效果时,或多或少会用到 filter 属性,由于其属性值过多,故本篇用于整理和记录其相关资料。 filter属性定义了元素(通常是)的可视效果。 属性值如下:

轻松搭建专属 CDN

前段时间笔者搭建一个 博客系统 放在服务器上,为了提高访问速度和减轻服务器访问压力,决定将页面中的静态资源使用 CDN 进行加速访问。 常见的 CDN 方案有 BootCDN 和 jsDelivr ,笔者选择后者。 因为笔者编写的 jQuery 自定义插件,但无法上传到 BootCDN 上进行加速使用。而 jsDelivr 不同,它很强大,通过 GitHub 搭配 jsDelivr 可以搭建自己专属的 CDN 库。

highlight.js 设置行号

笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器,由于不满足其代码高亮的样式,因此选用 highlight.js 插件来实现代码高亮功能。但是,highlight.js 插件不提供行号的设置功能,于是有了该文章。 html 的代码块都是通过 <code></code> 进行封装,我们可以将其内容取出封装到 <ol><li></li></ol> 从而实现设置行号的效果。 下边提供两种实现方式。

Sublime Text 3 设置

为了有效和安全管理插件,在 Sublime Text 的安装目录中创建 Data 目录(之后插件就放在该目录中)。 重启 Sublime Text 后 Preferences-> Browse Package 打开的目录就指向 Data。 主界面 Help-> Enter license,弹出窗口输入如下内容:

简单实现 3D 相册

之前写过《CSS3 动画简单入门》,文章内容只是简单介绍 CSS3 动画属性的使用,并没有一个综合的案例演示,因此本章作为前者的内容补充。 下面简单介绍本章需要实现的 3D 效果:

原生 Javascript 编写五子棋

近一个月没写 Javascript 代码,有点生疏。正好浏览网页时弹出五子棋的游戏广告,于是想通过编写这个小游戏练练手。 棋盘:通过图片(chessboard.png)和 div 标签渲染出棋盘。

Web 漏洞分析与防御之点击劫持(三)

点击劫持,顾名思义,用户点击某个按钮,却触发了不是用户真正意愿的事件。 用户在登陆 A 网站的系统后,被攻击者诱惑打开第三方网站,而第三方网站通过 iframe 引入了 A 网站的页面内容,用户在第三方网站中点击某个按钮(被装饰的按钮),实际上是点击了 A 网站的按钮。 演示图如下:

CSS3 动画简单入门

功能:让元素进行位移 语法: 单位:px,em,rem,百分比。

Web 漏洞分析与防御之 CSRF(二)

跨站请求伪造(Cross-site Request Forgery) 在用户登陆目标网站后,后端会返回用户登陆的凭证到前端(浏览器的 cookie)。攻击者诱使用户点击某个超链接,该超链接会发送恶意请求(会携带用户的 cookie),从而冒充用户完成业务请求(发帖、盗取用户资金等)。 笔者以网站的发帖功能为案例对 CSRF 攻击进行简单的讲解。

Web 漏洞分析与防御之 XSS(一)

跨站脚本攻击(Cross Site Scripting) 通过在网站中的输入框写入 script 脚本或引入 script 文件,如果网站未过滤输入内容,将会解析该脚本。 如果脚本的功能是获取网站的 cookie,cookie 中又保留一些敏感信息,则后果有可能很严重。