原创 70多個非常實用的web開發CSS小技巧

1. 文字水平居中 將一段文字置於容器的水平中點,只要設置text-align屬性即可: text-align:center;   2. 容器水平居中 先該容器設置一個明確寬度,然後將margin的水平值設爲auto即可。 div#

原创 理解Cookie和Session的區別及使用

前言 HTTP是一種無狀態的協議,爲了分辨鏈接是誰發起的,需自己去解決這個問題。不然有些情況下即使是同一個網站每打開一個頁面也都要登錄一下。而Session和Cookie就是爲解決這個問題而提出來的兩個機制。 應用場景 登錄網站,今輸入用

原创 使用HttpOnly提升Cookie安全性

在介紹HttpOnly之前,我想跟大家聊聊Cookie及XSS。 隨着B/S的普及,我們平時上網都是依賴於http協議完成,而Http是無狀態的,即同一個會話的連續兩個請求互相不瞭解,他們由最新實例化的環境進行解析,除了應用本身可能已經存

原创 canvs繪製動態時鐘

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id='draw' width="2

原创 漸進式Web應用(PWA)入門教程(下)

漸進式Web應用(PWA)入門教程(下)上篇文章我們對漸進式Web應用(PWA)做了一些基本的介紹。漸進式Web應用(PWA)入門教程(上)在這一節中,我們將介紹PWA的原理是什麼,它是如何開始工作的。第一步:使用HTTPS漸進式Web應

原创 漸進式Web應用(PWA)入門教程(上)

漸進式Web應用(PWA)入門教程(上)最近關於漸進式Web應用有好多討論,有一些人還在質疑漸進式Web應用是否就是移動端未來。 但在這篇文章中我並不會將漸進式APP和原生的APP進行比較,但有一點是可以肯定的,這兩種APP的目標都是使用

原创 jsonp請求實例原生和jquery

<!--jquery 封裝請求--> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script> $.ajax({

原创 深入理解CSS3 Animation 幀動畫

CSS3我在5年之前就有用了,包括公司項目都一直在很前沿的技術。最近在寫慕課網的七夕主題,用了大量的CSS3動畫,但是真的沉澱下來仔細的去深入CSS3動畫的各個屬性發現還是很深的,這裏就寫下關於幀動畫steps屬性的理解我們知道CSS3的

原创 這可能是史上最全的CSS自適應佈局總結教程

這可能是史上最全的CSS自適應佈局總結教程 標題嚴格遵守了新廣告法,你再不爽,我也沒犯法呀!話不多說,直入正題。 所謂佈局,其實包含兩個含義:尺寸與定位。也就是說,所有與尺寸和定位相關的屬性,都可以用來佈局。 大體上,佈局中會用到

原创 BFC原理及應用

 BFC 已經是一個耳聽熟聞的詞語了,網上有許多關於 BFC 的文章,介紹瞭如何觸發 BFC 以及 BFC 的一些用處(如清浮動,防止 margin 重疊等)。雖然我知道如何利用 BFC 解決這些問題,但當別人問我 BFC 是什麼,我還是

原创 實現黑客帝國屏幕效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Maxtrix</title> <style> *{ margin: 0 auto;

原创 純CSS繪製三角形(各種角度)

我們的網頁因爲 CSS 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活,只要你發揮創意就能實現很多比人想象不到的效果。特別是隨着 CSS3 的廣泛使用,更多新奇的 CSS 作品涌現出來。今天給大家帶來 CSS 三角形繪製方法

原创 使用Vue-cli搭建後臺簡單管理系統vue.js2.0

新手使用vue搭建後臺管理系統 使用相關技術:vue-cli:腳手架工具     vue.js(2.0)     vue-router :路由     vuex:狀態管理     axios: 數據請求API    axios-mock-

原创 JavaScript中原型對象的徹底理解

一、什麼是原型 原型是JavaScript中的繼承的繼承,JavaScript的繼承就是基於原型的繼承。 1.1 函數的原型對象 ​ 在JavaScript中,我們創建一個函數A(就是聲明一個函數), 那麼瀏覽器就會在內存中創

原创 使用回調和Promise兩種方法實現3個小球依次移動

<!DOCTYPE html> <html> <head> <title>promise調用</title> <style type="text/css"> .ball{ width: 20px; height: 20