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

Project Lab Squirrel #2

Project Lab Squirrel #2

Location: My home
Time: 25 May 2014 (Sun)

Mu-An Chiou

May 25, 2014
Tweet

More Decks by Mu-An Chiou

Other Decks in Technology

Transcript

  1.  ḱᙿᖳᔚᩲᤍ࿴
    Project Lab Squirrel #2

    View Slide

  2. layout

    View Slide


  3. FROM IMAGE TO HTML
    ᨜ᷡṍኈ

    View Slide




  4. LESSONS
    PARTICIPANTS
    ABOUT


    ⼀一些內容在這裡頭。


    View Slide




  5. LESSONS
    PARTICIPANTS
    ABOUT


    ⼀一些內容在這裡頭。


    View Slide




  6. LESSONS
    PARTICIPANTS
    ABOUT


    ⼀一些內容在這裡頭。


    View Slide




  7. LESSONS
    PARTICIPANTS
    ABOUT


    ⼀一些內容在這裡頭。


    View Slide




  8. LESSONS
    PARTICIPANTS
    ABOUT


    ⼀一些內容在這裡頭。


    View Slide


  9. ...

    .content {
    padding: 50px;
    height: 100%;
    overflow: scroll;
    }

    ...

    .menu {
    float: left;
    width: 20%;
    height: 100%;
    }
    TADA!

    View Slide

  10. Wait, float?

    View Slide

  11. JUST LIKE WRAPPING!
    WORD.
    Ⴐ᠏የ᠏Ⴐ᠏የ

    View Slide


  12. CSS BOX MODEL
    ᷱᥘኦṞ

    View Slide


  13. CSS BOX MODEL
    ᷱᥘኦṞ
    box-sizing: content-box
    CONTENT
    PADDING
    BORDER
    MARGIN
    WIDTH

    View Slide


  14. CSS BOX MODEL
    ᷱᥘኦṞ
    box-sizing: border-box
    CONTENT
    PADDING
    BORDER
    MARGIN
    WIDTH

    View Slide


  15. GIT



     


    View Slide

  16. GITHUB FOR MAC/WINDOWS GIT ON THE COMMAND LINE

    View Slide

  17. Git

    REPOSITORY ఔࣜࢿྉᇄ

    BRANCH ෼ࢧฏߦੈք

    COMMIT ঝ୚ఏަ

    DIFF ࠩҟ

    View Slide


  18. ADD a BRANCH
    ᙮ᬓᵪḝᕴ຅

    View Slide

  19. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    modified: style.css

    View Slide

  20. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    modified: style.css

    View Slide

  21. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    modified: style.css
    git add css/style.css
    ਗЪ ᏦࣩЗѧ

    View Slide

  22. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html modified: style.css

    View Slide

  23. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html modified: style.css

    View Slide

  24. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    git checkout style.css
    ਗЪ ᏦࣩЗѧ
    modified: style.css

    View Slide

  25. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    modified: style.css

    View Slide

  26. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    modified: style.css
    git add css/style.css
    ਗЪ ᏦࣩЗѧ

    View Slide

  27. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html modified: style.css

    View Slide

  28. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html
    git commit -m “修改css”
    ਗЪ ܸ֛ৃࢹ
    modified: style.css
    ৃࢹ

    View Slide

  29. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html modified: style.css

    View Slide

  30. WOrking area STAGING AREA GIT DIRECTORY
    modified: index.html 83ca17b style.css
    commit sha

    View Slide


  31. PUBLISH BRANCH
    ᓓ᧵ᵪḝᕴ຅

    View Slide


  32. PULL REQUEST

    View Slide


  33. PULL REQUEST

    View Slide


  34. TADA!

    View Slide

  35. ᷀ᮈ฼
    Project Lab Squirrel #2


    View Slide