Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

GSS FED 別亂來交給我們來 Bear

  • Identifiez-vous pour voir les commentaires

GSS FED 別亂來交給我們來 Bear

  1. 1. ?! 1
  2. 2. ?! 1
  3. 3. 
 2
  4. 4. 3
  5. 5. 4
  6. 6. 5
  7. 7. 6
  8. 8. 6
  9. 9. 7
  10. 10. 7
  11. 11. 8
  12. 12. 8
  13. 13. 10
  14. 14. 10
  15. 15. 11
  16. 16. 12
  17. 17. 12
  18. 18. 13 .NET MVC typescript SVNgit JAVA php CoffeeScript angular.js jQuery Grunt Gulp
  19. 19. PrototypeWireframe UI style 14
  20. 20. 15
  21. 21. 15
  22. 22. 16
  23. 23. 16
  24. 24. 16
  25. 25. 17
  26. 26. 18
  27. 27. 19
  28. 28. 20
  29. 29. Tab 1st Level 21
  30. 30. Tab 2nd Level Tab 1st Level 22
  31. 31. 23
  32. 32. 24 overwrite KENDO UI
  33. 33. 25
  34. 34. 26
  35. 35. 27
  36. 36. 28
  37. 37. 29
  38. 38. 30
  39. 39. http://id.desbear.com/Gcss/beta/template/index.html 31
  40. 40. 32
  41. 41. 33
  42. 42. 34
  43. 43. 35
  44. 44. 36
  45. 45. .wrapper .nav include ap-layout .list include ap-layout .detail include ap-layout .nav, .list, .detail{ position: absolute; top:0; bottom:0; } .nav{ width:$nav-width; left:0; } .list{ left:$l-nav; width: $list-width; } .detail{ left: $nav-width + 
 $list-width; right:0; } .nav .list .detail 37
  46. 46. .ap-head … .ap-body … .ap-foot … [class^=“ap-”]{ position: absolute; left:0; right:0; } .ap-head{ top:0; height: $ap-head-height; } .ap-foot{ bottom:0; height:$ap-foot-height; } .ap-body{ top: $ap-head-height; bottom: $ap-foot-height; overflow: auto; } .list .ap-head .ap-body .ap-foot 38
  47. 47. 39
  48. 48. 40
  49. 49. 
 
 41
  50. 50. 42
  51. 51. fixed-width fluid-width fixed-width 43
  52. 52. How? .col-left .col-center .col-right 44
  53. 53. .group .col-left .col-right .col-center .col-left{ float:left; width:$left-width; } .col-right{ float:right; width:$right-width; } .col-center{ margin-right:$right-width; margin-left:$left-width; } .col-left .col-center .col-right Float? 45
  54. 54. .group .col-left .col-right .col-center Float? .col-left .col-center .col-right 46
  55. 55. .table .col-left .col-center .col-right .table{ display:table; width:100%; >[class^=“col-”]{ display:table-cell; } } .col-left{width:$left-width;} .col-right{width:$right-width;} .col-left .col-center .col-right Table-cell? 47
  56. 56. Table-cell? .col-left .col-center .col-right .table .col-left .col-center .col-right 48
  57. 57. .col-left 49
  58. 58. .table .col-left .col-left-inner .col-center .col-right .col-right-inner .table{ display:table; width:100%; > [class^=“col-”]{ display:table-cell; } } .col-left-inner{width:$left-width;} .col-right-inner{width:$right-width;} .col-left .col-center .col-right Table-cell’s better way .col-left-inner .col-right- inner 50
  59. 59. .inline-cloum .col-left .col-center .col-center-inner .col-right .inline-cloum > [class^=“col-”]{ display:inline-block; } .col-left{width: $left-width;} .col-right{width: $right-width;} .col-center{ width: 100%; margin-left: -$left-width; margin-right: -$right-width; } .col-center-inner{ margin-left: $left-width; margin-right: $right-width; } inline-block? .col-left .col-center .col-right .col-center-inner 51
  60. 60. .inline-cloum .col-left .col-center .col-center-inner .col-right .col-left .col-center .col-right .col-center-inner inline-block? 52
  61. 61. 53
  62. 62. Neil Evan Woody Cjie 54
  63. 63. 55

×