Project Lab Squirrel #2

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

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