、html部分

1.取消iPhone自动识别数字为拨打号码

<meta name = "format-detection" content = "telephone=no">

2.移动开发、响应式布局

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes"/>

二、css部分

1.字母强制大写

text-transform: uppercase;

2.解决iPhone中overflow:scroll;滑动速度慢或者卡的问题

-webkit-overflow-scrolling: touch;

3.防止复制，兼容主流浏览器

-moz-user-select : none;

-webkit-user-select: none;

4.固定背景图片

background-attachment: fixed;

5.去除iphone input默认样式

input {

-webkit-appearance:none;

}

-webkit-appearance 可用于渲染input风格，多用于移动端，有兼容性问题，请自行百度

6.设置表格的边框合并为一个单一的边框

border-collapse:collapse;

7.添加（显示）IOS下滚动条

.box::-webkit-scrollbar{

-webkit-appearance: none;

width: 14px;

height: 14px;

}

.box::-webkit-scrollbar-thumb{

border-radius: 8px;

border: 3px solid #fff;

background-color: rgba(0, 0, 0, .3);

}

8.文字超出部分省略号隐藏

.box{

width: 200px;

/** 单行显示隐藏 **/

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

/** 多行显示隐藏 **/

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/

-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/

-webkit-line-clamp: 3; /** 显示的行数 **/

overflow: hidden; /** 隐藏超出的内容 **/

}

9.设置表格布局（我都不知道为什么我的笔记.txt里面会有这个...）

table{

table-layout:fixed;

}

10.如果想鼠标移动上去时显示被隐藏的文本内容，可以设置　

.box:hover {

text-overflow:inherit;

overflow:visible;

}

11.css实现选中checkbox，文字内容颜色变化

<style> .tgl-light + .tgl-btn { 
 background: #f0f0f0; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease;
 } 
 .tgl-light + .tgl-btn:after { 
 border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; 
 } 
 .tgl-light:checked + .tgl-btn { 
 background: #9FD6AE; 
 } 
</style> 
<div class='tg-list-item'> 
 <input class='tgl tgl-light' id='cb1' type='checkbox'> 
 <label class='tgl-btn' for='cb1'>11111111111</label> 
</div>

想要学习或者了解web前端编程的小伙伴,可以私信小编【学习】web前端海量知识分享，欢迎初学和进阶中的小伙伴。

应该都很熟悉

点击滑块然后移动到图片缺口进行验证

现在越来越多的网站使用这样的验证方式

为的是增加验证码识别的难度

那么

对于这种验证码

应该怎么破呢

接下来就是

打开 b 站的登录页面

https://passport.bilibili.com/login

image

可以看到登录的时候需要进行滑块验证

按下 F12

进入 Network

看下我们将滑块移到缺口松开之后做了什么提交

可以看到是一个 GET 请求

但是

这请求链接也太特么长了吧

我们来看看请求的参数是怎么样的

哇靠

gt？

challenge？

w？

这些都是什么鬼参数

还加密了

完全下不了手啊

既然以请求的方式不好弄

我们从它们的源代码入手

看看有什么突破口

回到 b 站的登录页

按下 F12

进入 Element

然后点击滑块出现了图片

定位一下

发现有两个 a 标签

一个 class 是 gt_bg gt_show

一个 class 是 gt_fullbg gt_show

和小帅b想的一样

这个验证码应该是有两张图片

一张是完全的背景图片

一张是缺口的图片

那把这两张图片下载下来对比一下不就行了

打开 a 标签一看

一张图片被切割成很多小块

原来这张图片是拼出来的

我们看看原始图片是怎么样的

记得私信小编【学习】领取Python学习教程哦。

什么乱七八糟的

再仔细看下源代码

原来是在同一张图片通过偏移量合成了一张完整的图片

background-position: -277px -58px;

看了一下缺口的图片也是如此

到这里

我们的第一个思路就是

下载这两张原始图片

然后通过偏移量合成两张真正的图片

背景图

image

缺口图

↓变身

那么怎么做呢？

因为我们还要模拟滑动滑块

所以呢

我们要用到selenium

打开b站的登录页

然后等到那个滑块显示出来

# 获取滑块按钮

接下来我们就获取页面的源码

driver.page_source

然后使用bs 获取两张原始背景图片的 url

bs = BeautifulSoup(driver.page_source,'lxml')

拿到了图片地址之后

将图片下载下来

# 将图片格式存为 jpg 格式

ok

我们已经把两张原始图片下载下来了

那么接下来就是要合成图片了

我们要根据图片的位置来合成

也就是源码中的 background-position

获取每一个小图片的位置

我们可以通过字典的形式来表示这些位置

然后将数据放到列表中

# 存放每个合成缺口背景图片的位置

那么

现在我们已经有了原始图片

还知道了每个位置应该显示原始图片的什么部分

接下来我们就写一个方法

用来合成图片

# 写入图片

那么问题又来了

怎么合成啊

我们再看看一开始分析的图片

这里图片被分割成的每一个小图片的尺寸是

10 * 58

所以我们也要将我们刚刚下载的原始图片切割成相应的尺寸大小

而且

这张图片是由上半部分的小图片和下半部分的小图片合成的

所以我们定义两个 list 来装这些小图片

# 存放上下部分的各个小块

然后将原始的图片切割好放进去

image = Image.open(image_file)

至此

我们这两个 list 就分别放好了各个切割的图片了

那么接下来就创建一张空白的图片

然后将小图片一张一张（间距为10）的粘贴到空白图片里

这样我们就可以得到一张合成好的图片了

# 创建一张大小一样的图片

那么到现在

我们可以得到网页上显示的那两张图片了

一张完全的图片

一张带缺口的图片

接下来我们就要通过对比这两张图

看看我们要滑动的距离是多远

# 合成图片

可以通过图片的 RGB 来计算

我们设定一个阈值

如果 r、g、b 大于这个阈值

我们就返回距离

def get_distance(bg_Image, fullbg_Image):

现在

我们知道了关键的滑动距离了

激动人心的时刻到了

我们使用 selenium

拿到滑块的元素

然后根据这个距离拖动到缺口位置不就好了么

马上打开 selenium 的文档

看到了这个函数

它可以使用左键点击元素

然后拖动到指定距离

最后释放鼠标左键

knob = WAIT.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show")))

运行一下试试看吧

妖怪吃了拼图了

看来直接拖拽是不行的

试着拖完滑块让它睡一下再释放

ActionChains(driver).click_and_hold(knob).perform()

发现拼图还是特么的被妖怪吃了

有个叫匀速直线运动的东西

什么 加速度

什么 v = v0 + at

什么 s = ½at²

什么鬼

回到正题

我们可以使用它来构造一个运动路径

该加速时加速

该减速的时候减速

这样的话就更像人类在滑动滑块了

这次

我们使用这个轨迹来滑动

knob = WAIT.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show")))

好了好了

我们再来运行一下吧

哈哈哈

成功识别了

当然了

成功率不是 100%

可以多调戏它几次

以上就是识别滑动验证码的具体过程了

对于其它大部分的滑动验证码

也是可以使用这招搞定的

最后如果你依然在编程的世界里迷茫，不知道自己的未来规划，对python感兴趣，小编为初学者们准备的python入门教程！

请私信回复：“学习”就可以拿到一份我为大家准备的Python学习资料！希望能帮助你更了解python，学习python。

完整代码：