Semantic ui教學
23 likes7,691 views
本文介绍了如何使用HTML和CSS创建个人简历网页，强调了语义化的前端框架Semantic UI的重要性。文档详细阐述了基础HTML和CSS的结构与使用方法，以及如何引入和应用Semantic UI组件。最后，还提到了一些学习资源以供进一步探索。
Semantic ui教學
- 1. HTML&CSS AND SEMANTIC-UI NCKU TIEN-TANG WU 1
- 2. 2
- 9. 正⽂文開始！ 9
- 10. 先來複習⼀一下上週交的 10
- 11. html:超⽂文本標記語⾔言（ HyperText Markup Language ） 定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽 器知道網站整個架構的呈現。 css:層疊樣式表 （Cascading Style Sheets） 能為你的網站修改字體樣式、顏⾊色、網⾴頁背景、甚⾄至是 華麗的動畫與 3D 效果、讓你增添設計感的⼯工具。 11 講述瀏覽器形成網⾴頁的過程 建⽴立dom css渲染
- 12. html:超⽂文本標記語⾔言（ HyperText Markup Language ） 定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽 器知道網站整個架構的呈現。 ⾻骨架 ⾐衣服 css:層疊樣式表 （Cascading Style Sheets） 能為你的網站修改字體樣式、顏⾊色、網⾴頁背景、甚⾄至是 華麗的動畫與 3D 效果、讓你增添設計感的⼯工具。 12 css推廣歷史 禪意花園
- 13. 補充說明⼀一下 網站三要素： html css javascript ⾐衣服 ⾻骨架 互動 13
- 14. 補充說明⼀一下 網站三要素： html css javascript front-end(前端) 14
- 15. 基本html <html></html>:層狀結構,起始標籤,定義語⾔言 <head></head>:網站資訊,引⼊入外部資源 <body></body>:網站內容 15
- 16. 基本 css css選擇器 id class 16
- 17. 使⽤用css的三個⽅方法： 外部引⼊入-在head中加⼊入link標籤 內部引⼊入-在style標籤中加⼊入css語法 內部引⼊入(最⾼高優先)-在標籤中加⼊入 style標籤 17
- 18. 使⽤用css的三個⽅方法： 外部引⼊入-在head中加⼊入link標籤 內部引⼊入-在style標籤中加⼊入css語法 內部引⼊入(最⾼高優先)-在標籤中加⼊入 style標籤 只要有style標籤就可以使⽤用css 18
- 19. example: 1 2 3 19
- 20. 使⽤用使⽤用Google Chrome開發者⼯工具， 快速調校網⾴頁並偵錯 打開google chrome 右鍵 檢查元素 1 2 20
- 21. example: 1 2 3 21
- 22. demo 解釋最⾼高優先css ⽰示範改變 div ⼤大⼩小 和 顏⾊色 22
- 23. hand on 打開google chrome 右鍵 檢查元素 1 2 3 改變div ⼤大⼩小顏⾊色 寬：width: 100px ⻑⾧長：height: 100px 背景顏⾊色：background-color: blue; 23
- 24. 今天的重頭戲要來囉！ 24
- 25. semantic-ui 語意化的 front-end framework 25
- 26. semantic-ui 語意化的 front-end framework 不要打造重覆的輪⼦子！ 要站在巨⼈人的肩膀上！ 26
- 27. semantic-ui 不要再從頭打造UI了 UI semantic-UI讓你上天堂 27
- 28. 先來感受⼀一下power 28
- 29. 沒啥感覺？ 那來前後⽐比對 勝 29
- 30. 好想學！ 第⼀一步！ 回想如何使⽤用css的三個⽅方法 30
- 31. 好想學！ 第⼀一步！ 回想如何使⽤用css的三個⽅方法 把css外部引⼊入進來！ <link rel="stylesheet" href="./packaged/css/semantic.css"/> 31
- 32. <link rel="stylesheet" href="./packaged/css/semantic.css"/> 注意相對路徑！ packaged,index.html,reset.css 同層 ⽽而semantic.css在 32
- 33. 先來個button練練等 go 33 實地演練 範例
- 34. 換你做做看！ step1: 把程式碼複製到<body>中,可以動了,很爽 step2: 試試看不同種類的button step3: 配合網站的code 去修改⾃自⼰己的code button種類：⼤大⼩小,顏⾊色,icon, Animated… ⽤用http://semantic-ui.com/elements/button.html 查詢喔～ 34
- 36. 學會了button之後 來回頭看⼀一下semantic-ui提供哪 些好⽤用且常⽤用的ㄏㄏ elements: button,icon,image… collections: menu,form… views: comment,list… modules: slidbar,popup… 36
- 37. 再來學個popup 37
- 38. BUT! 38
- 39. BUT! $ 好像出現我沒看過的東⻄西... $ what? wt $ $ $ 39
- 41. html css javascript 41
- 42. html css javascript $ 是 jQuery的語法,⽽而jQuery是javascript的函式庫... 42
- 44. 好吧... 跟css⼀一樣引⼊入外部套件 1.先引⼊入jQuery 函式庫 2.在引⼊入semantic.js 函式庫 3.加上class or id 4.呼叫它並填⼊入設定 44
- 45. 1 2 3 4 設定值請參考官網設定 45
- 46. 4 把click改成 hover看看 設定值請參考官網設定 46
- 48. 學習資源參考 semantic-ui jQuery w3school 潮翻天的語⾔言： 關鍵字搜尋javascript 48