Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

CSS Layout

如何使用CSS做版面配置? 水平及垂直置中? 什麼是float? 什麼是clearfix? ;讓你更熟悉網頁排版

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

CSS Layout

  1. 1. CSS Layout http://zh-tw.learnlayout.com/ 5/20 meeting
  2. 2. 版面配置常用的CSS....  Display  margin  Box Model  Position  float  clear  clearfix  z-index  column
  3. 3. Display <span id="red">inline</span> <span id="blue">inline</span> <button id="black">inline-block</button> <div id="green">block</div> https://developer.mozilla.org/en-US/docs/Web/CSS/display inline inline inline-block block inline-block inline-block visibility:hidden;display:none; https://jsfiddle.net/bc5b9nbo/ display:none; VS visibility:hidden;
  4. 4. margin 水平置中 .div1 { background-color:#F00; width: 300px; height: 300px; text-align:center; } .div2 { width: 150px; height: 150px; background-color:#0F0; margin:0 auto; } http://jsfiddle.net/camel2243/gja77g9o/1/ <div class="div1"> <span>TEST</span> <div class="div2"></div> </div> div1div2 TEST
  5. 5. 那垂直置中呢..? margin:auto auto; margin-top:-50%; vertical-align:middle;
  6. 6. 垂直置中 <div id=“content”> 一行文字 </div> #content { font-size:32px; text-align:center; height:150px; line-height:150px; background-color:#F00; } 一行文字 http://jsfiddle.net/camel2243/vn3m0tx1/
  7. 7. 垂直置中 <div id="div1"> <div id="div2"> SSSS……….. </div> </div> #div1 { display:table; word-break:break-all; } #div2 { max-width: 150px; height: 150px;; background-color:#0F0; display: table-cell; vertical-align: middle; } SSSSSSSSSSS SSSSSS...... http://jsfiddle.net/camel2243/r55L7L34/1/
  8. 8. Box Model http://jsfiddle.net/camel2243/zkcnoofn/ <div class="simple"> 我小</div> <div class="fancy"> 我大</div> .simple { width: 500px; margin: 20px auto; background-color:#F00; } .fancy { width: 500px; margin: 20px auto; padding: 50px; background-color:#0F0; } 我小 我大 box-sizing: border-box; 我小 我大
  9. 9. Position  static:預設位置。  relative:與 static 相同,可加額外屬性定位。  fixed:以瀏覽器視窗定位。  absolute: 定位在上層容器的相對位置。 http://jsfiddle.net/camel2243/za4f2jww/ <div class="container"> <nav><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></nav> <section>content1</section> <section>content2</section> <section>content3</section> </div> relative • 1 • 2 • 3 • 4 content1absolute content2 content3 static
  10. 10. 垂直置中 <div id="center"> TEST </div> #center { position:absolute; height:300px; top:50%; margin-top:-200px; background-color:#F00; } http://jsfiddle.net/camel2243/b1msc4hk/ TEST
  11. 11. 垂直置中 <div id="middle"> TEST </div> #middle { position:absolute; width:50%; height:280px; top:0; bottom:0; left:0; right:0; margin:auto; background-color:#0F0; overflow:auto; } http://jsfiddle.net/camel2243/j0n1gm5e/ SSSSSSSSSSSS SSSSS......
  12. 12. float http://jsfiddle.net/camel2243/cdk54cv6/ div{ background-color:#CCC; } img { float: right; margin: 0 0 10px 10px; } <div> <img src=img.jpg" /> textKKKK.. </div> XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX img li li li …… inline-block ? block+float ?
  13. 13. clear http://jsfiddle.net/camel2243/yz8bbdfr/ .box { float: left; width: 200px; height: 100px; margin: 10px; background-color:#F00; } section{ background-color:#0F0; } <div class="box">...</div> <section>TEXT</section>TEXT… TEXT … clear:both;
  14. 14. clearfix XXXXXXXX img <div> <img src=img.jpg" /> textKKKK.. </div> div{ background-color:#CCC; } img { float: right; margin: 0 0 10px 10px; } li li li …… nav Solution? http://jsfiddle.net/camel2243/dhec9kvy/
  15. 15. z-index http://jsfiddle.net/camel2243/v56ypdqc/ <div id=“red"> z-index:3; </div> <div id=“yellow"> z-index:2; </div> <div id=“green"> z-index:1; </div> 記得要設position
  16. 16. column <div class="three-column"> TEXT…… </div> .three-column { padding: 10px; column-count: 3; column-gap: 10px; background-color:#F00; } TEXT… ……… ……… ……… ……… ……… TEXT… ……… ……… ……… ……… ……… TEXT… ……… ……… ……… ……… ……… http://jsfiddle.net/camel2243/gy32w9cf/ flexbox ?
  17. 17. 總結 萬丈高樓平地起
  18. 18. Reference 版面配置教學  http://zh-tw.learnlayout.com/ display、visibility、opacity 差異  http://stackoverflow.com/questions/272360/does-opacity0-have- exactly-the-same-effect-as-visibilityhidden/273076#273076 display 有哪些  https://developer.mozilla.org/en-US/docs/Web/CSS/display block 不該放在inline中  http://stackoverflow.com/questions/6061869/are-block-level- elements-allowed-inside-inline-level-elements-in-html5  垂直置中 http://blog.yam.com/hanasan/article/35806444
  19. 19. Reference clearfix  http://stackoverflow.com/questions/211383/which- method-of-clearfix-is-best z-index 其實很複雜  http://www.icoding.co/2013/06/knowledge-about-z- index-2

×