必須在某些網站上遇到過帶襯紙效果的文字。襯里紙是一種流行的背景效果，我們將在這篇文章中使用CSS創建。這種效果的一個例子如下所示。

您可以使用統治紙張的圖像而不是使用CSS創建這些行，但這不是一個好的選擇，因為使用更多圖像將占用更多的服務器空間并增加網頁的加載時間。因此，如果您可以通過編碼執行相同的任務，最好不要使用圖像。

結構

HTML包含一個 帶有id 紙的 div ，它將成為我們的筆記本紙。在它里面，還有另一個 帶有id 模式的div ，它將包含紙張中的所有行。在這個 div中，還有另一個 帶有id 內容的div， 其中包含要寫在紙上的文本。

HTML

<div id="paper">
 <div id="pattern">
 <div id="content">
 Dear Diary ... Clifton Hill. 
 </div>
 </div>
</div>

造型

我們將主要設計四個部分 - 紙張，左邊是紅色的垂直線，藍色的水平線和文字。所以讓我們開始吧。

步驟1

為紙張指定寬度，高度，背景顏色和 框陰影。盒子陰影會使它看起來更高。

要使紙張水平居中對齊，請將其左右邊距設置為 auto。

CSS

#paper {
 width: 600px;
 height: 700px;
 margin: 20px auto;
 background-color: white;
 box-shadow: 0px 0px 5px 0px #888;
}

第2步

左側的右側垂直線是通過將 ::before 選擇器應用于 帶有id 紙張的 div來 給出的。其寬度設置為 2 px ，高度設置為其父級的高度的100％。使用該background-color 屬性賦予顏色 。

CSS

#paper::before {
 content: '';
 width: 2px;
 height: 100%;
 background-color: rgba(255,0,0,0.6);
}

通過給出位置：相 對于 #paper 和 position：absolute 到 #paper :: before 然后指定頂部和左側位置，相對于紙張 定位。

CSS

#paper {
 position: relative;
}
#paper::before {
 position: absolute;
 top: 0;
 left: 40px;
}

第3步

使用repeating-linear-gradient 函數創建水平線 。所述 的div id為 圖案 中給出 的重復線性梯度（白色0像素，白色24像素，25像素TEAL） 這產生25像素高度的重復圖案（具有白色24像素的高度和藍色1米像素高度）。

具有id 模式的div的高度 設置為其父（紙）的高度的100％。 帶有 內存紙的 div具有 頂部和底部填充，以便在紙張的上方和下方有一些空白空間。

CSS

#paper {
 padding-top: 40px;
 padding-bottom: 40px;
}
#pattern {
 height: 100%;
 background-image: repeating-linear-gradient(white 0px, white 24px, teal 25px);
}

第4步

設置內容樣式并將line-height 值設置為 等于兩條水平線之間的高度。

CSS

#content {
 padding-top: 6px;
 padding-left: 56px;
 padding-right: 16px;
 line-height: 25px;
 font-family: 'Dancing Script', cursive;
 font-size: 19px;
 letter-spacing: 1px;
 word-spacing: 5px;
}

歡迎大家在留言區進行討論。整理不易，請大家多多收藏關注支持我，謝謝。

網頁下載下來使用，在日常工作中使用頻率還是很高的，有時候確實能解一時之急，我自己就有很窘迫的經歷。

我開會的時候，都會把準備好的文檔存在局域網，到會議室直接打開就能直接用了。有一次到分公司，由于分公司剛剛成立，內網還沒有和母公司連通。結果這下子懵逼了，上不去內網，看不到文檔。又是叫同事發過來，又是提發送文件的安全申請，讓人著急。

如果把網站保存下來，放在自己的電腦中，既不用擔心信息泄露問題，又不用為了看不了文檔而著急。

遇到問題，記錄下來，然后解決問題，程序員的解決思路永遠是自己創造輪子的，接下來就是不斷的探索解決方案。

其實下載網頁的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實現。使用這種方法，Chrome會把整個網站，按照編譯完成的源碼目錄結構保存下來。像下面這樣：

下載完成的文件直接點擊 xxx.html 可以直接離線訪問，但是這種方式對目錄的依賴結構比較高，怎么理解呢？就是 html 文件和對應文件名的文件夾必須在同一個目錄中，才能正常使用。拷貝到其他機器的時候必須要兩個同時拷貝才可以，否則就會排版錯亂。

如果有十個或者更多的網頁需要拷貝或者刪除，就會很麻煩，例如我想在其中找到其中幾個，復制到其他地方，很容易弄錯順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內容，不包含二進制內容，舉個例子：打印出的A4紙，只有文字沒有圖片。而 HTML 想要顯示照片等二進制信息，通常都會鏈接到其他文件，也就是上面文件夾里面的內容。

不過 Chrome 下載文件這種方式也有優點，下載下來的文件可以保持獨立性，比如說，我需要這個網頁中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網頁的時候，會把網頁轉成 PDF ，然后在進行打印。那么就給我們提供了很明確的思路，把網頁直接保存為 PDF ，這樣保存下來的網頁就只有一個文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標打印機選擇 另存為 PDF 。

這個功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點，由于 PDF 是靜態文檔，網頁上的一些動畫可能不會正常顯示，而且排版也有可能會錯亂，這完全靠運氣。個人覺得這不是一種很靠譜的方法。

這時候主角來了！有一個工具既可以把網頁保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒有編譯為可執行文件，我把它編譯了一下，下面會放上來鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡單說說使用方法：如果你下載我的鏈接，那么里面有三個文件：

第一個是Mac平臺編譯出來的，使用方式為：

./monolith 網站地址 > xxx.html

默認情況下 monolith 會把生成的 html 輸出到標準輸出流，也就是當前終端。使用 > 我們把輸出的內容重定向并覆蓋到文件。

執行完成之后，在這個目錄下面就會有一個對應的文件：xxx.html 。

另外兩個是 Windows 平臺使用的。為了簡化使用，我寫了一個 CMD 腳本。直接點擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會發現只有一個 html 文件。我們打開之后，發現圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說過，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進制信息變成成純文本。這在使用 Json 傳遞數據的今天十分常見，它可以減少一次請求（題外話），這里就是用的這個原理。monolith 把圖片等二進制內容轉為了純文本，保存在 HTML 文件中。我們在下載的文件源碼可以看到：

對比源代碼，src 信息已經變成了 base64 格式的圖片，就是那串亂碼。復制那串亂碼，從網上搜一個 base64 轉圖片工具，粘貼進去，這時會發現就是我們看到的那張圖片。這樣一來，無論這個網站上有多少個文件，都會保存到一個 HTML 文件里面，而且還能離線使用。

當然，base64 編碼的圖片比原生圖片略大，這可能也是你現在在擔心的問題。不過 monolith 會特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網頁都進行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會比 Chrome 直接下載小一倍還多！

最后要說的是局限性，無論那種方法，都幾乎不能把視頻網站中的視頻下載下來。因為現在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請求信息也無法下載。

比如你可以試試下載其他網站的首頁，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個領域的事情了，以后有機會說給大家聽。

如果這篇文章對您或者您的朋友有幫助，感謝您關注，轉發。