Time of Update: 2016-09-01
Chrome瀏覽器Network面板http請求時間分析,chromenetworkChrome瀏覽器開發人員工具Network視窗下,可以查看下載各組件所需的具體時間根據上表進行簡要分析——Stalled(阻塞) 瀏覽器對同一個主機網域名稱的並發串連數有限制,因此如果當前的串連數已經超過上限,那麼其餘請求就會被阻塞,等待新的可用串連;此外指令碼也會阻塞其他組件的下載; 最佳化措施: 1、將資源合理分布到多台主機上,可以提高並發數,但是增加並行下載數量也會增大開銷,
Time of Update: 2016-09-01
列表的響應式排版,列表響應式排版效果展示: 一、每行固定個數:保證排版的美觀.list li{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}二、隨頁面寬度調整個數和大小:保證圖文的可讀性.list li{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}1、
Time of Update: 2016-09-01
如何在web中實作類別似excel的表格控制項,excel表格控制項 Execl功能非常強大,內建的很多函數或公式可以大大提高對資料的加工處理能力。那麼在web中有沒有類似的控制項呢?經過一番搜尋,發現handsontable具備了基本的excel功能支援公式,同時能對資料進行即時編輯。另外支援拖動複製、Ctrl+C 、Ctrl+V 等等。在瀏覽器支援方面,它支援以下的瀏覽器: IE7+, FF, Chrome, Safari, Opera。
Time of Update: 2016-08-31
深度解析響應式布局,深度解析布局概念響應式布局,就是響應式設計方案的呈現。具體點就是在不同的裝置上,網頁能自動識別螢幕寬度、並根據裝置的顯示面積(一般情況下是指的螢幕寬度,當然,也可以是其他的,可以在下面詳細解釋)顯示出不同的效果。通俗點就是設計一套布局,在PC端和移動端都可以使用。 如何?響應式布局?通俗的有三種方法1、百分比通過將每個盒子的寬度設定百分比來實現。優點:簡單方便要缺點:在額外設定margin、padding時,或者使用不同瀏覽器時,會使得布局混亂 2、met
Time of Update: 2016-08-31
CSS3 實現簡單輪播圖,css3輪播圖用css3動畫實現圖片轉場效果,原理還是改變left值。只有最簡單的自動播放功能,切換後短時間靜止,通過最後的位置複製第一張圖片,實現無縫切換。html結構<div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"&
Time of Update: 2016-08-31
深入剖析響應式布局的原理,深入剖析響應布局說到響應式布局,相信大家都有一定的瞭解,響應式布局是今年很流行的一個設計理念,隨著移動互連網的盛行,為解決如今各式各樣的瀏覽器解析度以及不同移動 裝置的顯示效果,設計師提出了響應式布局的設計方案。今天就和大家來講講響應式布局這件小事,包含什麼是響應式布局、響應式布局的優點和缺點以及響應式布 局該怎麼設計(通過CSS3 Media
Time of Update: 2016-08-29
sass的四種css編譯風格,sasscss編譯1.nested:預設#main { color: #fff; background-color: #000; } #main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 2.expanded#main { color: #fff; background-color: #000;
Time of Update: 2016-08-31
Emmet外掛程式比較實用常用的寫法,emmet外掛程式寫法看了一些關於Emmet外掛程式寫法的文檔,港真,怎麼可以寫這麼長啊。其實知道幾個大概要點加上實踐基本就能上手寫了啊雜話我前面有一篇【今天發現新大陸:haml和Emmet
Time of Update: 2016-08-29
移動端web開發總結,web開發總結 前一個星期實戰完一個PC端的基於HTML+CSS的項目,這幾天則接觸了移動端的開發,同樣也是在HTML+CSS的基礎上完成。雖然第一次接觸移動端的開發,但在開發過程中,我也是按照PC端的開發步驟來進行工作。首先切圖布局,同樣可以先總體規劃,分析哪些是可以作為組件來使用的。在這次移動端項目中,可以作為組件來使用的部分也挺多的。這樣一來就提高了我們的開發效率。移動端的web開發主要對象為手持功能,所以與PC端的開發區別是為不必考慮瀏覽器安全色性問題,而是考慮在
Time of Update: 2016-08-29
meta標籤,meta1、viewport<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />(1)width 控制viewport的大小,可以指定一個值,如640或者特殊的值;device-width為裝置的寬度(單位為縮放為100%的CSS的像素);(2)initial-scale
Time of Update: 2016-08-28
原生JS實現圖片輪播與淡入效果的簡單一實例,js淡入執行個體最近對css的興趣提不起來,因為以前對圖片輪播一直耿耿於懷苦於學藝不精,所以,花了點時間熟悉了一下js。然後一條道走到黑,用jquery和js寫了一下輪播和圖片淡入的效果。以後學習的路很長,希望自己在前端的路上越走越遠`(∩_∩)′ 從原理來講,網上的教程有很多,簡單來說。
Time of Update: 2016-08-28
AngularJS中$http服務常用的應用及參數,angularjs參數前言$http 服務:只是簡單封裝了瀏覽器原生的XMLHttpRequest對象,接收一個參數,這個參數是一個對象,包含了用來產生HTTP請求的配置內容,這個函數返回一個promise對象,具有success和error方法。$http服務的使用情境:var promise = $http({method:"post", // 可以是get,post,put,
Time of Update: 2016-08-28
angularjs 源碼解析之scope,angularjsscope簡介在ng的生態中scope處於一個核心的地位,ng對外宣稱的雙向繫結的底層其實就是scope實現的,本章主要對scope的watch機制、繼承性以及事件的實現作下分析。監聽1. $watch1.1 使用// $watch: function(watchExp, listener, objectEquality)var unwatch = $scope.$watch('aa', function () {}, isEqual)
Time of Update: 2016-08-28
如何利用JSHint減少JavaScript的錯誤,jshintjavascript前言JSHint用於分析和驗證JavaScript代碼是否符合您的編碼規則。這個強大的工具可以協助發現您代碼中錯誤和問題T,它強制你的團隊保持一定的編碼慣例和風格,使得代碼可靠和更容易閱讀.在這篇文章中,我將向您展示如何安裝、配置和使用JSHint。 還包括一個例子,列出了一些我最喜歡的能使用JSHint的編輯器。安裝 JSHint安裝JSHint非常容易,你可以使用 Node 包管理器
Time of Update: 2016-08-28
js簡單擷取表單中選項按鈕值的方法,js表單本文執行個體講述了js簡單擷取表單中選項按鈕值的方法。分享給大家供大家參考,具體如下:HTML部分如下:<form><tr bgcolor="#FFFFFF"> <td width="84" height="23" rowspan="3" align="center" valign="middle" bordercolor="#999999"><span
Time of Update: 2016-08-28
jquery實現網頁定位導航,jquery實現導航不知道大家有沒有注意到有的網頁由於頁面資訊量太大所以使用了頁面定位導航來實現跳轉,點擊旁邊的菜單的某一項頁面就跳到那一項對應的內容,而且我們滾動捲軸,當滾動到某一項內容,旁邊菜單對應的那一項也會高亮顯示。今天我就來講講這樣的效果是如何?的。 先貼上顯示效果: 實現: 這個的頁面配置很簡單,大家下去多試試就OK了,值得注意的是需要在菜單布局裡的每一個li裡面添加a標籤並且給a標籤的 href
Time of Update: 2016-08-28
jquery實現ajax提交表單資訊的簡單方法(推薦),jqueryajax最近在思考最佳化項目,想自己擴充一個jquery自動擷取表單中的資料進行ajax提交。本人沒有完整性學習jquery,基本上是現學現找,有點困難。主要是擴充和拼接json轉對象很簡單,附上代碼:; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//後台對象接收名稱
Time of Update: 2016-08-28
歸納下js物件導向的幾種常見寫法總結,js物件導向//定義Circle類,擁有成員變數r,常量PI和計算面積的成員函數area() 1.工廠方式var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj;}var c = new Circle();alert( c.
Time of Update: 2016-08-28
JS基於HTML5的canvas標籤實現炫目的色相球動畫效果執行個體,本文執行個體講述了JS基於HTML5的canvas標籤實現色相球效果。分享給大家供大家參考,具體如下:運行效果如下:具體代碼如下:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>JS
Time of Update: 2016-08-28
總結Javascript中的隱式類型轉換,總結javascript轉換JavaScript的資料類型分為六種,分別為null,undefined,boolean,string,number,object。object是參考型別,其它的五種是基本類型或者是原始類型。比如像是Number() ,還是parseInt() 、parseFloat()都屬於顯示類型轉換(強制類型轉換);這一節我們來看一下隱式類型轉換(自動轉換)。數值自動轉換為字串var a = 123;alert(a+'456'); /