肆合互動,團(tuán)隊始于2008,為您提供可信任的一站式網(wǎng)站制作和網(wǎng)絡(luò)推廣優(yōu)化服務(wù)!
028-85756675
網(wǎng)站地圖

新聞資訊

為您提供網(wǎng)站建設(shè)資訊、網(wǎng)站優(yōu)化知識、主機(jī)域名郵箱、
關(guān)鍵詞排名、網(wǎng)站開發(fā)常見問題等。

網(wǎng)站前端開發(fā)三個實(shí)用的小技巧

發(fā)表日期:2019/11/06 來源:肆合互動 咨詢電話:028-85756675

  在進(jìn)行網(wǎng)站開發(fā)的時候,如何合理使用代碼標(biāo)簽讓網(wǎng)站建設(shè)更簡單?成都網(wǎng)站開發(fā)公司工作人員教你以下三個小技巧,讓前端開發(fā)更輕松。

  一、a標(biāo)簽打開與刷新頁面標(biāo)簽作為常用標(biāo)簽,當(dāng)跳轉(zhuǎn)鏈接時,常用屬性target,

  _self:默認(rèn)值。在相同的框架或窗口中載入目標(biāo)文檔。即當(dāng)前;

  _blank:在一個新的未命名的窗口載入文檔。即新開窗口;

  _parent:把文檔載入父窗口或包含了超鏈接引用的框架的框架集,如果沒有,則行為類似_self。即上級窗口中;

  _top:把文檔載入包含該超鏈接的窗口,取代任何當(dāng)前正在窗口中顯示的框架。如果沒有上下文環(huán)境,則行為類似_self。即頂級窗口中。

  不過,target屬性還有一個特征,可以自定義內(nèi)容或URL。

  二、網(wǎng)頁一鍵換膚優(yōu)化實(shí)現(xiàn)將一個網(wǎng)頁的顏色相關(guān)一鍵切換

  links[0].href = val

  通過JS控制標(biāo)簽的href屬性切換引用的css文件

  弊端:如果網(wǎng)站需要切換的內(nèi)容過多,每次引用CSS的加載會有一定量的延時,不具有流暢感,交互體驗(yàn)較差。

  有趣的title屬性 在實(shí)現(xiàn)一鍵換膚的其他方法之前,要聊一下這個在標(biāo)簽中的title屬性。

  當(dāng)標(biāo)簽具有title屬性且有值時,link標(biāo)簽就變成一個可控制的特殊元素,即可以通過DOM對象的disabled屬性控制link是否渲染。

  但是,在實(shí)測過程中,除IE外無論link標(biāo)簽是否具有title屬性,都可以直接使用DOM對象的disabled屬性,但I(xiàn)E確實(shí)需要title。

  let links = document.getElementsByTagName('link'); links = [].slice.call(links); links[0].disabled = true;

  alternate備選 在標(biāo)簽中,rel屬性有很多值,常用的是stylesheet,但是還有一個alternate表示當(dāng)前文檔的替代版本,也就是加載但不執(zhí)行。

  利用這個特性,結(jié)合DOM對象的disabled屬性,可以提前加載另一套css方案,解決交互性問題。代價是多一點(diǎn)點(diǎn)流量。

  三、CSS矢量圖內(nèi)聯(lián)在前端項(xiàng)目中,使用到的圖標(biāo)類大多會使用SVG來實(shí)現(xiàn),靜態(tài)文件的減少有利于性能的提升。當(dāng)然,可以用靜態(tài)資源緩存(blog鏈接)減少文件請求,高速渲染,引用地址使用內(nèi)聯(lián),即直接將SVG放入路徑(不建議超級大圖,會極大增加文件體積)。

  采用base64

  采用標(biāo)簽直接內(nèi)聯(lián)

  在直接引入之前,需要對一些特殊符號進(jìn)行轉(zhuǎn)譯",%,#,{,},<,>。(IE也兼容的!)


相關(guān)案例
更多案例>
ARE YOU
INTERESTED
IN?
感興趣嗎?

網(wǎng)站建設(shè)及推廣咨詢電話

028-85756675
15308030114

成都市天府新區(qū)華府大道1號藍(lán)潤置地廣場T3公寓806室

7x24 小時專業(yè)服務(wù)
專業(yè)備案全程跟進(jìn)
承諾做不到退款
快速建站SEO友好

填寫網(wǎng)站建設(shè)及SEO優(yōu)化排名需求

*請認(rèn)真填寫需求信息,24小時內(nèi)與您取得聯(lián)系。
在線咨詢
電話咨詢

立即咨詢

028-85756675
微信咨詢
微信二維碼
QQ咨詢
返回頂部