分类 Code 下的文章 - 阿Q正站

Typecho添加图片Fancybox暗箱效果

Code / March 14, 2020 / No Comments

图片暗箱各式各样，其实我更想要的是更加简洁的，就纯粹的一个弹出box，最重要的是美观，Fancybox效果也是相当不错，功能全面，这篇文章是搬运远航博客《Typecho添加图片暗箱效果》的，请大家对号入座。

1、引用 FancyBox插件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

More »

Tags ：插件, Type cho, FancyBox, 图片暗箱, 幻灯片

十几个国外无版权图片素材网站（部分免费）

Code / December 12, 2019 / 1 Comment

Typecho插件 - GEETEST极验验证码

Code / September 20, 2019 / 3 Comments

验证身份.png

最近不知道什么原因，网站被垃圾评论盯上了，不知道是广告机还是人为的，首先想到的是屏蔽IP，但屏蔽IP地址显然又有些霸权，
搜索了下找到这个插件，实现垃圾评论验证，因为是第三方验证机制，所以应该效果还是不错的，试下效果。

插件介绍
为评论部分加入验证功能，阻挡垃圾评论。

插件安装
下载后改文件名为GEETEST，并在后台启动插件。启动后设置参数。【需要去https://www.geetest.com/ 获取相关参数】

插件使用
在模板评论适当部分加入

<?php GEETEST_Plugin::gtOut();?>

插件下载
https://gitee.com/loiou/GEETEST

插件作者
https://gitee.com/loiou
作者博客：
https://www.loiou.com/typecho/typecho-GEETEST.html

我安装好后默认（应该是）作者帐号下的key，于是更换成自己的（才发现geetest我2016年就注册了帐号），需要注意的是安装的时候，要在提交按钮里面加一个id=“btn”

Tags ：验证码, 插件, 垃圾留言

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

Code / June 15, 2019 / 1 Comment

现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，但移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。下面我就来说一下如何做响应式（自适应）的网页设计

1、在网页代码的头部，加入一行viewport元标签

在网页的中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

属性	描述
width=device-width	width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0	initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100%
minimum-scale=1.0	表示最小的缩放比例
maximum-scale=1.0	表示最大的缩放比例
user-scalable=no	表示用户是否可以调整缩放比例，值为”no”或”yes”

More »

Tags ：自适应, html5, 网页设计

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

取值：

none：无背景图。
< url >：使用绝对或相对地址指定背景图像。
< linear-gradient>：使用线性渐变创建背景图像。（CSS3）
< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）
< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）
< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

More »

Tags ： css3, background, div多张背景

TypeCho使用摘要 首页产生很多空白（回车符）解决方法（有弊端，甚改）

Code / April 8, 2019 / No Comments

Web前端设计之痛：手机浏览器和pc浏览器的width:100%的自适应问题

Code / January 22, 2018 / No Comments

阿Q正站

阿Q正站