absolute feed 自己 session rem 好的 ans 一個 css樣式

這是兩年以來，修真院收集整理的學習資料順序。
以CSS15個任務，JS15個任務為基礎，分別依據要完成任務的不同的技能點，我們整理出來了這麽一篇在學習的時候需要看到的資料。


這是Version 1.0，接下來會優化和更新到2.0.
現在只有WEB，接著會推出Java。

任務地址在這裏。


任務體系是從簡單到難，官網提供了更多更詳細的資料。

資料

css部分
任務1:九宮格——用html+css制作一個網頁
通過這個任務能學到：1.網頁是由什麽組成的；2.如何生成一個網頁；3.如何訪問一個網頁；4.html和css如何搭配工作；5.頁面基礎的布局方式；6.如何用一行代碼兼容不同瀏覽設備；7.頁面和想象的不一樣時如何進行調試

HTML基本知識
【圖文】第1章 HTML的基本概念_百度文庫
CSS概念
CSS 教程
盒子模型，浮動
對CSS中的Position、Float屬性的一些深入探討 - CoffeeDeveloper - 博客園
chrome開發者工具
神器--Chrome開發者工具(一) - Just For Fun - SegmentFault
媒體查詢
Media Queries詳解 - lines - 博客園


任務2:認識開發必備工具
通過這個任務能學到：1.學習版本管理工具; 2.學習使用服務器; 3.學習如何將自己的代碼放到網上去

nginx
windows上 nginx 配置代理服務，配置多域名，以及最簡單實現跨域配置
git
Git教程
github
知乎 - 知乎
svn
SVN服務器搭建和使用（一） - xjbest - 博客園

任務3:魔鏡介紹頁——一個最簡單的移動端頁面
通過這個任務能學到：1.如何運用布局知識進行更復雜的布局；2.如何讓布局更好地適應移動端；3.如何合理使用rem作長度單位；4.如何使用photoshop切圖；5.如何處理不同dpi下的圖片

PhotoShop
http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html

absolute
CSS深入理解之absolute-慕課網
自適應單位
徹底弄懂css中單位px和em,rem的區別 - leejersey - 博客園
css類選擇器
CSS 類選擇器詳解

任務4:登錄頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理常見的移動端頁面； 2.學會改變表單元素樣式

input
了解HTML表單之input元素的30個元素屬性 - 推酷
Smart checkbox and radio
絕對定位和相對定位
CSS中的絕對定位與相對定位 - TBHacker - 博客園

任務5:護工個人主頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理更復雜的移動端頁面； 2.同樣是左中右的布局，可以用很多不同的方法來完成； 3.用css3的方法更好地拉伸背景圖

自適應布局總結
這可能是史上最全的 CSS 自適應布局總結
Html，CSS代碼規範
NEC : 更好的CSS樣式解決方案


任務6:護工列表頁——一個最常見的移動端頁面，需要使用bootstrap
1.解決垂直居中； 2.模擬下拉選框； 3.做出復雜的列表頁

雪碧圖
background-position和雪碧圖(CSS Sprites)用法
bootstrap柵格系統
Bootstrap 柵格系統的精妙之處
bootstrap官方文檔
Bootstrap中文網

任務7:桌遊精靈——一個完整的webApp，以bootstrap為基礎滿足更多不同的需求
收獲什麽： 1.HTML5的audio定義音頻流； 2.處理半透明； 3.CSS3動畫

input range 的樣式設置
使用CSS來擴展增強Input Range的示例
html5web存儲
HTML 5 Web 存儲
html<audio>標簽
HTML <audio> 標簽
css3動畫
CSS3 Animation_Animation, css3屬性詳解 教程_w3cplus
css處理半透明
CSS屬性小結之--半透明處理 - 子純不語 - 博客園

任務8:修真院——一個PC端的企業網站，以bootstrap為基礎滿足更多不同的需求
收獲什麽： 完成一個比較完整的PC端項目
html和css實現常見布局
利用HTML和CSS實現常見的布局 - 眼睛大大的 - SegmentFault

任務9:修真院——一個響應式的企業網站
收獲什麽： 增加網站布局開發的熟練度； 獲得一個響應式的網站
meta標簽中http-equiv屬性使用介紹
meta標簽中的http-equiv屬性使用介紹_HTML/Xhtml_網頁制作_腳本之家

任務10:51包裝——一個常見的表單頁面
收獲什麽： CSS制作流程圖； CSS模擬表單元素； 熟練響應式布局
css改變select下拉列表樣式
用純css改變下拉列表select框的默認樣式 - OurJS

任務11:基於css的更高級語言——使用less/sass重寫任務4（登錄頁），並編譯
收獲什麽： 使用SASS或LESS
sass入門
sass入門 - sass教程
less文檔
Less 中文網

任務12:標準化——閱讀html和css規範，不使用bs重寫任務5和6（護工）
收獲什麽： 使用SASS或LESS重構頁面
css重置樣式表
css 重置樣式表 - 前端小白 - 博客頻道 - CSDN.NET

任務13:組織樣式表——按照任務12的標準，不使用bs重寫任務7樣式，並且閱讀樣式表組織規範，拆分樣式表
收獲什麽：css架構
如何進行css架構（張鑫旭）
http://www.zhangxinxu.com/wordpress/2010/07/我是如何對網站css進行架構的/

任務14:自己的組件庫——將修真院拆出屬於自己的組件庫
收獲什麽： 提取PC端的組件庫
前端為什麽要組件化
前端為什麽一定要做組件化
css畫三角
css3畫三角形的原理 - 這算什麽艾迪 - 博客園

任務15:綜合性的總結——按照任務12，13學到的規範，重寫一遍任務9，不用其他框架，使用less/sass並編譯
收獲什麽：綜合能力
綜合之前所學

js部分
基礎語法積累
菜鳥教程
JavaScript 教程 | 菜鳥教程
w3c
瀏覽器腳本教程
阮一峰
JavaScript 標準參考教程（alpha）
廖雪峰
JavaScript教程
js秘密花園
JavaScript 秘密花園
選一個刷一遍
jq教程
jQuery 教程 | 菜鳥教程
angular插件集合
angular好用的插件集合（持續更新中） - angular - SegmentFault

任務1:九宮格
收獲什麽： javascript是什麽？ 掌握javascript的基本語法； 了解javascript的全局函數； 學習使用javascript的自定義函數； javascript如何操作DOM； javascript如何修改CSS；

js字符串轉數字
js 字符串轉換成數字的三種方法 - 瘋狂的胖魚 - 博客頻道 - CSDN.NET
js隨機數
JS產生隨機數的幾個用法！ - banbu - 博客園

任務2:桌遊精靈身份發放
收獲什麽： 如何使用JS進行頁面跳轉和傳參； 使用JS對input等頁面元素進行更復雜的操作； 進一步理解JS的數組； 了解JS正則表達式

dom操作
JavaScript的DOM操作(節點操作) - 西西爸de劄記 - 博客頻道 - CSDN.NET
正則（RegExp對象）
JavaScript 標準參考教程（alpha）
控制臺調試
Chrome 控制臺console的用法

任務3:桌遊精靈查看身份
收獲什麽： 進一步學習頁面間數據傳遞； 如何根據需要顯示和隱藏視圖； JS對DOM樣式和內容進行更復雜的操作
Json
JSON_百度百科
localStorage和sessionStorage詳解
HTMl5的存儲方式sessionStorage和localStorage詳解_html5教程技巧_腳本之家

任務4:桌遊精靈法官日誌和遊戲結果
收獲什麽： 綜合運用jquery完成更復雜的業務邏輯； 使用有限狀態機來存放對象的不同狀態

js有限狀態機
JavaScript與有限狀態機 - 阮一峰的網絡日誌

任務5:ajax登錄/退出
ajax
JavaScript 標準參考教程（alpha）
rest
深入淺出REST_知識庫_博客園
json和jsonp
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例 - 隨它去吧 - 博客園

任務6:後臺系統--angular初嘗
收獲什麽： 單頁應用開發； 學習使用框架開發項目
angularjs中文網
AngularJS中文網
angular常用功能
AngularJS 最常用的八種功能
angular ui-router
AngularJS ui-router (嵌套路由)


任務7:後臺系統--angular登錄和列表
收獲什麽： 用angular進行數據交互； 雙向綁定； 表單驗證

理解angularjs的作用域scope
AngularJS中文社區
http服務
簡介AngularJS中$http服務的用法_AngularJS_腳本之家
$http服務細節設置
AngularJs $http 請求服務

任務8:後臺系統--angular傳參和指令
收獲什麽： 在單頁應用裏如何通過url傳參； angular的指令是什麽； 如何去自定義一個指令

angular中幾種傳參
Angular 中幾種參數傳遞方式
angular自定義指令
AngularJS中的指令全面解析(必看)_AngularJS_腳本之家
angular服務
AngularJS 之 Factory vs Service vs Provider


任務9:後臺系統--angular圖片上傳
收獲什麽： 基於HTML5的圖片預覽和上傳

angular實現圖片上傳（參考實現）
AngularJS圖片上傳功能的實現 - OPEN 開發經驗庫
ng-file-upload的使用
angularJs中上傳圖片/文件功能：ng-file-upload - csdnmmcl的博客 - 博客頻道 - CSDN.NET

任務10:後臺系統--angular表單驗證交互
收獲什麽： 進一步熟悉表單驗證； 學習使用三方插件：富文本編輯器

angular 表單驗證
表單驗證<AngularJs> - Halower - 博客園
angular-umeditor
dylike/meta.umeditor

PS，本文由修真院前學員現正式員工美麗動人的小金超整理。

對修真院有興趣的，請點擊這個鏈接去註冊， 必須用這個鏈接，拿我做推薦人可是有好處的~

http://www.jnshu.com/login/1/83020780

【轉】【修真院“善良”系列之十八】WEB程序員從零開始到就業的全資料V1.0——只看這一篇就夠了！