20140614 前端教學松：ly zorro 教學 / ve 學習筆記
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2014-06-14 09:30 – 09:31 | r721 – r749 | |
顯示 diff（58 行未修改）
Chrome Element Inspector - network 看網頁載入速度
- 建議學習順序
+ 建議習順序
+ *HTML 寫個自介靜態網頁（要放進哪些內容）
+ *CSS 開始排版
+ *jQuery 加入動態效果
|
||
| 2014-06-14 09:30 | r720 | |
顯示 diff（61 行未修改）
|
||
| 2014-06-14 09:30 – 09:30 | r715 – r719 | |
顯示 diff（57 行未修改）
Chrome Element Inspector - network 看網頁載入速度
+
+ 建議學習順序
|
||
| 2014-06-14 08:17 – 08:27 | r678 – r714 | |
顯示 diff（54 行未修改）
不建議用 Dreamweaver / frontpage：因為會產生冗餘程式碼
- 下堂課在
+ 下堂課再講 CSS 佈局
+
+ Chrome Element Inspector - network 看網頁載入速度
|
||
| 2014-06-14 08:17 | r677 | |
顯示 diff（57 行未修改）
|
||
| 2014-06-14 08:07 – 08:17 | r466 – r676 | |
顯示 diff（38 行未修改）
相容性最好：chrome > firefox > safari > IE，寫完要去 IE 測
- *ly
- i
+ *ly 講課 Part
+ selector
+ *id 唯一元素
+ *#XXX{...}
+ *class 群類，可以有很多個。用空格分開，即可套用多個不同 class
+ *.XXX{...}
+
+ 套用位階：後 class > 前 class；specific > general; id > class; class > element name
+ 大魔王別亂用： !important
+
+ 新手錯誤：取很多 ID
+
+ CSS Diner (CSS selector互動教學)
+
+ 不建議用 Dreamweaver / frontpage：因為會產生冗餘程式碼
+
+ 下堂課在
|
||
| 2014-06-14 08:07 | r465 | |
顯示 diff（42 行未修改）
|
||
| 2014-06-14 08:02 – 08:07 | r422 – r464 | |
顯示 diff（36 行未修改）
CSS reference
- v
+ 相容性最好：chrome > firefox > safari > IE，寫完要去 IE 測
+
+ *ly
+ i
|
||
| 2014-06-14 08:02 | r421 | |
顯示 diff（39 行未修改）
|
||
| 2014-06-14 07:44 – 08:02 | r228 – r420 | |
顯示 diff（7 行未修改）
http://codepen.io/ 可以看到很厲害的作品。雖然要大家安裝本機環境，但初期學習可以多利用線上環境
+
+
+ Display: 控制 element 的排版顯示方式
+ http://www.w3schools.com/cssref/pr_class_display.asp
+ 常用的是 block（很像 <div>） / inline（一排，只會對齊底部） / inline block（一排有多個元素對齊上方）
+ 也可以用 float，但沒有高度，需要指定一個有高度的 div 或 element /
+ http://www.w3schools.com/html/html_blocks.asp
+
+ 查詢
+ https://developer.mozilla.org/en-US/docs/Web/HTML（比較新）
+ http://www.w3schools.com/（比較穩定）
+
+ reset CSS
+ 不同瀏覽器實際呈現方式不同，用 reset 可洗掉預設樣式，自己指定要幾 px....
+
+
+ 沒有背 element 名稱沒關係，用 chrome inspect element 然後隨打即搜！（好強大！）
+
*CSS format 疊層樣式表
（5 行未修改）
{color: yellow;}
- C
+ CSS reference
+
+ v
|
||
| 2014-06-14 07:44 | r227 | |
顯示 diff（19 行未修改）
|
||
| 2014-06-14 07:43 – 07:44 | r220 – r226 | |
顯示 diff（13 行未修改）
敘述範本 {color: yellow;}
這樣還不會有用，還要有個選擇器 selector（早期HTML叫 tag，現在叫 element 居多）
- b
+ body
+ {color: yellow;}
+
+ C
|
||
| 2014-06-14 07:43 | r219 | |
顯示 diff（16 行未修改）
|
||
| 2014-06-14 07:42 – 07:43 | r164 – r218 | |
顯示 diff（11 行未修改）
ly：HTML 雖然是敘述性的，但表達能力其實不太好（木訥）
CSS 每一條都是一個 rule
- 屬性
+ 敘述範本 {color: yellow;}
+ 這樣還不會有用，還要有個選擇器 selector（早期HTML叫 tag，現在叫 element 居多）
+ b
|
||
| 2014-06-14 07:42 | r163 | |
顯示 diff（14 行未修改）
|
||
| 2014-06-14 07:20 – 07:42 | r1 – r162 | |
顯示 diff- Untitled
+ 2
+ 140614 前端教學松：ly zorro 教學 / ve 學習筆記T
+ 非正規安裝 zorro 強大 sublime plugin
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ IE 8~9 之間有很大變動，不是作給老人家看的，往下支援到 IE9 就好
+
+ table 流網站演示跟它的問題
+
+ http://codepen.io/ 可以看到很厲害的作品。雖然要大家安裝本機環境，但初期學習可以多利用線上環境
+
+ *CSS format 疊層樣式表
+ ly：HTML 雖然是敘述性的，但表達能力其實不太好（木訥）
+ CSS 每一條都是一個 rule
+ 屬性
|
||
| 2014-06-14 07:20 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||