碼如下：

import requests
from bs4 import BeautifulSoup
import pandas as pd
#下面是請求數據
url="https://www.163.com/" #設置請求網址為搜索網址
response=requests.get(url) #對163網站就行get請求并將請求結果賦值給response
response.encoding="GBK" #設置編碼為GBK格式的
html=response.text #獲取網頁的html源代碼并賦值給html
#下面是解析數據
soup=BeautifulSoup(html)
content=soup.findAll('div') #查找所有的div標簽內容并賦值給content
print(content) #打印content

代碼運行結果如下圖所示：

avascript使用document.getElementById操作div

javascript中經常會操作div，大家在網上看到的各種酷炫的前端效果，很多都是通過操作div來實現的，下面通過實例代碼和注釋來講解：

言

在很多web或者app頁面中，我們可以看到各種各樣的輸入框，從外觀上看它們可以直觀的看做是input元素，但是實際上并非如此。我們可以通過別的標簽去模擬input標簽的效果，今天我們就來看看如何使用div標簽模擬input標簽的效果。

div+css

頁面效果

這里我們用ofo的主頁面作為例子，在點擊下面數字的時候，數字的內容會出現在輸入框內，這個輸入框就是用div模擬實現的。

當然頁面內容是靜態的，只是一個簡單的html，我們來看下實現后的效果。如果感興趣的可以直接去github上去看看，源碼地址：

https://github.com/zhouxiongking/article-pages/tree/master/articles/divToInput

實現效果

顯示框

這里我們定義一個顯示內容的div來模擬input，其css樣式如下。

css樣式

:before

我們使用:before偽元素來裝載輸入的內容，在:before元素中使用content屬性來動態的元素的屬性值。

使用:before偽元素

閃爍動作

在input標簽中，如果input元素獲取焦點后，在input元素內會有光標在閃爍，這個效果我們可以通過:after偽元素來實現。

我們會用到動畫animation的知識，首先定義一個動畫效果，利用opacity屬性來控制顯示與不顯示，從而造成閃爍效果。

定義閃爍動作

然后在:after偽元素中使用。

:after偽元素

Javascript控制輸入

在設置好div效果后，需要在點擊下面的數字時，將值顯示在div中，這就需要用到Javascript去控制。

首先獲取頁面上所有存在動作的元素。

獲取元素

然后給數字和刪除元素分別添加對應的事件。

元素綁定事件

綁定事件后，在點擊數字時會將值動態的顯示在div中，在刪除時也會相應刪掉最后一個添加的元素值。

頁面設計

對于整個頁面的設計，采用了header，div和footer的布局。

header和div的html部分代碼如下。

header與div

相應的footer部分代碼如下，其主要采用的是table布局，相對簡單實用。

footer部分

至此，整個頁面的實現就講解完畢了，中間有很多的css樣式部分我并沒有放出來，感興趣的可以自行去github上clone下來看看。

總結

今天這篇文章主要以ofo主頁面實現來講解了一下如何使用div來模擬input的效果，你有收獲嗎