下來(lái)我們來(lái)一步一步的把程序給寫(xiě)出來(lái)。在這里，這是我們要做的東西。

·首先先這樣子，先把請(qǐng)出坤拳還有標(biāo)題搞出來(lái)。這個(gè)標(biāo)題我相信大家應(yīng)該都會(huì)了，是不是在head這里加個(gè)title？坤拳，保存，坤拳有了。

·接下來(lái)就是這樣四個(gè)字：請(qǐng)出坤拳。怎么寫(xiě)？是不是這樣子？把這個(gè)東西刪掉，請(qǐng)出坤拳，保存。請(qǐng)出坤拳這幾個(gè)字就這么出來(lái)了。但是這只是毛胚，這個(gè)才是精裝。所以大家應(yīng)該會(huì)想到什么東西能把毛坯房變成精裝房？是不是CSS？所以我們得寫(xiě)CSS代碼，把這個(gè)玩意包裝成這個(gè)玩意。

所以問(wèn)題來(lái)了，CSS代碼應(yīng)該寫(xiě)在哪？是寫(xiě)在head里面還是寫(xiě)在body里面？前面我也提到過(guò)，這個(gè)區(qū)域里面顯示什么東西是跟body有關(guān)的？這個(gè)頁(yè)面的一些設(shè)置、配置是跟head有關(guān)的。body里面的內(nèi)容套上什么樣的皮膚是不是跟設(shè)置有關(guān)？所以CSS的代碼應(yīng)該是寫(xiě)在head里面。

而且CSS也對(duì)應(yīng)了一種元素叫style，這個(gè)就言簡(jiǎn)意賅了，風(fēng)格。風(fēng)格就是這個(gè)東西到底長(zhǎng)什么樣子？所以這里就是寫(xiě)CSS代碼的地方。

·在寫(xiě)CSS代碼之前先得明白一個(gè)概念，就是什么叫CSS選擇器。其實(shí)這個(gè)概念還是挺好理解的，CSS的工作原理其實(shí)就是根據(jù)一些條件篩選出哪些元素需要裝修，要裝修成什么樣子。

就比如現(xiàn)在請(qǐng)出坤拳屬于哪個(gè)元素的？是不是屬于body的？所以這里就可以這么寫(xiě)：body，這是元素的名字，然后一對(duì)花括號(hào)。這段的意思就是說(shuō)：接下來(lái)要給body里面的東西去做裝修了，至于裝修成什么樣是大括號(hào)里寫(xiě)的代碼所決定的。這里的代碼一般都是左邊是屬性的名字，一個(gè)冒號(hào)，右邊是屬性的值。

比如請(qǐng)出坤拳是黃色的，自然而然的應(yīng)該是能想到屬性叫color，所以color自動(dòng)的補(bǔ)了個(gè)冒號(hào)，冒號(hào)左邊是屬性的名字，冒號(hào)的右邊就是屬性的值，比如yellow，黃色，已經(jīng)保存了，切過(guò)來(lái)看是不是黃色，再改一下red紅的，green綠的，怎么樣？是不是言簡(jiǎn)意賅？

大括號(hào)外面這一坨表示要開(kāi)始裝修了，里面表示要把這個(gè)東西裝修成什么樣子，再改回來(lái)yellow，這個(gè)顏色就比較像了，縮回100%，縮放就是按住Ctrl鍵，鼠標(biāo)滾輪滾來(lái)滾去就可以了。雖然已經(jīng)變成黃色了，但是字還是太小了，所以肯定是要設(shè)置一下字的大小，這個(gè)也簡(jiǎn)單，font這里聯(lián)想出來(lái)了size，這個(gè)就是字體的大小。

字體的大小的單位其實(shí)有很多種，有多少個(gè)像素，有多少英尺，有多少厘米等等，有很多五花八門(mén)的，是入門(mén)教程，所以以像素為例，像素是比較好理解的一個(gè)東西，比如來(lái)個(gè)50像素就是50PX，再來(lái)看一下，現(xiàn)在縮放是100%的，這個(gè)字是不是變大了？這個(gè)字是不是得居中？所以可以再加一個(gè)屬性就是text-align，文本對(duì)齊，對(duì)齊這里有什么？有居中，有左邊有右邊，肯定選居中保存，是不是過(guò)來(lái)了？雖然現(xiàn)在居中了，但是跟這邊還是有一些區(qū)別，比如這里面請(qǐng)出坤拳是偏下一點(diǎn)點(diǎn)的，這個(gè)是偏上的。其實(shí)改這個(gè)就可以順勢(shì)引出盒子模型了。盒子模型我準(zhǔn)備是下面這一集視頻再細(xì)聊，所以這個(gè)問(wèn)題先放著不管。

·還有個(gè)問(wèn)題就是背景色應(yīng)該是黑的，但是這里是白的，怎么把背景色從白色改成黑色？其實(shí)很簡(jiǎn)單，按下F12把這個(gè)東西打開(kāi)，打開(kāi)之后這里有個(gè)小圖標(biāo)，點(diǎn)一下變成藍(lán)色或者不是灰色的狀態(tài)，就是表示激活了。

激活了之后把這個(gè)東西挪過(guò)來(lái)，挪過(guò)來(lái)之后會(huì)發(fā)現(xiàn)什么？當(dāng)鼠標(biāo)指向請(qǐng)出坤拳這段文本的之后，下面這里是不是顯示了一個(gè)body？這個(gè)就說(shuō)明整個(gè)淺藍(lán)色區(qū)域都屬于body。既然屬于body，是不是可以這樣子在這里去對(duì)body的背景顏色做個(gè)修改？所以來(lái)修改背景顏色，背景顏色就是background color，這里下面就直接有black，回車(chē)保存，是不是變黑了？

迎來(lái)到svg編輯器新品發(fā)布會(huì)，我是本次大會(huì)的主持人三兒。（有沒(méi)有一種打開(kāi)蘋(píng)果新品發(fā)布會(huì)推文的錯(cuò)覺(jué) ）[狗頭]

首先要向大家隆重宣布，吊足大家胃口胖友們期待已久的svg編輯器正式上線啦！

我們的svg編輯器有非常多熱門(mén)、有趣、創(chuàng)意十足的svg效果，比如橫版無(wú)縫拼接視頻、音頻海報(bào)、小程序無(wú)角標(biāo)、gif圖跟隨閱讀播放等。

不用代碼，不用花費(fèi)高額的價(jià)錢(qián)定制，自己就可以DIY和其它知名品牌一樣的svg效果，是不是有億點(diǎn)點(diǎn)心動(dòng)！

那在正式開(kāi)始使用之前，三兒給胖友們整理了一份svg編輯器使用手冊(cè)，并附上了全面的功能解析，幫助胖友們快速上手，強(qiáng)烈建議大家收藏！

01 如何進(jìn)入svg編輯器

—通過(guò)135編輯器進(jìn)入

進(jìn)入135編輯器后，在左側(cè)工具欄找到『svg編輯器』，點(diǎn)擊進(jìn)入即可。

—直接輸入網(wǎng)址

胖友們也可以直接在瀏覽器粘貼網(wǎng)址進(jìn)入，svg編輯器網(wǎng)址為：

https://www.135editor.com/svgeditor/

02 整體界面展示

Svg編輯器界面主要分為 4 個(gè)部分：左側(cè)效果選擇區(qū)、上方工具欄、右側(cè)效果設(shè)置區(qū)以及中間的效果編輯區(qū)。

—左側(cè)效果選擇區(qū)

左側(cè)效果選擇區(qū)域主要是編輯器效果的展示，你可以在素材、組合或是樣式里選擇你喜歡的svg效果進(jìn)行編輯。

—上方工具欄

上方工具欄則是一些簡(jiǎn)單的編輯操作，共有10個(gè)功能。包括上移/下移、間距、刪除、新建、保存、同步、導(dǎo)出、預(yù)覽、個(gè)人中心。

—右側(cè)效果設(shè)置區(qū)

作品效果的修改都在右側(cè)區(qū)域完成，該區(qū)域主要分為 2 個(gè)部分，一是編輯，二是教程。

—中間效果編輯區(qū)

中間的效果編輯區(qū)是對(duì)整個(gè)作品的展示，不僅可以及時(shí)看到作品的展示效果，還可以對(duì)不同區(qū)塊進(jìn)行上移/下移、間距、刪除等操作，使作品的整體搭配更加協(xié)調(diào)、美觀。

03 核心功能介紹

—素材/組合效果，可自定義程度高

相比單個(gè)的svg樣式，素材的靈活度更高、可搭配性強(qiáng)，多種素材可自由組合。

目前的素材分類(lèi)有無(wú)縫圖、點(diǎn)擊、滑動(dòng)、長(zhǎng)按、圖片輪播、超鏈接、小程序、音頻、視頻、點(diǎn)A見(jiàn)B、百葉窗、淘口令等，每一個(gè)大分類(lèi)下又有多種不同效果選擇，比如視頻這個(gè)分類(lèi)之下又有無(wú)縫拼接視頻和橫屏無(wú)縫拼接視頻兩種效果。

除了素材效果以外，svg編輯器還為大家準(zhǔn)備好了 4 種圖文展開(kāi)的效果，分別是點(diǎn)擊直接展開(kāi)-自定義觸發(fā)、點(diǎn)擊換圖展開(kāi)-自定義觸發(fā)、自動(dòng)換圖展開(kāi)-自定義觸發(fā)、點(diǎn)擊縮回再展開(kāi)-自定義觸發(fā)，如果自己在效果組合上還不太拿手，可以嘗試使用組合素材。

—教程引導(dǎo)/案例展示，更好地引導(dǎo)使用

素材和組合的每一種效果都附有使用教程，鼠標(biāo)懸浮于效果右上方的問(wèn)號(hào)按鈕處，會(huì)彈出該樣式的id、教程及展示效果案例，掃碼可查看案例效果。

—『間距』新功能，作品展現(xiàn)更美觀

間距功能屬于一個(gè)新的編輯功能。使用方法：在編輯區(qū)域選中某個(gè)樣式區(qū)塊，點(diǎn)擊上方菜單欄的間距，可調(diào)整選中該區(qū)塊內(nèi)外邊距的距離。

內(nèi)邊距為該素材在紅色框線內(nèi)的位置，外邊距為該區(qū)塊和上下區(qū)塊之間以及兩側(cè)邊距的距離。

—同步/導(dǎo)出代碼，怎么方便怎么來(lái)

編輯好的文章可以通過(guò)兩種方式復(fù)制到微信公眾號(hào)后臺(tái)，一是同步到微信公眾號(hào)，二是復(fù)制代碼。

同步：點(diǎn)擊上方菜單欄同步，在彈出菜單欄中根據(jù)提示填寫(xiě)相關(guān)內(nèi)容即可。授權(quán)公眾號(hào)的方法和135編輯器授權(quán)同步一致（點(diǎn)我查看如何授權(quán)公眾號(hào)）

導(dǎo)出：制作完成的svg作品代碼可以復(fù)制，復(fù)制的代碼可以直接粘貼到135編輯器使用（點(diǎn)擊html進(jìn)入代碼模式，粘貼代碼即可），也可以在微信后臺(tái)保存使用（點(diǎn)我查看如何復(fù)制代碼到微信公眾號(hào)后臺(tái)）

—按引導(dǎo)編輯效果，操作更加簡(jiǎn)化

三兒必須要吹爆這個(gè)功能，以往在135編輯器需要通過(guò)動(dòng)畫(huà)功能或代碼才能完成對(duì)svg樣式的修改，但在svg編輯器，只需要在右側(cè)的效果設(shè)置區(qū)根據(jù)提示修改效果即可。

以超鏈接-無(wú)角標(biāo)素材為例，右側(cè)需要修改的地方分別為添加封面圖、添加跳轉(zhuǎn)網(wǎng)頁(yè)鏈接，根據(jù)提示上傳圖片及鏈接即可，操作可以說(shuō)是非常簡(jiǎn)單了。

—圖片可直接拖動(dòng)，方便快捷

如圖，該功能可以實(shí)現(xiàn)直接從左側(cè)上傳里拖動(dòng)圖片到右側(cè)效果設(shè)置區(qū)替換圖片，無(wú)需重復(fù)上傳，一步到位。

04 和135使用上的區(qū)別

—效果可實(shí)現(xiàn)性更高

以往我們使用135編輯器時(shí)，習(xí)慣于查找svg樣式，但相對(duì)135編輯器的svg樣式來(lái)說(shuō)，svg編輯器內(nèi)的素材和組合效果是一種升級(jí)和增強(qiáng)，很多樣式實(shí)現(xiàn)不了的效果在素材和組合里會(huì)現(xiàn)。

—效果可自定義性更強(qiáng)

通常來(lái)說(shuō)，135編輯器內(nèi)的svg樣式是有一定限制的。以輪播圖片樣式為例，該樣式在135內(nèi)限制了圖片的數(shù)量，即使是通過(guò)代碼也無(wú)法增加，而在svg編輯器的素材效果里，圖片數(shù)量可以在右側(cè)的效果設(shè)置區(qū)域直接增加，無(wú)需代碼操作。

因此，svg編輯器素材和組合效果靈活度更高，可自定義性強(qiáng)。

[鼓掌][鼓掌][鼓掌]

Svg編輯器上線初期

請(qǐng)大家多多關(guān)照

有什么建議都可以在留言中告訴三兒！