Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

響應式網頁實作坊

3,322 views

Published on

3 / 27 高雄前端社群
響應式網頁實作坊 (Responsive web design workshop)

這是位於高雄前端社群的響應式網頁實作活動,
透過整天的課程,參與者將可以學會 RWD 網頁設計重要關鍵。

Published in: Education
  • Dating direct: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

響應式網頁實作坊

  1. 1. 
 

  2. 2. .box.left { float: left; height: 300px; width: 50%; } .box.right { float: right; height: 300px; width: 50%; } .wrap { padding: 20px; ... }
  3. 3. .box.left { float: left; height: 300px; width: 50%; } .box.right { float: right; height: 300px; width: 50%; }
  4. 4. .box.left{ float: left; height: 300px; width: 50%; } .box.right { float: right; height: 300px; width: 50%; }
  5. 5.
  6. 6. 
 

  7. 7. 
 

  8. 8. .box { width: 200px; height: 200px; padding: 100px; margin: 100px; }
  9. 9. .box { width: 200px; height: 200px; padding: 100px; maring: 100px; box-sizing: border-box; } box-sizing padding
  10. 10. Menu Content Header Footer
  11. 11. 
 

  12. 12. Menu Content AD Header Footer
  13. 13. Menu Content AD Header Header Header Footer
  14. 14. Menu Content AD Header Footer
  15. 15. Menu Content Header
  16. 16. Menu Content Header
  17. 17. 
 
 
 
 

  18. 18.
  19. 19. .col-**-* { position: relative; min-height: 1px; } padding-right: 15px; padding-left: 15px;
  20. 20.
  21. 21. 
 

  22. 22. @media not|only mediatype and (media feature) { CSS-Code; } @media screen and (max-width: 600px) { .col-onethird { width: 100%; } }
  23. 23. 
 
 margin: 0 15px;
  24. 24. 
 
 

  25. 25.
  26. 26. device-width device-height initial-scale minimum-scale maximum-scale user-scalable
  27. 27. 
 
 

  28. 28. Menu Content AD Header Footer Header Content Footer
  29. 29. Header Content Footer
  30. 30.
  31. 31. @media not|only mediatype and (media feature) { CSS-Code; }
  32. 32. 
 

  33. 33.
  34. 34.
  35. 35.
  36. 36. - <input type="date" />
  37. 37.
  38. 38. <form action="" class="form"> <div class="form-group"> <label for="email">*Email Address</label> <input id="email" type="email" class="form-control" placeholder="Email" required/> </div> <div class="form-group"> <label for="password">*Password</label> <input id="password" type="password" class="form-control" placeholder="Password" required/> </div> <div class="form-group"> <label for="tel">Tel</label> <input id="tel" type="tel" class="form-control" placeholder=" "/> </div> <div> <button class="btn" type="submit"> </button> </div> </form> <label for="email"> input id="email" required placeholder=" " type="submit"
  39. 39.
  40. 40. - inline - block - inline-block - none
  41. 41. <p> <strong>Sketch</strong> gives you the power, <strong>flexibility</ strong> and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: <strong>Design</ strong>. </p>
  42. 42. strong { display: block; color: orange; }
  43. 43. strong { padding: 10px; margin: 10px; background-color: orange; } strong { display: inline-block; padding: 10px; margin: 10px; background-color: orange; }
  44. 44.
  45. 45. $(document).ready(function(){ $('.button-toggle').click(function(e){ e.preventDefault(); $('.navbar-menu').toggleClass('active'); }); }); href="#" 

  46. 46.
  47. 47. // jQuery $(document).ready(function(){ $('.button-toggle').click(function(e){ e.preventDefault(); $('.navbar-menu').toggleClass('active'); }); });
  48. 48.
  49. 49.
  50. 50. 
 html, body { line-height: 1.6; font-size: 16px; color: #333; } p { margin-bottom: 12px; } ul { list-style-type: disc; margin-bottom: 12px; margin-left: 1em; }
  51. 51. 
 Header, Footer Header Content Footer
  52. 52.
  53. 53.

×