Time of Update: 2016-07-08
一個初級前端工程師的自我修養,前端工程師 前言 最佳化! 又是最佳化! 切圖崽們作為整個web應用的紐帶,串連著使用者行為和機器效能。 而 最佳化 的最終意義,在於在這兩者之間取得一個最佳的平衡點。 對於圖片資源的載入來說,更是如此。 今天我們就來簡單說說,項目開發中常見的圖片載入最佳化方式。 預先載入 1.遮罩大法 我們都知道, window.onload 實際上是 DOMContentLoaded 事件完成的回調,只是完成了DOM樹的構建。
Time of Update: 2016-07-08
詳解CSS的相對定位和絕對位置,詳解CSS定位定位 原文地址:http://www.3lian.com/edu/2015/01-31/191131.html詳解CSS的相對定位和絕對位置感謝 3lian8 的投遞 時間:2015-01-31 來源:cmsgood zcp CSS的相對定位和絕對位置通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文檔流中,,這個時候你給這個元素設定的left,right,bottom,
Time of Update: 2016-07-08
CSS 定位之position,css定位position在前端網頁布局中,在同一平面上布局,我們大都採用float屬性來定位網頁元素的位置。但是涉及到彈出層、浮層、頁面廣告外掛程式等等,都需要CSS中的position屬性來定位了,對於初學者來說經常分不清楚是應該用position屬性的absolute值、relative值、fixed值等等,下面我們就position屬性基本的這三個值的用法做一些簡單的介紹,希望對初學者有些協助。 1、position的absolute(絕對位置)
Time of Update: 2016-07-08
JavaScript資料存放區 Cookie篇,javascriptcookie1.什麼是cookie? 答:cookie是用於在用戶端儲存會話資訊的。2.cookie的組成部分? ①名稱:一個唯一確定cookie 的名稱。建議區分大小寫。cookie 的名稱必須是經過URL 編碼的。 ②值:儲存在cookie 中的字串值。值必須被URL 編碼。 ③域:
Time of Update: 2016-07-08
AngularJS內建服務$location及其功能詳解,angularjslocation在學習AngularJS的過程中感覺到,通過一次性從服務端的資料庫擷取資訊,在前端進行分頁,這是一種比較可取的方式。因為它節省了前後端的通訊負載,把更多的顯示方面的任務交給前端處理。此內容分為兩個部分,第一部分給大家簡單介紹一下AngularJS的內建服務$location及其功能;第二部分通過一個比較完整的綜合執行個體來實現分頁顯示資料庫資訊的效果。在做angularJS的Mutilpe View &
Time of Update: 2016-07-08
js跨域資源共用 基礎篇,js基礎篇本文詳細介紹了javascript跨域資源共用,供大家參考,具體內容如下1.為什麼提出跨域資源共用(CORS)? 因為XHR實現ajax的安全限制是:XHR 對象只能訪問與包含它的頁面位於同一個域中的資源2.如何?跨域?(跨瀏覽器) // 跨瀏覽器建立並返回CORS對象 // param method : 請求的方式, get or post // param url : 跨域請求的url //
Time of Update: 2016-07-08
全面瞭解js中的script標籤,全面瞭解jsscript在頁面中用script標籤引入javascript檔案(<script type="text/javascript"
Time of Update: 2016-07-08
jQuery ajaxSubmit 實現ajax提交表單局部重新整理,jqueryajaxsubmitAJAX簡介AJAX = Asynchronous JavaScript and XML(非同步 JavaScript 和 XML)。AJAX 不是新的程式設計語言,而是一種使用現有標準的新方法。AJAX 是與伺服器交換資料並更新部分網頁的藝術,在不重新載入整個頁面的情況下。需要引入 : jquery-form.js使用說明:Java代碼$(document).ready(function()
Time of Update: 2016-07-08
jQuery解析與處理伺服器端返回xml格式資料的方法詳解,jqueryxml本文執行個體講述了jQuery解析與處理伺服器端返回xml格式資料的方法。分享給大家供大家參考,具體如下:1.php代碼:<?php header("Content-Type:text/xml; charset=utf-8");//聲明瀏覽器端返回資料的格式為xml文檔格式 echo "<?xml version='1.0' encoding='utf-8'?>".
Time of Update: 2016-07-08
jQuery基礎_入門必看知識點,jquery必看jQuery事件的因果關係是怎麼樣的一個格式:$("button").click(function(){
Time of Update: 2016-07-08
jQuery文字提示與圖片提示效果實現方法,jquery文字本文執行個體講述了jQuery文字提示與圖片提示效果實現方法。分享給大家供大家參考,具體如下:1.效果2.文字提示代碼:<script type="text/javascript">//<![CDATA[$(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title;
Time of Update: 2016-07-06
網頁頭部最佳化,頭部最佳化logo最佳化:1.logo圖片盡量小。2.一般情況下是作為背景放入的。2.肯定加h1標籤(提權)4.搜尋引擎對文本連結最友好。 <a href="#">123456</a>5.可以利用text-indent:-9999em; 隱藏文字,再display:block;轉為塊,再設定它的高(塊元素只能繼承父級的寬度)6.一定給a添加title屬性 提高使用者體驗7.首頁logo一般取名就是sohulogo.png
Time of Update: 2016-07-08
Node.js Streams檔案讀寫操作詳解,node.jsstreamsNode.js 天生非同步和事件驅動,非常適合處理 I/O 相關的任務。如果你在處理應用中 I/O 相關的操作,你可以利用 Node.js 中的流(stream)。因此,我們先具體看看流,理解一下它們是怎麼簡化 I/O 操作的吧。 流是什麼流是 unix 管道,讓你可以很容易地從資料來源讀取資料,然後流向另一個目的地。簡單來說,流不是什麼特別的東西,它只是一個實現了一些方法的 EventEmitter
Time of Update: 2016-07-06
CSS3的幾個標籤速記1,CSS3標籤速記1border-radius:CSS3圓角 文法:border-radius:25px; 橢圓邊角:文法-border-radius:xx%;或者15px/100px;box-shadow:CSS3盒陰影 文法:box-shadow:5px 5px 10px #eee;border-image:使用映像建立一個邊框
Time of Update: 2016-07-07
-webkit-filter是神馬?,-webkit-filter神馬這些濾鏡效果最初是用於SVG的,W3C引入到CSS中,然後制定了CSS Filter Effects 1.0,現在webkit率先支援了它。 現在規範中支援的效果有: - grayscale 灰階- sepia 褐色- saturate 飽和度- hue-rotate 色相旋轉- invert 反色- opacity 透明度- brightness 亮度- contrast 對比- blur 模糊-
Time of Update: 2016-07-05
分分鐘搞定 CSS 中令你困擾的各種三角,搞定css 話不多說,直接.triangle-one { display: inline-block; border-top: 50px red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid;}.triangle-six { display:
Time of Update: 2016-07-07
absolute之整體布局實現,absolute整體布局 要實現的布局,我最先想到是將header與footer絕對位置,但是發現在移動端會出現bug,經查資料發現用absolute實現整體布局非常好,還挺簡單的。.header, .footer, .content { position: absolute; left: 0; right: 0; }.header { height: 48px; top: 0;
Time of Update: 2016-07-06
看了些關於rem的知識點,在這做個自我總結歸納,rem知識點總結歸納我們最常用的字型單位是PX和EM。首先px:px像素(Pixel)。相對長度單位。像素px是相對於顯示器螢幕解析度而言的。(引自CSS2.0手冊)px會隨著螢幕解析度的改變而改變,但是瀏覽器對頁面進行縮放時會對頁面的整體布局產生影響。 em:em是相對長度單位。相對於當前對象內文本的字型尺寸。如當前對行內文本的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。(引自CSS2.0手冊)em一般會以<body>
Time of Update: 2016-07-06
CSS製作彩虹效果,css製作彩虹今天看到一篇文章,說到margin的塌陷的問題,並提供了好幾個例子。自己之前還沒怎麼遇到過這個問題,正好來研究一下。<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>css樣式一,使用margin塌陷:.box1, .box2,
Time of Update: 2016-07-07
css布局之負margin妙用及其他實現,css布局margin妙用相信大家在項目的開發中都遇到過這樣的需求,一行放X(X>1)個塊且相鄰塊之間的間距相同。大概就是上面這個樣子,下面介紹幾種實現的方式。1.負margin大法設定好元素的寬度和留白佔滿父級的寬度,然後設定父級的margin-left為留白的負留白的寬度<style type="text/css">*{margin: 0;padding: 0;}img{vertical-align: