Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20141101簡報(HTML/CSS) day 02

Sammy Lin
November 15, 2014

20141101簡報(HTML/CSS) day 02

Sammy Lin

November 15, 2014
Tweet

More Decks by Sammy Lin

Other Decks in Education

Transcript

  1. $44 <html> </html> <head> </head> <title> XXX </title> <body> </body>

    <h1> ooo </h1> <p> ooo </p> 㳺峹䥥▀䠉⼒瓞⺚⥉苌㚰耡Ⅷ↬㢝桬瘟㳺峹❭倱㩀㳺峹ℬ┮䥥羝峫
  2. $44 肞㞨⥉5GNGEVQT h1 { border: 1pt p.content { line-height: 180%;

    .menu { menu_list > li { border-radius: 3px; hover { color: #FFFFFF; * { font-si menu { margin: auto 0; a:hover { c .menu_list > li { border-radius: 3px; #menu { margin: auto 0; nt-size: 16px }
  3. $44 %55肞㞨⥉ 瓴⫀肞㞨⥉ )NQDCNUGNGEVQT 㔡㧪␤倁 \^ ␤倁肞㞨⥉ 6[RGUGNGEVQTU 㗨⹻␤倁 I\^

    %NCUU肞㞨⥉ %NCUUUGNGEVQTU 㗨⹻%NCUU DPOUFOU\^ IIFBEFS\^ +&肞㞨⥉ +&UGNGEVQTU 㗨⹻+& OBWJHBUJPO 劅倥肞㞨⥉ )TQWRUQHUGNGEVQTU 㗨⹻䥥㔡㧪肞㞨⥉ IFBEFS GPPUFS I\^ 䧕俜肞㞨⥉ %JKNFEQODKPCVQT 㗨⹻䧕俜⸱肞㞨 MJB\^ NFOVMJ\^ QUJNF\^ 砒⇄肞㞨⥉ &GUEGPFCPVEQODKPCVQT 㔡㧪砒⇄䥥肞㞨⥉ QB\^ DPOUFOUQ\^ 䧙聏肞㞨⥉ #FLCEGPVUKDNKPIEQODKPCVQT 㕟ⓛ䧙聏䥥␤倁 I Q\^ 資料來源:http://bit.ly/1AEwkgL
  4. $44

  5. $44

  6. $44 " style屬性 <h1 style=“color:red;”>Text</h1> # ID 屬性 #header {

    } $ .title { } Class 屬性 % .title:first-child
  7. $44 " style屬性 <h1 style=“color:red;”>Text</h1> # ID 屬性 #header {

    } $ .title { } Class 屬性 % Element Name .title:first-child
  8. $44 " style屬性 <h1 style=“color:red;”>Text</h1> # ID 屬性 #header {

    } $ .title { } Class 屬性 % h1 { } Element Name .title:first-child
  9. $44

  10. $44

  11. $44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px

    下4px margin: 10px 9px 8px 7px; margin: 10px 5px; 上下10px 左右5px
  12. $44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px

    下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px margin: 10px 5px; 上下10px 左右5px
  13. $44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px

    下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px margin: 10px 5px; 上下10px 左右5px
  14. $44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px

    下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px margin: 10px 5px; 上下10px 左右5px
  15. $44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px

    下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px 櫧磢曹 margin: 10px 5px; 上下10px 左右5px
  16. $44 㬧傻DQTFGT border: 粗細 顏色 樣式; 2px
 0.75em red #12fa99

    rgb(1,200,29) solid dashed double dotted 實線 虛線 雙線 點點線
  17. $44

  18. $44

  19. $44 display: inline; 規定元素以單行方式呈現,不能設定「width」、 「height」 、 「background-image」 display: block; 規定元素以區塊方式呈現

    display: inline-block; 規定元素以單行方式呈現,可以設定「width」、 「height」 、 「background-image」
  20. $44 display: inline; 規定元素以單行方式呈現,不能設定「width」、 「height」 、 「background-image」 display: block; 規定元素以區塊方式呈現

    display: inline-block; 規定元素以單行方式呈現,可以設定「width」、 「height」 、 「background-image」 display: none; 不顯示
  21. $44 position: absolute; 絕對位置,以父元素為定位 position: static; 預設值,不受 top、bottom、left 和 right

    屬性值影響 position: relative; 相對位置,以本身元素為定位 position: fixed; 以瀏覽器畫面為定位
  22. $44

  23. $44

  24. $44

  25. $44

  26. $44

  27. $44

  28. $44

  29. $44

  30. $44

  31. $44

  32. $44

  33. $44

  34. $44

  35. $44