SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級聯樣式表”，CSS盒子模型是在網頁設計中用到的CSS技術中引用的一種思維模型。CSS盒子模型由內容區、填充、邊框、空白邊組成。

CSS盒子模型常見用途

由于CSS盒子模型是CSS中的一個重要概念，每一個元素都可以當作一個矩形的盒子，這個矩形盒子可以描述元素所占空間內容。CSS盒子模型更方便了設計者對網頁設計的整體把控。

CSS盒子模型繪制方法

用億圖圖示繪制CSS盒子模型十分簡單，只需要找到指定模板即可，新手參考以下幾個步驟即可完成CSS盒子模型的繪制。

第一步：下載“億圖圖示”軟件，啟動軟件界面，登錄賬號開始操作。

第二步：點擊搜索框輸入“CSS盒子模型”，尋找符合設計要求的CSS盒子模型模板，點擊“使用”打開CSS盒子模型模板。

第三步：點擊操作區的CSS盒子模型，根據自己的需要，在模板上修改各層次的注釋，在上方操作區更改字體為黑體，并更改字體大小。

第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側填充可以修改填充色、邊框顏色。

第五步：完成CSS盒子模型制作之后，點擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數之后，CSS盒子模型就可以存儲在電腦中。

以上就是CSS盒子模型繪制方法的相關介紹。

CSS盒子模型繪制軟件——億圖圖示

當有繪制CSS盒子模型的需求時，選擇億圖圖示這款國產矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設計開發，在滿足了用戶基本的繪圖需求基礎上，開發了模板套用功能，讓繪圖的效率提高許多，同時，在云存儲的加持下，億圖圖示用戶可以隨時隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個模板，在原有基礎上修改、添加需要的元素，提升繪圖效率。

為什么選擇億圖圖示繪制CSS盒子模型？

1、可靠軟件，值得信賴：億圖圖示經過了九個大版本的升級，軟件可靠程度大幅增加，現在已經擁有超過900萬用戶，龐大的使用群體是億圖圖示經受住市場優勝劣汰的體現。
2、軟件資源庫強大，滿足繪圖需求：億圖圖示擁有數量龐大的矢量符號庫和模板庫，當用戶繪圖時可以很輕松的找到自己需要的符號，即使符號很特殊在庫中找不到，用戶也可以自行繪制或者導入本地符號圖形、從庫外調用。
3、先用后付，性價比高：億圖圖示為新用戶謀福利，凡是新注冊的億圖圖示賬戶，均可長期使用免費基礎版本。當有高級需求的時候，可以再升級購買會員版。

們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。

其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。

我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。

我們來看一下代碼和結果：

作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]

天講講如何用word Press 和 mailchimp 創建萊斯下面的這樣的 landing page ：

我認為大多數賣家有自己的獨立站或者 Shopify 做了獨立站，有時候我們需要通過折扣【大額度】折扣來收取潛在消費者的郵件信息 ，你想要得到別人的信息 ，你肯定用一個人家感興趣的或者覺得值得對等交換的東西作為誘餌去獲取該信息。

如果你真的有wordPress 獨立站，你可以用以下方式去制作簡單的某個產品的landing page。

第一登陸你的賬號 ，打開 dashboard 點擊新建頁面

我建議你們用 Elementor 插件 ，編輯頁面非常方便，如下圖所示 ，可在安裝插件區域搜索 Elementor 然后免費安裝

第二步：假如說我們是賣這個中coffe mug 我們打算做一個 70%的giveaway，如下圖所示

我們在標題里面 輸入coffee mug 70% OFF code 填寫進去 ，同時我們不想讓進去這個page 的人看到我們網站的其他信息 ，不要讓他瀏覽其他頁面，如果你這個wordpress 做的獨立站和你的這個產品不相關的情況下 你可以選擇1，2 圖里的紅框 ，并且隱藏header 和footer信息 ：如下圖

第三步：繼續點擊 【使用Elemntor 編輯】 繼續前往，進入這個頁面，相當于空白的一個頁面

第四步：你在這個里面就可以 拽進來 ，調整大小字體的形式，可以自由發揮了 ，非常簡單 ，我們現在第一步需要Title ，image 以及 Text 內容拽進來，一個個設置就好了，看下面圖 ：

至于下面的 subscribe to our email list 這個怎么插入 其實非常簡單，你先到你的 mailchimp 頁面點擊list，如下圖所示

你進入下面一頁 你會看到這幾個選項 ，如下圖所示

繼續點擊去之后你進入這個一個頁面，你復制所有的HTML code 在紅色方框里的code 都復制下來

你把code 復制下來之后 回到wordpress 的剛才的 elemntor 編輯的頁面 ，找到這個圖標 拽進來

然后再進入這里，把剛才從mailchimp 復制出來的code 粘貼在這個里面

最后呈現出這種效果 請看下面的圖

一定記得點擊【更新】，然后最后 這個頁面的鏈接打開的時候怎么設置突然蹦出來的 要求填寫郵件的這種效果呢？

這個需要你在wordpress 的 header或者footer 上面填寫mailchimp 代碼 ，請看下面的圖 ，你找到 wordepress 儀表盤，找到這里之后點擊去：

然后把代碼從mailchimp 拿出來 再填寫到這個位置 ，如下圖所示

最后呈現出來的效果是這樣的 ，你打開鏈接：http://bit.ly/2FFDfOv 之后手機上看到的是這樣的 畫面 ，先是這個跳出來的 填寫email的頁面

然后你要是不想輸進去 進入點擊 右上方【X】頁面會顯示下方這個 ，如圖所示

為了得到 這個code 還是照樣給郵件的，我們拿這個郵件干嘛，可以和他們郵件里交流能不能幫我們測評，這個總比在facebook上找人，找出來的人更精準，畢竟這些給你郵件的真的想這個產品。

（來源：跨境電商策）

以上內容屬作者個人觀點，不代表雨果網立場！本文經原作者授權轉載，轉載需經原作者授權同意。

上雨果網搜索“跨境資料庫”,領取歐美/東南亞各國市場商機、各大平臺熱銷品報告、跨境電商營銷白皮書！