整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          完全攻略:30分鐘做出淘寶720°VR全景H5

          完全攻略:30分鐘做出淘寶720°VR全景H5

          016年7月中旬:

          ——這陣子淘寶H5很火,朋友圈被刷了好幾天屏。這不是一般的720度全景,它有偽3D的VR效果!你能上下、左右滑動看到不同視角的畫面,還能玩重力感應。對了那些動漫人物,動起來是分前后的!聽說淘寶請外包團隊,花了30萬。

          ——哦?以后不用了。

          ▲淘寶H5原版

          2個禮拜后:

          7月28日上午,iH5.cn主頁悄悄更新系統消息:“全景功能上線,可制作720VR瀏覽效果”。一下放出3個全景組件,720度VR、重力感應、頁面交互,各種功能1個不落!(在此感謝原作者Shrek公開了核心源碼)

          你是說我們不花一分錢能做出淘寶的H5?

          這是真的,我已經把這個H5做出來了:

          ▲淘寶H5致敬版

          相似度:95%

          你也要玩玩嗎?過程簡單得可怕,只有3步——

          (1)準備全景素材

          ▲淘寶H5的圖片

          A、1張首尾相連的全景圖,當背景;

          B、堆疊在全景圖上的人或物件的PNG圖,當前景。

          為方便演示,這里直接扒淘寶造物節80張切好的圖,拼合成不同的層。上面半透明的背景是20張切片合成的,前景大概照著淘寶H5的位置放,共分成3層(NO.1最靠前)。

          (2)用Photoshop切圖

          A、把不同層的圖片各豎切成N份,然后導出;

          B、導出時,越靠后層的圖片寬度(W)要越大。

          不會切圖勞煩百度,我這里把1張背景、3張前景分別切20塊導出為PNG。切的份數越多,三維效果就越平滑,但圖片也會隨著變大容易卡。

          (3)用iH5做全景運動

          ▲用iH5設置交互

          A、新建全景容器,下面放4個全景背景組;

          B、把切好的分層切片分別拖到對應的全景背景組里。

          比如你要放背景層圖片,就保持全景背景組1選中,把20張切片拖到頁面里就行。見證奇跡的時刻到了!以下幾張圖比較高能,是拖好圖調試的效果,強烈建議有WIFI的人點開:

          ▲用iH5分別調試水平轉角、垂直仰角、觀察點大小的效果

          看完上面圖片你應該也懂了,每個全景組就是把切片按順序圍成圓柱。

          那剛才給前后層圖片設不一樣的寬度,用處是?寬度越小,圍成圓的周長就越小,當觀察點在圓的中心,就會感覺這一層離得越近、移動得越快——VR的立體效果就這么來的。

          [注]半徑=周長/2π,相減可推測不同層的間距,并判斷觀察點的合適位置。

          如果你對點擊彈出華晨宇的新歌介紹、H5上方飄著一個造物節LOGO、滑動頁面畫面會伸縮什么的感興趣,直接去官網找教學視頻吧。

          加全景和調試其實很快,30分鐘不到,主要時間都花在處理淘寶那些素材了……扒人家原圖重新拼合構圖再切開很費事啊,還是原創好。

          因為模仿出來的H5太像了,為避免侵權不敢發出來給大家看。你自己試試吧?

          .HTML 介紹

          是網頁的后綴,txt 后綴是文本 ,py 后綴是 python ,html 后綴就是網頁的意思。我們如果想創建一個網頁的話,可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言,是一種標識性的語言。它包括一系列標記標簽,通過這些標記標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。

          1.html 的介紹

          頁面整體分為兩部分:

          一部分是head部分,主要是頁面的整體信息和配置,內容不會出現在瀏覽器內部。

          一部分是body部分,這部分內容則會在瀏覽器中展示出來

          我們使用 pycharm 創建一個 html ,打開后就是下圖模樣。


          (1)文檔類型聲明(默認的可以不用設置)

          <!DOCTYPE html>

          (2)開始標簽和結束標簽

          一般的標簽是成對出現的,一般稱第一個標簽是開始標簽,第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。

          開始標簽:

          <html lang="en">

          其中的 html 為根元素,是所有元素的基礎。lang 表示語言,en 表示英文。

          結束標簽:

          </html>

          (3)頭部標簽

          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>

          其中 utf-8 表示字符編碼格式,如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。

          (4)身體標簽

          <body>
          
          </body>

          身體標簽是文檔的主題,可視化區域,所有的音頻,視頻,圖片,文字都可在其中搭建,相當于我們打開網頁時所看到內容。

          (5)標簽的特點

          標簽是由一對尖括號包裹單詞構成的,標簽要使用小寫。 一般的標簽是成對出現的,一般稱第一個標簽是開始標簽,第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。

          二.標簽

          標簽分為塊級標簽和內聯標簽(運行時點擊右上角的谷歌模式的小圓圈就可以)

          1.內容的書寫

          (1)塊級標簽(p)

          兩個 p 中間可隨意書寫內容

          <p>故事和酒,淘寶都有</p>

          (2)內聯標簽(span)

          <span>故事和酒,淘寶都有</span>

          完整代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
          <!-- 塊級標簽--> 
          <p>故事和酒,淘寶都有</p>
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有</span>
          </body>
          </html>

          運行后:


          運行后看不出塊級標簽和內聯標簽的區別,所有我們使用檢查。右擊后點擊檢查


          在點擊下圖中左上角的方框箭頭,變成藍色說明正在運行,之后就可以查看有關的數據了


          無需點擊,只要將箭頭放在文字上就會出現相關內容



          上面兩圖可以明顯看出兩句話的寬度不相同。

          塊級標簽:在不設置寬度的情況下,寬度始終和瀏覽器寬度保持一致。

          內聯標簽:寬度和內容有關

          2.設置高度寬度

          <p style="width: 500px;height: 50px;">故事和酒,淘寶都有</p>
          
          <span style="width: 500px;height: 50px;">故事和酒,淘寶都有</span>
          



          如圖所示,只有塊級標簽寬高改變了,內聯標簽不改變。由此可得,塊級標簽設置寬高有效,內聯標簽設置寬高無效。

          3.多個標簽同時存在

          <body>
          <!-- 塊級標簽-->
          <p>故事和酒,淘寶都有</p>
          <p>故事和酒,淘寶都有</p>
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有22</span>
          <span>故事和酒,淘寶都有22</span>
          </body>


          多個塊級標簽同時存在的情況下,排列方式從上往下
          多個內聯標簽同時存在的情況下,排列方式從左往右

          4.是否包含

          <body>
          <!-- 塊級標簽-->
          <p>故事和酒,淘寶都有
              <span>故事和酒,淘寶都有22</span>
          </p>
          
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有22
              <p>故事和酒,淘寶都有</p>
          </span>
          
          </body>


          由此可知,塊級標簽可以包含內聯標簽,但內聯標簽不可以包含塊級標簽,只可以包含內聯標簽。

          5.塊級標簽與內聯標簽相互轉換

          (1)塊級轉內聯

          <body>
          <!--將塊級標簽轉化成內聯標簽-->
          <p style="display: inline">故事和酒,淘寶都有</p>
          <p style="display: inline">故事和酒,淘寶都有</p>
          
          </body>


          (2)內聯轉塊級(display: block)

          內聯轉為塊級之后,具有了塊級的性質。

          <span style="display: block">故事和酒,淘寶都有222</span>
          <span style="display: block">故事和酒,淘寶都有222</span>


          (3)內聯塊元素(display: inline-block)

          內聯塊元素包含了內聯標簽和塊級標簽的部分特性。

          <span style="display: inline-block">故事和酒,淘寶都有333</span>
          <span style="display: inline-block;height: 50px">故事和酒,淘寶都有333</span>


          (4)段落標簽(p)

          <!--段落標簽-->
          <p></p>

          (5)標題標簽(h)

          • xtjs
          • ext4英文api
          • ext4中文api
          1. EasyUI
          • jquery easyui 未壓縮源代碼
          1. J-UI
          • J-UI
          1. Other
          • MUI-最接近原生APP體驗的高性能前端框架
          • Amaze UI | 中國首個開源 HTML5 跨屏前端框架
          • 淘寶 HTML5 前端框架
          • KISSY - 阿里前端JavaScript庫
          • 網易Nej - Nice Easy Javascript
          • Kendo UI MVVM Demo
          • Bootstrap
          • Smart UI
          • 雅虎UI - CSS UI

          7. 頁面 社會化 分享功能

          • 百度分享 pc端
          • JiaThis pc端
          • 社會化分享組件 移動端
          • ShareSDK 輕松實現社會化功能 移動端
          • 友盟分享 移動端

          8. 富文本編輯器

          • 百度 ueditor
          • 經典的ckeditor
          • 經典的kindeditor
          • wysiwyg
          • 一個有情懷的編輯器。Bach's Editor
          • tower用的編輯器
          • summernote 編輯器
          • html5編輯器
          • XEditor
          • wangEditor

          9. 日歷

          1. PC
          • 經典my97
          • 強大的獨立日期選擇器
          • fullcalendar
          • fullcalendar日歷控件知識點集合
          • 中文api
          • 農歷日歷
          • 超酷的仿百度帶節日日歷老黃歷控件
          • 日期格式化
          • 大牛日歷控件
          • 我群某管理作品
          • input按位替換-官網
          • input按位替換-github
          • bootstrap-daterangepicker
          • 國外30個插件集合
          • JavaScript datepicker
          • Datepair.js
          • 一個風格多樣的日歷
          • 彈出層式的全日歷
          • jquery雙日歷
          1. 移動
          • 大氣實用jQuery手機移動端日歷日期選擇插件
          • jQuery Mobile 移動開發中的日期插件Mobiscroll
          1. Date library
          • Datejs
          • sugarjs

          10. 綜合效果搜索平臺

          • 效果網
          • 17素材
          • 常用的JavaScript代碼片段

          11. 前端工程化

          1. 概述
          • 前端工具大全
          • 什么是前端工程化
          1. Gulp
          • Gulp官網
          • Gulp中文網
          • gulp資料收集
          • Gulp:任務自動管理工具 - ruanyifeng
          • Gulp插件
          • Gulp不完全入門教程
          • 為什么使用gulp?
          • Gulp安裝及配合組件構建前端開發一體化
          • Gulp 入門指南
          • Gulp 入門指南 - nimojs
          • Gulp入門教程
          • Gulp in Action
          • Gulp開發教程(翻譯)
          • 前端構建工具gulpjs的使用介紹及技巧
          1. Grunt
          • gruntjs
          • Grunt中文網
          1. Fis
          • fis 官網
          • fis

          12. 輪播圖

          1. pc圖輪
          • 單屏輪播sochange
          • 左右按鈕多圖切換
          • fullpage全屏輪播
          1. 移動端

          - [無縫切換](http://www.swipejs.com/)

          - [滑屏效果](http://www.idangero.us/swiper/)

          - [全屏fullpage](https://github.com/peunzhang/fullpage)

          - [單個圖片切換](https://github.com/qiqiboy/touchslider)

          - [單個全屏切換](https://github.com/peunzhang/slip.js)

          - [百度的切換庫](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)

          - [單個全屏切換](https://github.com/peunzhang/iSlider)

          - [滑屏效果](https://github.com/saw/touch-interfaces)

          - [旋轉拖動設置](http://baijs.com/tinycircleslider/)

          - [類似于swipe切換](http://touchslider.com/)

          - [支持多種形式的觸摸滑動](http://www.swiper.com.cn/demo/index.html)

          - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)

          - [大話主席pc移動圖片輪換](http://www.superslide2.com/)

          - [滑屏效果](https://github.com/hahnzhu/parallax.js)

          - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)

          - [ - 定寬網頁設計下,固定寬度布局開發WebApp并實現多終端下WebApp布局自適應](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html][WebApp)

          - [判斷微信客戶端的那些坑](http://loo2k.com/blog/detecting-wechat-client/)

          - [可以通過javascript直接調用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)

          - [JiaThis 分享到微信代碼](http://www.jiathis.com/help/html/weixin-share-code)

          - [聊聊移動端跨平臺開發的各種技術](http://fex.baidu.com/blog/2015/05/cross-mobile/)

          - [前端自動化測試](http://www.zhihu.com/question/29922082)

          - [多種輪換圖片](http://ajccom.github.io/niceslider/)

          - [滑動側邊欄](https://mango.github.io/slideout/)

          13. 文件上傳

          • 百度上傳組件
          • 上傳
          • flash 頭像上傳
          • 圖片上傳預覽
          • 圖片裁剪
          • 圖片裁剪-shearphoto
          • jQuery圖片處理

          14. 模擬select

          • 糖餅 select
          • flexselect
          • 雙select
          • select2

          15. 取色插件

          • 類似 Photoshop 的界面取色插件
          • jquery color
          • 取色插件集合
          • farbtastic 圓環+正方形

          16. 城市聯動

          • jquery.cityselect.js基于jQuery+JSON的省市或自定義聯動效果

          17. 剪貼板

          • 剪貼板
          • clipboard 最新的剪切方案
          • 不是Flash的剪貼板

          18. 簡繁轉換

          • 簡繁轉換

          19. 表格 Grid

          • facebook表格
          • 類似于Excel編輯表格-handsontable
          • bootstrap-table插件
          • datatables

          20. 在線演示

          • js 在線編輯 - runjs
          • js 在線編輯 - jsbin
          • js 在線編輯 - codepen
          • js 在線編輯 - jsfiddle
          • java 在線編輯 - runjs
          • js 在線編輯 - hcharts
          • js 在線編輯 - jsdm
          • sql 在線編輯 - sqlfiddle
          • mozilla 在線編輯器

          21. 播放器

          • Html5 VideoPlayer

          22. 粒子動畫

          • Proton 煙花

          九. Nodejs

          • nodejs 篇幅比較巨大
          • Node.js 包教不包會
          • 篇幅比較少
          • node express 入門教程
          • nodejs定時任務
          • 一個nodejs博客
          • 【NodeJS 學習筆記04】新聞發布系統
          • 過年7天樂,學nodejs 也快樂
          • 七天學會NodeJS
          • Nodejs學習筆記(二)--- 事件模塊
          • nodejs入門
          • angularjs nodejs
          • 從零開始nodejs系列文章
          • 理解nodejs
          • nodejs事件輪詢
          • node入門
          • nodejs cms
          • Node初學者入門,一本全面的NodeJS教程
          • NodeJS的代碼調試和性能調優

          十. 性能優化

          1. 常規優化

          - [Javascript高性能動畫與頁面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)

          - [移動H5前端性能優化指南](http://isux.tencent.com/h5-performance.html)

          - [5173首頁前端性能優化實踐](http://ued.5173.com/?p=1731)

          - [給網頁設計師和前端開發者看的前端性能優化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)

          - [復雜應用的 CSS 性能分析和優化建議](http://www.orzpoint.com/profiling-css-and-optimization-notes/)

          - [張鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)

          - [前端性能監控總結](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)

          - [ 網站性能優化之CSS無圖片技術](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)

          - [web前端性能優化進階路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)

          - [前端技術:網站性能優化之CSS無圖片技術](http://my.eoe.cn/tuwandou/archive/4544.html)

          - [瀏覽器的加載與頁面性能優化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)

          - [頁面加載中的圖片性能優化](http://www.w3ctech.com/p/1503)

          - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)

          - [html優化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)

          - [99css——性能](http://www.99css.com/tag/%e6%80%a7%e8%83%bd)

          - [Yslow——性能優化](http://www.yslow.net/category.php?cid=20)

          - [YSLOW中文介紹](http://www.cnblogs.com/yslow/)

          - [轉一篇Yahoo關于網站性能優化的文章,兼談本站要做的優化](http://www.360ito.com/article/40.html)

          - [Yahoo!團隊實踐分享:網站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)

          - [網站性能優化指南:什么使我們的網站變慢?](http://blog.jiasule.com/i/153)

          - [網站性能優化實踐,減少加載時間,提高用戶體驗](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)

          - [淺談網站性能優化 前端篇](http://www.umtry.com/archives/747.html)

          - [前端重構實踐之如何對網站性能優化?](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)

          - [前端性能優化:使用媒體查詢加載指定大小的背景圖片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)

          - [網站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)

          - [加載,不只是少一點點](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)

          - [前端性能的測試與優化](http://mzhou.me/article/95310/)

          - [分享網頁加載速度優化的一些技巧?](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)

          - [頁面加載中的圖片性能優化](http://www.f2es.com/images-bytes-opt/)

          - [web前端優化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)

          - [網站性能優化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html)

          - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)

          - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)

          - [由12306談談網站前端性能和后端性能優化](http://coolshell.cn/articles/6470.html)

          - [AlloyTeam——前端優化](http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)

          - [毫秒必爭,前端網頁性能最佳實踐](http://www.cnblogs.com/developersupport/p/3248695.html)

          - [網站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)

          - [前端工程與性能優化(上):靜態資源版本更新與緩存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)

          - [前端工程與性能優化(下):靜態資源管理與模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)

          - [HTTPS連接的前幾毫秒發生了什么](http://blog.jobbole.com/48369/)

          - [Yslow](http://uicss.cn/yslow/#more-12319)

          - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)

          - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)

          - [YUISlide,針對移動設備的動畫性能優化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)

          - [Improving Site Performance](http://joelglovier.com/improving-site-performance/)

          - [讓網站提速的最佳前端實踐](http://segmentfault.com/a/1190000000367899)

          - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)

          - [Need for Speed – How to Improve your Website Performance](https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)

          - [阿里無線前端性能優化指南 (Pt.1 加載期優化)](https://github.com/amfe/article/issues/1)

          1. 優化工具
          • JavaScript 性能分析新工具 OneProfile
          • JavaScript 堆內存分析新工具 OneHeap
          1. 在線工具
          • google在線工具
          • 阿里測
          • 阿里-免費測試服務
          • 阿里-F2etest多瀏覽器兼容性測試解決方案
          • js性能測試

          十一. 前端架構

          • 技術架構
          • 前端架構
          • 如何成為前端架構師
          • 關于前端架構-張克軍
          • 百度騰訊offer比較(騰訊游戲VS百度基礎架構)

          十二. 個人作品

          1. 推薦作品

          • winter代碼片段需要翻墻
          • fgm
          • 岑安作品集
          • 當耐特demo集合
          • 米空格 js作品
          • myFocus
          • SeaJS組件庫
          • 顏海鏡作品
          • 腳兒網作品
          • javascript個人作品
          • 妙味的雷東升游戲作品
          • javascript作品集
          • 云五筆,灰度產生生成工具
          • 項目主頁
          • 個性的作品主頁
          • 播放器
          • ucren js demos 集
          • 智能社
          • 實例陳列架
          • zoye demo
          • 王員外
          • 平凡
          • jyg 游戲案例
          • 很多jquery插件
          • 不羈蟲 - soJs 作品系列
          • frozenui
          • 黑白棋
          • fromone

          2. 群員作品

          • MDialog - [合肥-M.J]
          • 輪播圖 - [上海-冷靜]
          • [廣州—堅殼]
          • [成都 - 無痕] 感恩節專題
          • [球霸天]
          • [北京-小數]
          • [ptf] Magix 工具
          • [杭州-Pft] Magix 基于 MVC 結構和 Hash 驅動的 OPOA(One Page One Application)應用
          • [上海-劇中人]-實驗室
          • [上海-豪情 ] 作品集合
          • [成都-feeling]
          • [上海-angela]
          • [海南-hank]作品
          • [上海-張力]博客
          • [上海-zenki]作品
          • 移動端圖案解鎖
          • [合肥-M.J] - MPreview 移動端圖片預覽組
          • [合肥-M.J] - Mexam 移動端在線做題組
          • [北京-蘇瑞] - dancer小人
          • [上海-玄沐]- 個人網站
          • [廈門-二哲]- 個人博客

          3. 國外大牛精品

          • pazguille

          十三. 簡歷模板

          • 不錯的個人簡歷
          • 簡歷
          • 張倫
          • 簡歷
          • 翁天信
          • 動畫方式的簡歷
          • 組件豐富簡歷
          • 簡歷池
          • haorooms博客
          • Justin Young

          十四. 面試題

          • 那幾個月在找工作(百度,網易游戲)
          • 2014最新面試題
          • 阿里前端面試題
          • 2016校招內推 -- 阿里巴巴前端 -- 三面面試經歷
          • 騰訊面試題
          • 年后跳槽那點事:樂視+金山+360面試之行
          • 阿里前端面試題上線
          • 拉勾網js面試題
          • 前端面試
          • Web開發筆試面試題 大全
          • 前端開發面試題
          • 2014最新前端面試題
          • 百度面試
          • 面試題
          • 前端工作面試問題
          • 前端開發面試題
          • 5個經典的前端面試問題
          • 最全前端面試問題及答案總結
          • 如何面試一名前端開發工程師?
          • 史上最全 前端開發面試問題及答案整理
          • 前端實習生面試總結
          • 史上最全 前端開發面試問題及答案整理
          • BAT及各大互聯網公司2014前端筆試面試題:JavaScript篇
          • 前端開發面試題大收集
          • 收集的前端面試題和答案
          • 如何面試前端工程師
          • 前端開發面試題
          • ??途W-筆試面經

          十五. iconfont

          • 中文字體
          • 淘寶字庫
          • 字體
          • 制作教程
          • zhangxinxu-icommon
          • icommon
          • 用字體在網頁中畫ICON圖標(推薦教程)
          • 字體壓縮工具 感謝初級群 [深圳-小魚] 的推薦

          十六. 開發工具類

          1. 前端開發工具
          • IntelliJ IDEA 簡體中文專題教程
          • Webstorm,InterllIdea,Phpstorm
          • SublimeText
          • Atom
          • visual studio code
          1. Chrome, Firebug, Filddle 調試
          2. Fiddler
          • Fiddler調式使用知多少(一)深入研究
          • 微信fiddle
          • 微信fiddle
          1. Chrome
          • Google Chrome 官方
          • Chrome - 基礎
          • Chrome - 進階
          • Chrome - 性能
          • Chrome - 性能進階
          • Chrome - 移動
          • Chrome - 使用技巧
          • Chrome - Console控制臺不完全指南
          • Chrome - Workspace使瀏覽器變成IDE
          • network面板
          • chrome開發工具快捷鍵
          • chrome調試工具常用功能整理
          • Chrome 開發工具 Workspace 使用
          • Chrome神器Vimium快捷鍵學習記錄
          • sass調試-w3cplus
          • 如何更專業的使用Chrome開發者工具-w3cplus
          • chrome調試canvas
          • chrome profiles1
          • chrome profiles2
          • chrome profiles3
          • chrome移動版調試
          • chrome調試
          • chrome的調試
          • chrome console 命令詳解
          • 查看事件綁定1
          • 查看事件綁定2
          • 神器——Chrome開發者工具(一)
          • 奇趣百科性能優化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹)
          • chrome 開發者工具的 15 個小技巧
          • Chrome開發者工具不完全指南
          • Chrome 開發者工具使用技巧
          1. Firebug
          • firebug視頻教程
          • firefox 模擬器
          • console.log 命令詳解
          • Firebug入門指南
          • Firebug控制臺詳解
          1. 移動,微信調試
          • 瀏覽器端調試安卓
          • 移動端前端開發調試
          • 使用 Chrome 遠程調試 Android 設備
          • mac移動端調試
          • mac移動端調試
          • 無線調試攻略
          • 無線調試攻略
          • 屌爆了,完美調試 微信webview(x5)
          • 微信調試的那些事
          • 遠程console
          • 微信調試工具
          • 各種真機遠程調試方法匯總
          1. iOS Simulator
          • Simulator
          • Xcode中的iOS模擬器(iOS Simulator)的介紹和使用心得
          1. img
          • loading img
          • 智圖-圖片優化平臺
          • 在線png優化
          1. 生成二維碼
          • 生成二維碼
          1. 瀏覽器同步
          • puer
          • liveReload
          • f5
          • File Watchers
          1. 在線PPT制作
          • nodePPT
          • PPT
          • reveal
          • slippy

          十七. 前端導航網站

          • 界面清爽的前端導航
          • 前端導航
          • 前端網址導航
          • 前端名錄
          • 前端導航
          • 前端開發資源
          • 網址導航
          • 前端開發倉庫 - 眾多效果的收集地
          • 前端資源導航
          • F2E 前端導航

          十八. 常用CDN

          • 新浪CDN
          • 百度靜態資源公共庫
          • 360網站衛士常用前端公共庫CDN服務
          • Bootstrap中文網開源項目免費 CDN 服務
          • 開放靜態文件 CDN - 七牛
          • CDN加速 - jq22
          • jQuery CDN
          • Google jQuery CDN
          • 微軟CDN

          十九. Git,SVN,Github

          1. Git
          • git-scm
          • 廖雪峰-Git教程
          • git-for-windows
          • GitHub 添加 SSH keys
          • gogithub
          • git常規命令練習
          • git的資料整理
          • 我所記錄的git命令(非常實用)
          • 企業開發git工作流模式探索部分休整
          • GitHub 漫游指南
          • GitHub秘籍
          • 使用git和github進行協同開發流程
          • 動畫方式練習git

          這些技術如何學習,有沒有免費資料?

          對前端的技術,架構技術感興趣的同學關注我的頭條號,并在后臺私信發送關鍵字:“前端”即可獲取免費的架構師學習資料

          • 知識體系已整理好,歡迎免費領取。還有面試視頻分享可以免費獲取。關注我,可以獲得沒有的架構經驗哦??!

          主站蜘蛛池模板: 无码av中文一区二区三区桃花岛| 中文字幕在线看视频一区二区三区| 国产区精品一区二区不卡中文| 人体内射精一区二区三区| 福利一区在线视频| 国产精品一区二区久久| 日本大香伊一区二区三区| 色欲AV无码一区二区三区| 无码人妻精品一区二区蜜桃| 人妻久久久一区二区三区| 亚洲AV综合色一区二区三区| 国产一区二区三区夜色| 福利一区二区在线| 高清一区二区在线观看| 国产精品538一区二区在线| 国产福利日本一区二区三区| 精品无码国产一区二区三区AV| 日本不卡一区二区视频a| 中文字幕人妻无码一区二区三区| 精品少妇一区二区三区在线| 精品国产一区二区三区久久蜜臀 | 高清一区二区三区日本久| 亚洲一区二区精品视频| 麻豆视传媒一区二区三区| 亚洲av无码天堂一区二区三区 | 国产福利一区二区三区在线视频| 国产免费一区二区视频| 国产成人AV一区二区三区无码| 亚洲日本一区二区三区在线| 亚洲爆乳精品无码一区二区三区| 日韩精品在线一区二区| 制服丝袜一区在线| 亚洲av色香蕉一区二区三区| 国产伦精品一区二区三区不卡| 男人的天堂av亚洲一区2区| 精品国产日韩亚洲一区91| 一区二区视频免费观看| 99久久精品国产免看国产一区| 无码日韩精品一区二区三区免费 | 亚洲综合一区二区| 日韩在线一区视频|