More Related Content
Similar to PG Training (20)
PG Training
- 3. CSS 簡介 – 1 CSS選擇器
1. 元素選擇器 ( xxx )
2. 分組選擇器 ( xxx , xxx , xxx )
3. 類別選擇器 ( html element attr name: class ) ( .xxx )
4. ID選擇器 ( html element attr name: id ) ( #xxx )
5. 屬性選擇器 ( xxx[xxx] )
6. 後代選擇器 ( xxx xxx )
7. 子元素選擇器 ( xxx > xxx )
8. 兄弟選擇器 ( xxx + xxx )
9. …
↗
- 4. CSS 簡介 – 2 CSS樣式語法
HTML ELEMENT內的CSS語法撰寫
HTML STYLE TAG內的CSS選擇器撰寫
- 5. CSS 簡介 – 3 CSS 樣式套用規則
• 1. CSS樣式套用規則為向下繼承
• 2. CSS樣式套用優先順序如下:
CSS語法宣告 !important
Html頁面元素內設定的style=“XXX:XXX”屬性css樣式
頁面內標籤<style></style>設定的css屬性 ( id > class )
@import 載入外部CSS
最高
最低
- 6. CSS Fail Example - 1
單一頁面使用”table”, ”td”
共用標籤元素, 作個別的樣
式設定。
※所有在經過這個頁面後
的HTML “table”, “td”標籤
都會套用上
- 7. CSS Fail Example - 2
.nav-tabs, .search_box
套用單一頁面需要的
設定在官方元件名稱
底下,
將套用到所有系統經
過這個頁面後的頁面
設定。
.ngdialog 為angularJS
Dialog元件共用樣式名
稱, 經過這個CSS設定套
用後, 所有之後開啟
的.ngdailog開啟位置將
被定位上移150px。
- 9. Bootstrap3 格線系統平台套用問題 - 2
Bootstrap3 使用.container或作為格線系統的容器, 以.row(列) , .col-(欄) 控
制.container內部的流動變化與佈局,最大的功能就是在於切版時版面的控制。
簡單說明.container內格線系統是以一個row(列)上劃分12格欄位來計算版面,
而欄有分為四種col-xs, col-sm, col-md, col-bg分別在不同的螢幕解析度下給予設
定的格數,用以達到切版流動控制的功能。
- 10. Bootstrap3 格線系統平台套用問題 - 3
我們開發階段所遭遇的問題:
1. 我們不懂Bootstarp的格線系統。
→ 於是我們直接套用美工spec。
2. 美工人員不清楚系統平台的真正架構,頁面中交易程式的部分以
整頁為格數設計。
→ 結果成了以整頁的寬度格數去計算的方式直接套用在完全不同
的架構和不同寬度基礎的平台頁面,並未考量到各方面平台設計的
寬度細部調整與框架頁內嵌頁面的範圍。