從零開始學 Web 之 移動Web（八）Less

在這裡我會從 web 前端零基礎開始，一步步學習 web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 web 前端學習的探索之旅吧！

less 是一種動態的樣式表語言，通過簡潔明瞭的語法定義，使編寫 css 的工作變得非常簡單，本質上，less 包含一套自定義的語法及乙個解析器。

2、安裝完成後驗證 node 環境是否安裝成功。

在命令列中輸入：node -v出現 node 的版本號表示安裝成功。

3、安裝 less 工具（需要聯網）。

4、安裝後驗證 less 是否安裝成功。

命令列輸入：lessc -v出現 less 版本號，即表示安裝成功。

瀏覽器只能識別 css，less 只是用來提公升css可維護性的乙個工具，所最終需要將less編譯成css。

編譯方式有兩種：

1、一種是使用命令列的方式手工編譯。

在我們編寫好乙個 less 檔案後，可以使用命令列輸入以下指令將 less 檔案編譯成 css 檔案。

lessc .\test.less .\test.css

2、這裡我使用 vscode，使用很簡單，只需要安裝外掛程式 「easy less」 ，那麼編寫的 less 檔案在儲存時會自動在 less 檔案相同的目錄下生成 css 檔案。

注釋的方式有兩種：//或者/**/。

但是這兩種注釋有區別：這兩種樣式在 less 中都是注釋，但是//注釋不會進行編譯，也就是不會在生成的 css 檔案中顯示，而/**/注釋則會在 css 檔案中對應顯示。

/*注釋  才會編譯*/

//這也是樣式，但是不會進行編譯

/*變數  @變數名:值; */

@basecolor:#e92322;
a

/*混入:可以將乙個定義好的樣式引入到另外乙個樣式中  類似於函式的呼叫*/

/*.addradius*/
/*相當於定義乙個函式的引數*/
.addradius(@r:10px)
div

/* 以前我們寫的樣式

.jd_header{}
.jd_header > div{}
.jd_header > div > h3{}
.jd_header > div > h3::before{}
.jd_header > div > a{}
.jd_header > div > a:hover{}
*//*巢狀:實現選擇器的繼承，可以減少**量，同時使用**結構更加清晰*/
.jd_header
width: 100%;
// div下面的直接子元素a
>a
}> h3
ul}}

當然可以。

語法：

只是引入 less 檔案是不可以的，還需要引入解析 less 的 js 外掛程式。

好處是：不管有多少 less 檔案，只需要引入乙個 less 檔案就可以了，其他需要的 less 檔案都包含在引入的這個 less 檔案中。

如何在 less 檔案中引入其他 less 檔案呢？

語法：

@import "other1.less";  // other.less 為其他 less 檔案的路徑名稱

@import "other2.less";
@import "other3.less";

從零開始學 Web 之 DOM（四）節點

頁面中的所有內容，包括標籤，屬性，文字 文字，空格，回車，換行等 也就是說頁面的所有內容都可以叫做節點。標籤節點 比如 div 標籤，p 標籤等。屬性節點 比如 class，value 等。文字節點 比如閉合標籤中的文字內容。nodetype 節點的型別，它的值有 1,2,3 三種。標籤節點 值為 ...

從零開始學習web前端開發

之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...

從零開始學jQuery Validate 之01

jquery validate 外掛程式為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛程式 了一套有用的驗證方法，包括 url 和電子郵件驗證，同時提供了乙個用來編寫使用者自定義方法的 api。所有的 方法預設使用英語作為錯誤資訊，且已...