、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 = ?at2

什么鬼

回到正題

我們可以使用它來構造一個運動路徑

該加速時加速

該減速的時候減速

這樣的話就更像人類在滑動滑塊了

這次

我們使用這個軌跡來滑動

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。

完整代碼：