Project Lab Squirrel #2

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

layout 

 FROM IMAGE TO HTML ᨜ᷡṍኈ

<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

<div class="content"> ... </div> .content { padding: 50px; height: 100%;
overflow: scroll; } <div class="menu"> ... </div> .menu { float: left; width: 20%; height: 100%; } TADA!

Wait, float?

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

 CSS BOX MODEL ᷱᥘኦṞ

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

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

 GIT       

GITHUB FOR MAC/WINDOWS GIT ON THE COMMAND LINE

Git  REPOSITORY ఔࣜࢿྉᇄ  BRANCH ෼ࢧฏߦੈք  COMMIT ঝ୚ఏަ
 DIFF ࠩҟ

 ADD a BRANCH ᙮ᬓᵪḝᕴ຅

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

git add css/style.css ਗЪ ᏦࣩЗѧ

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

git add css/style.css ਗЪ ᏦࣩЗѧ

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

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

 PUBLISH BRANCH ᓓ᧵ᵪḝᕴ຅

 PULL REQUEST

 TADA!

᷀ᮈ฼ Project Lab Squirrel #2 

Project Lab Squirrel #2

Project Lab Squirrel #2

More Decks by Mu-An Chiou

Other Decks in Technology

Featured

Transcript