使用HTML在線編輯器在iPad上寫出精美網(wǎng)頁(yè)
那天嘗試使用Lightly的HTML在線編輯器在iPad上編程，效果實(shí)在太驚艷啦！從導(dǎo)入素材到預(yù)覽網(wǎng)頁(yè)效果，我從來沒想過在iPad上居然還可以文本高亮和自動(dòng)填充，編程體驗(yàn)已經(jīng)完全可以媲美電腦了。
在這篇教程中，我們主要在iPad上演示HTML在線編輯器的效果，大家可以根據(jù)自己的喜好隨意選擇其他平板或筆記本電腦作為編程設(shè)備哦！
教程素材和源代碼傳送門：https://03c306cbfb-share.lightly.teamcode.com
先來看看網(wǎng)頁(yè)的預(yù)期效果：
打開Lightly的HTML在線編輯器后，我們可以在項(xiàng)目面板上新建HTML項(xiàng)目，然后再?gòu)淖髠?cè)項(xiàng)目欄中上傳所需要的素材。直接使用素材和代碼包打開項(xiàng)目快照的小伙伴，也可以點(diǎn)擊“復(fù)制項(xiàng)目”把整個(gè)項(xiàng)目的所有內(nèi)容復(fù)制到自己的項(xiàng)目面板中。
如果是直接新建空白項(xiàng)目的小伙伴，大家打開項(xiàng)目后會(huì)發(fā)現(xiàn)里面已經(jīng)內(nèi)置了 Hello World 的基礎(chǔ)模板。點(diǎn)開 HTML 文件后，可以直接在 IDE 內(nèi)的屏幕右側(cè)預(yù)覽網(wǎng)頁(yè)效果，在 iPad 中也可以直接上傳設(shè)備中的文件。
由于網(wǎng)頁(yè)頁(yè)面其實(shí)很簡(jiǎn)潔，HTML 文件其實(shí)很簡(jiǎn)單，我們只需要專注 <body> 標(biāo)簽的部分就可以了。我們這次做的首頁(yè)可以分為兩個(gè)部分：頂端的導(dǎo)航欄和首頁(yè)內(nèi)容。
導(dǎo)航欄部分
我們繼續(xù)把導(dǎo)航欄的內(nèi)容細(xì)化，放到 <div> 標(biāo)簽分類標(biāo)簽里。<div> 的英語全稱是 division，即分區(qū)。我們可以通過 class 來給分區(qū)命名，然后在 CSS 中調(diào)整參數(shù)。
在導(dǎo)航欄中，我們分別放入網(wǎng)頁(yè) LOGO、導(dǎo)航鏈接文本和購(gòu)物車圖標(biāo)。其中，<nav> 標(biāo)簽即導(dǎo)航欄標(biāo)簽，我們可以在里面設(shè)置清單和鏈接文本。
在 Lightly 中，我們只需要打出部分關(guān)鍵字，就可以使用 Tab 來自動(dòng)填充代碼。在 iPad 上也可以哦！
完成 HTML 的部分后，我們轉(zhuǎn)到 CSS 文件調(diào)整頁(yè)面的元素。這時(shí)候，我們剛才所使用的 div 分類名稱就能派上用場(chǎng)了。
在 CSS 文件中，我們根據(jù)剛剛的分類調(diào)整各個(gè)參數(shù)。CSS 中的參數(shù)種類很多，大家可以根據(jù)自己的想法逐一進(jìn)行調(diào)整，試驗(yàn)每一種參數(shù)的不同效果：查看 CSS 文檔。
內(nèi)容部分
內(nèi)容這里主要也分成兩個(gè)大部分，一個(gè)是文字文本、一個(gè)是圖像。文本照例新建一個(gè) div 并命名，方便之后在 CSS 中調(diào)整參數(shù)：
在這個(gè)部分中，我們添加了按鈕、標(biāo)題、文本內(nèi)容和另外兩個(gè)按鈕。完成后，我們繼續(xù)回到 CSS 中調(diào)整參數(shù)和設(shè)計(jì)。
最后，大圖像直接使用 <img> 標(biāo)簽導(dǎo)入即可：<img src="asset/img.png" alt="" class="feature-img">
再次切換到 HTML 文件中，點(diǎn)擊運(yùn)行就可以預(yù)覽項(xiàng)目文件效果了！
Lightly HTML在線編輯器由TeamCode研發(fā)。TeamCode專注于云原生協(xié)作開發(fā)領(lǐng)域，簡(jiǎn)化開發(fā)流程，幫助開發(fā)者與企業(yè)高效協(xié)作開發(fā)。
