原创 利用gulp來對less編譯成css

利用gulp來對less編譯成css(操作教程圖解) 本文旨在介紹藉助gulp這個打包工具來將less預編譯語言編譯成我們正常的css語言的整個基本操作流程。其中還提及到部分底層原理並避開了百度上部分雜七亂八的不完整答案 1.

原创 JQuery的toggle()方法把元素隱藏了的解決方案

JQuery的toggle()方法把元素隱藏了的解決方案 JQuery的toggle()本來是用來切換幾種狀態之間的變化的,但是我們在使用的時候,遇到了一種情況就是被綁定toggle()的元素被隱藏了,根本沒有達到我們要的效果,本

原创 移動端樣式全面適配(基於webpack+vue爲例)

該適配方案基於webpack和vue來闡述,但是原理基本大同小異,並不侷限於webpack+vue 爲方便闡述,直接以vue-cli搭建的腳手架項目開始 該項目引入一個插件postcss-px2rem配合使用,當然該插件也可以自己寫

原创 移動端輪播圖原生實現

實現移動端滑動輪播和定時輪播 slidebanner.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name

原创 一款清除瀏覽器樣式差異的解決方案

各瀏覽器默認的樣式各不同,所以會影響到我們的開發,因爲在每次開發之前應該先對瀏覽器的默認樣式進行一次清除,讓每個瀏覽器保持一致的初始化樣式,如下的代碼是具有高性能的樣式初始化 // reset.css,用於清除瀏覽器差異的默認樣式 h

原创 SwitchHosts不能及時生效的解決方案

SwitchHosts是一個管理、切換多個 hosts 方案的工具。 它是一個免費開源軟件。平時我們在開發的時候,到了自測這一步,都要將代碼放到測試機上。這時候就可以將網站的資源位置轉到測試機的IP上去,從而可以在互聯網訪問正常的網站的

原创 內容安全策略(CSP)詳解

內容安全策略(CSP),其核心思想十分簡單:網站通過發送一個 CSP 頭部,來告訴瀏覽器什麼是被授權執行的與什麼是需要被禁止的。其被譽爲專門爲解決XSS攻擊而生的神器。 1.CSP是什麼 CSP指的是內容安全策略,爲了緩解很大一部分潛

原创 HTML5易漏知識點錦集

本文通過對w3schoolHTML5基礎教程,整理出比較常見的卻又容易遺忘或者忽略的HTML5相關知識點。本文的標題順序與w3school中的HTML5基礎教程標題順序保持一致。適合翻閱和複習。 1.HTML 5 視頻 (1)視頻格式

原创 JS判斷國內外所有主流瀏覽器類型

主要判斷世界五大主流瀏覽器內核,其中IE瀏覽器可以精確到版本號(IE5-IE11,同時考慮了兼容模式),同時支持判斷國內大部分套殼瀏覽器 function browerType() { var ua = navigator.u

原创 bootstrap最基礎的知識應用

bootstrap最基礎的知識應用(尋找其中需要注意的地方) 我打算通過這個筆記來記錄自己從bootstrap中學到過的東西,這是一個庫,所以存在極大的記憶性,一般來講不需要記,需要用的時候,我們可以直接去查找就是,但是,所有東西都是看

原创 web安全(客戶端篇)詳細攻防圖

web安全(客戶端篇)詳細攻防圖解(包括XSS,CSRF,ClickJacking) 本文用思維導圖的方式簡單有力地概括web安全的客戶端方面的攻擊和防禦,主要介紹XSS、CSRF和ClickJacking三種常見的web客戶端攻擊,參

原创 利用Hexo在GitHub搭建個人的Blog

利用Hexo在GitHub搭建個人的Blog(完整版制服所有坑) 本文將詳述借用Hexo這個工具在GitHub上搭建個人的Blog(博客),避開百度上的答案參差不齊和各種不可預知的錯誤,有可能出現的意外錯誤這裏都有詳細的解決方案。本文圖

原创 url() 函數中的路徑加引號的利弊

url() 函數中的路徑應該加引號嗎? 加不加引號,各有各的說話,也有說加不加都沒所謂的,但是其內在是有一定的區別的,主要體現的地方如下面所描述,我們應該根據業務的需要來指定規範 1.建議不加引號 (1)低系列 IE 不兼容帶有引號的

原创 最全最精準的IE瀏覽器判斷和國內套殼瀏覽器判斷(360,QQ,搜狗,百度等)

僅針對IE瀏覽器和國內主流套殼瀏覽器進行判斷,不對其他瀏覽器進行判斷 IE判斷說明:判斷瀏覽器的目的在於根據不同的瀏覽器作出不同的後臺響應,而最主要針對的無非是CSS樣式代碼,而IE瀏覽器坑很多,它同時具備文檔模式和瀏覽器模式(用

原创 JS高性能隨機算法

舉例,從一個數組中隨機抽取若干元素且不重複 // 樣本數組 var exampleArr = []; // 目標數組 var randomArr = []; // 製造樣本 for (var i = 1; i <= 150; i++)