如何自定義html模板所以你買了一個(gè)html模板，現(xiàn)在你可以把它放在網(wǎng)上，然后你想自定義它，但你不熟悉的代碼，你不知道怎么做。好吧，請(qǐng)放心，因?yàn)樵诒窘坛讨校覀儗⒅笇?dǎo)您完成整個(gè)過(guò)程。我們要工作了。你從未見(jiàn)過(guò)一行html假設(shè)，更不用說(shuō)編輯一行了，所以無(wú)論你在代碼中做了多少新工作，你都會(huì)發(fā)現(xiàn)每一步都做了什么。讓我們從頭開(kāi)始。

　　什么是html

　　從技術(shù)上講，這個(gè)問(wèn)題的答案是ldquo超文本標(biāo)記語(yǔ)言rdquo但是，對(duì)于自定義模板，可以將html視為一系列打開(kāi)和關(guān)閉標(biāo)記，例如：

　　標(biāo)簽說(shuō)明lt；和gt；標(biāo)志和標(biāo)簽通常包括/。標(biāo)簽內(nèi)容如下：

　　lt；（然而，有時(shí)前端開(kāi)發(fā)人員有單獨(dú)的標(biāo)簽，沒(méi)有封閉的合作伙伴

　　不同的html標(biāo)簽使不同類型的內(nèi)容出現(xiàn)在網(wǎng)頁(yè)上。上面的例子

　　標(biāo)簽將創(chuàng)建一個(gè)大標(biāo)題，閱讀ldquo約翰史密斯，前端開(kāi)發(fā)；，例如，標(biāo)簽將使圖像文件成為“R”；執(zhí)行JPGrdquo；出現(xiàn)在頁(yè)面上。編輯html模板所需要知道的是，哪些標(biāo)記表示頁(yè)面的一部分，如何更改，如何在代碼中找到它們，以及如何編輯它們以獲得所需內(nèi)容。

　　給自己一個(gè)代碼編輯器是的，在記事本或類似的程序編輯html是完全可能的，但事情會(huì)更好，如果你使用一個(gè)適當(dāng)?shù)拇a編輯應(yīng)用程序。其中一個(gè)主要的原因是，你會(huì)得到你的代碼顏色高亮，你很快就會(huì)看到，這將使它更容易閱讀和編輯。

　　大多數(shù)html模板將在aZIP文件-如果是這樣，提取您的禮物。然后查看模板文件夾，直到找到您的ldquo；指數(shù)htmLrdquo；或ldquo；索引htm報(bào)價(jià)；文件。在我們的例子中，簡(jiǎn)歷模板ldquo；指標(biāo)htmlrdquo；文件在ldquo中；01.htm升網(wǎng)站。現(xiàn)在，在Chrome中打開(kāi)該文件。即使Chrome不是默認(rèn)瀏覽器或**瀏覽器，也請(qǐng)使用它，因?yàn)槲覀兿Ｍ褂靡恍﹥?nèi)置工具幫助您編輯流程。確定要更改的零件。如果這是你**次編輯模板，試著不要參與調(diào)整顏色和布局的想法。你要深入CSS并負(fù)責(zé)頁(yè)面的建模語(yǔ)言。在定制新模板時(shí)，請(qǐng)關(guān)注一件事，這是一個(gè)好主意，html是起點(diǎn)。讓球滾動(dòng)，把你在Chrome和找出哪些寫元素和圖像的頁(yè)面上，你需要改變模板的外觀。如果您愿意，您可以準(zhǔn)備一個(gè)列表，并可以作為編輯器檢查每個(gè)項(xiàng)目。在我們的簡(jiǎn)歷模板的情況下，我們需要改變：牛；公牛的名字；職業(yè)公牛；個(gè)人圖片；社交媒體鏈接；聯(lián)系方式；簡(jiǎn)歷：ldquo；專業(yè)ldquo；工作經(jīng)歷ldquo；技術(shù)；和ldquo；教育；公牛；版權(quán)信息現(xiàn)在我們有一個(gè)變更列表，我們可以在代碼中找到相應(yīng)的html標(biāo)簽。讓我們從我們的名字開(kāi)始。

　　如果找到inspector標(biāo)簽，請(qǐng)右鍵單擊名稱，即ldquo約翰史密斯rdquo；默認(rèn)情況下，選擇“檢查：

　　組應(yīng)在瀏覽器中打開(kāi)它：

　　ldquo; 檢查；面板組向您展示了代碼如何交互。將光標(biāo)懸停在要顯示的行上

　　hellip;

　　（級(jí)別1標(biāo)題選項(xiàng)卡），您應(yīng)該看到屏幕上突出顯示的模板名稱部分才能看到您。通過(guò)將鼠標(biāo)懸停在代碼的不同行上并查看網(wǎng)頁(yè)的照明區(qū)域，此面板可以幫助您找出哪個(gè)代碼對(duì)應(yīng)于哪個(gè)元素。你只是在不同的代碼行中徘徊，直到你找到了光明。

　　現(xiàn)在展開(kāi)H1并單擊小三角形的左側(cè)選項(xiàng)卡。你應(yīng)該看到他們之間是約翰史密斯lt；小型燃?xì)廨啓C(jī)；前端開(kāi)發(fā)；小gt；。

　　這個(gè)措辭和你在屏幕上看到的一致，所以你知道你找到了代碼的正確部分。

　　在html編輯選項(xiàng)卡中，是時(shí)候打開(kāi)HTML文件進(jìn)行編輯了。開(kāi)盤ldquo；索引。在崇高的文本htmlrdquo；文件，您應(yīng)該看到如下內(nèi)容：

　　你想在這里找到你在Chrome檢查器中看到的代碼。滾動(dòng)到第61-64行。

　　現(xiàn)在您可以編輯“內(nèi)容”選項(xiàng)卡來(lái)更改自己的姓名和職業(yè)。一是編輯ldquo約翰史密斯rdquo；您的姓名：

　　然后，在兩者之間；小型燃?xì)廨啓C(jī)；書信電報(bào)；小型燃?xì)廨啓C(jī)；標(biāo)簽，變更ldquo；前端開(kāi)發(fā)；我的事業(yè)。

　　保存文件并刷新模板中的chrome。您應(yīng)該看到您的更改，如下所示：

　　重復(fù)編輯其他內(nèi)容

　　現(xiàn)在您有了基本流程：

　　檢查要更改的內(nèi)容并確定相應(yīng)的標(biāo)記。在HTML文件中找到這些標(biāo)記，修改代碼以適應(yīng)。讓我們重復(fù)此過(guò)程以編輯要自定義的其他內(nèi)容。

　　添加您自己的圖像下一步我們將采取我們自己的形象左邊的姓名和職業(yè)領(lǐng)域。右鍵單擊圖像復(fù)選框并記錄相應(yīng)的標(biāo)簽：

　　您可以看到，在“檢查器”窗口中，這一行直接位于頂部。我們剛剛更改了行：轉(zhuǎn)到您的HTML文件，并在第59行找到標(biāo)簽

　　您需要更改在屬性IMG標(biāo)記中看到的值SRC，該標(biāo)記可以用引號(hào)編輯。您將更改其文件名和自己的圖像方向。

　　抓取一張自己的圖片，大小為150像素x150像素（忽略文件名，比如140x140）png，實(shí)際尺寸為150x150）。

　　把你的形象寫為ldquocontentrdquo；子文件夾；它與您的ldquo在同一文件夾中；索引htmlrdquo；我不確定。

　　現(xiàn)在，在HTML文件中，將值SRC屬性更改為ldquo；140x140.png平方米；文件被添加到ldquocontentrdquo）；子文件夾。請(qǐng)確保檢查您的文件擴(kuò)展名類型是否與一對(duì)文件ldquopngrdquo；/ldquo;JPG參考文獻(xiàn)：保存文件，刷新瀏覽器，您將看到新的照片顯示：

　　編輯社交媒體鏈接現(xiàn)在讓我們編輯模板右上角的社交媒體圖標(biāo)鏈接。和以前一樣，請(qǐng)右鍵單擊圖標(biāo)進(jìn)行檢查。在窗口中，查看上面高亮顯示的行，您將看到它包含文本ldquoFacebookicon；。我們將使用在HTML文件中找到的代碼。

　　回到升華文本，按Ctrl+F，然后運(yùn)行查找ldquoFacebook圖標(biāo)；。你應(yīng)該在75號(hào)線找到。

　　75行中的此標(biāo)記是導(dǎo)致圖標(biāo)鏈接的原因，a href您看到了其中確定的屬性，將繼續(xù)。需要更改為FacebookURL（例如：https：//www.（Facebook.Com/mylink）的值a/h屬性的值。

　　替換為默認(rèn)URL的URL。然后與79號(hào)線谷歌+83號(hào)線、87號(hào)線LinkedIn號(hào)線推特相同。

　　如果有一個(gè)圖標(biāo)要完全刪除，請(qǐng)通過(guò)鏈接打開(kāi)的lt高亮顯示它；一個(gè)燃?xì)廨啓C(jī)；關(guān)閉標(biāo)簽，組織lt；一個(gè)燃?xì)廨啓C(jī)；標(biāo)簽，然后刪除代碼。

　　現(xiàn)在保存并更新您的網(wǎng)站，然后單擊鏈接時(shí)，它們應(yīng)該轉(zhuǎn)到正確的位置。

　　編輯聯(lián)系人信息，然后讓我們更改聯(lián)系人信息右下角的社會(huì)圖標(biāo)。

　　首檢ldquo；電子郵件；，所以我們可以找到這個(gè)代碼開(kāi)始聯(lián)系信息。通過(guò)遍歷強(qiáng)調(diào)代碼描述，然后脫機(jī)，以便在HTML文件中匹配。

　　在升華文本中，按Ctrl+F再次搜索ldquo；電子郵件“或“電子郵件”；。需要找個(gè)例子ldquo；電子郵件；，這是與您在inspector窗口中看到的匹配的代理代碼。

　　你會(huì)在94號(hào)線找到的。突出顯示的默認(rèn)電子郵件地址ldquo；john@sitename.comrdquo; ， 兩個(gè)位置：

　　然后用你自己的電子郵件地址替換它。您也可以在下一行中替換自己的電話號(hào)碼，并替換以下行，您可以替換自己的網(wǎng)站地址：

　　編輯恢復(fù)部分現(xiàn)在讓我們開(kāi)始編輯模板的主簡(jiǎn)歷部分。有幾個(gè)部分，這些部分，所以我們必須首先檢查每個(gè)人，這樣您就知道在代碼中查找什么。這也是一個(gè)機(jī)會(huì)，通過(guò)inspector窗口了解移動(dòng)查找您網(wǎng)站不同部分的更多信息。

　　向下滾動(dòng)至ldquo；專業(yè)概況；在“檢查文本”段上單擊鼠標(biāo)右鍵。

　　在視圖面板中，您將看到它已高亮顯示p標(biāo)簽ndash；此標(biāo)簽負(fù)責(zé)在您的中創(chuàng)建文本段落。

　　接下來(lái)，我們需要知道，一整段看起來(lái)就像簡(jiǎn)歷中的一段文字，好像是在代碼中，而不是單獨(dú)的一段。在inspector窗口中，單擊代碼行的上述段落，檢查是否應(yīng)看到所有文本都亮起：

　　這告訴您，每個(gè)代碼都標(biāo)有DIVclass=ldquoCVrdquo的標(biāo)簽；項(xiàng)目gthellip一DIV短，這些標(biāo)記用于控制布局和形狀。

　　現(xiàn)查CV、ldquo節(jié)標(biāo)題；專業(yè)類型

　　首先，您只看到另一組DIV標(biāo)記，因?yàn)閷?shí)際標(biāo)題嵌套在它們之間。

　　調(diào)用另一端的三角形，展開(kāi)三角形，查看其內(nèi)容，然后在下一行中執(zhí)行相同的操作，直到您看到ldquo；專業(yè)類型；短信，你在找什么。你會(huì)發(fā)現(xiàn)它被包裹在里面

　　hellip；＜0／H2）gt；標(biāo)簽，創(chuàng)建級(jí)別2標(biāo)題：

　　現(xiàn)在我們知道的代碼看起來(lái)像是簡(jiǎn)歷部分的每一部分，我們可以回到崇高的文本并開(kāi)始編輯。

　　將光標(biāo)放在HTML文件的頂部，就可以從上面開(kāi)始搜索了。按Ctrl+F和ldquo進(jìn)行新聞CV項(xiàng)目搜索；。繼續(xù)搜索，直到找到代碼實(shí)例＜DIVclass=ldquoCVprojectldquo；燃?xì)廨啓C(jī)；就在那里

　　專業(yè)簡(jiǎn)介＜H2>您確認(rèn)代碼。

　　現(xiàn)在你可以用你自己的職業(yè)簡(jiǎn)介來(lái)替換文本。把你課文的每一段都寫下來(lái)

　　hellip;

　　標(biāo)記執(zhí)行此操作時(shí)，請(qǐng)確保**后一段的**個(gè)標(biāo)記包含屬性類和值。**后，像這樣：

　　....。

　　. 這適用于布局建模模板CSS，它將確保正確處理下一段文本的間距。

　　如果保存HTML文件并刷新網(wǎng)站，應(yīng)該會(huì)看到前兩個(gè)部分已經(jīng)過(guò)自定義。

　　謝潑德設(shè)計(jì)

　　一個(gè)免費(fèi)的開(kāi)源CMSnode.js和MongoDB計(jì)劃視頻UI設(shè)計(jì)師與數(shù)字藝術(shù)家

http://www.bangwork.net/jianzhanzhishi/1128.html 如何定制html模板