2677731CSS3 之 flex 布局 2023-03-02flex 是 flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定 flex 布局。 采用 flex 布局的元素成为 flex 容器。其所有子元素会自动成为容器成员,成为 flex 项目。 通过给 flex 容器添加 flex 属性来控制 flex 项目的位置和排列方式。
287452CSS3 之 filter 属性 2021-03-18在编写前端页面的动画效果时,或多或少会用到 filter 属性,由于其属性值过多,故本篇用于整理和记录其相关资料。 filter属性定义了元素(通常是)的可视效果。 属性值如下:
314706轻松搭建专属 CDN 2021-01-20前段时间笔者搭建一个 博客系统 放在服务器上,为了提高访问速度和减轻服务器访问压力,决定将页面中的静态资源使用 CDN 进行加速访问。 常见的 CDN 方案有 BootCDN 和 jsDelivr ,笔者选择后者。 因为笔者编写的 jQuery 自定义插件,但无法上传到 BootCDN 上进行加速使用。而 jsDelivr 不同,它很强大,通过 GitHub 搭配 jsDelivr 可以搭建自己专属的 CDN 库。
556973highlight.js 设置行号 2018-06-24笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器,由于不满足其代码高亮的样式,因此选用 highlight.js 插件来实现代码高亮功能。但是,highlight.js 插件不提供行号的设置功能,于是有了该文章。 html 的代码块都是通过 <code></code> 进行封装,我们可以将其内容取出封装到 <ol><li></li></ol> 从而实现设置行号的效果。 下边提供两种实现方式。
287970Sublime Text 3 设置 2018-03-24为了有效和安全管理插件,在 Sublime Text 的安装目录中创建 Data 目录(之后插件就放在该目录中)。 重启 Sublime Text 后 Preferences-> Browse Package 打开的目录就指向 Data。 主界面 Help-> Enter license,弹出窗口输入如下内容:
331941简单实现 3D 相册 2017-12-04 之前写过《CSS3 动画简单入门》,文章内容只是简单介绍 CSS3 动画属性的使用,并没有一个综合的案例演示,因此本章作为前者的内容补充。 下面简单介绍本章需要实现的 3D 效果:
275670原生 Javascript 编写五子棋 2017-11-02近一个月没写 Javascript 代码,有点生疏。正好浏览网页时弹出五子棋的游戏广告,于是想通过编写这个小游戏练练手。 棋盘:通过图片(chessboard.png)和 div 标签渲染出棋盘。
296900Web 漏洞分析与防御之点击劫持(三) 2017-10-16点击劫持,顾名思义,用户点击某个按钮,却触发了不是用户真正意愿的事件。 用户在登陆 A 网站的系统后,被攻击者诱惑打开第三方网站,而第三方网站通过 iframe 引入了 A 网站的页面内容,用户在第三方网站中点击某个按钮(被装饰的按钮),实际上是点击了 A 网站的按钮。 演示图如下:
285790Web 漏洞分析与防御之 CSRF(二) 2017-10-11跨站请求伪造(Cross-site Request Forgery) 在用户登陆目标网站后,后端会返回用户登陆的凭证到前端(浏览器的 cookie)。攻击者诱使用户点击某个超链接,该超链接会发送恶意请求(会携带用户的 cookie),从而冒充用户完成业务请求(发帖、盗取用户资金等)。 笔者以网站的发帖功能为案例对 CSRF 攻击进行简单的讲解。