“            ”                            Kejun / @kejunz / blog.hikejun.comFriday, November 11, 2011
05/14/2003Friday, November 11, 2011
05/14/2003   -   05/2004Friday, November 11, 2011
7            让    们        ......                            HTML         结                            CSS          实现    ...
应   HTML / CSS / Javascript                            稳       扩Friday, November 11, 2011
术   术应                            论        术   规   规则Friday, November 11, 2011
过   hack                            仅仅       问题     远远   ......                                          满Friday, November...
1.    转过       观                            2.   术     视                            3.    观Friday, November 11, 2011
HTML   结   结   UI   +10086Friday, November 11, 2011
....................................................Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
1.       现   发设计HTML结                            <span class=”dotline”></span>, <span class=”blank12”></span>             ...
http://site.douban.com/106371/likers/Friday, November 11, 2011
1. 结                            2.   读                            3.                            4.     稳Friday, November 1...
<div id=”___”   class=”__”>Friday, November 11, 2011
HTML         “ ” “对             ”                     <div id=”db-tribe-members” class=”mod”>...</div>                    ...
Friday, November 11, 2011
Friday, November 11, 2011
float:left;    float:left;                            width:66px;   width:316px;Friday, November 11, 2011
position:absolute;                                 margin-left:132px                            padding-left:132pxFriday, ...
block                        (block formatting context)                            满                              block   ...
<div class=”list”>                 .list .pic {               <ul>                                 float: left;            ...
Friday, November 11, 2011
.list .pic { float:left; }Friday, November 11, 2011
.list .pic {      .list .content {                                      float:left;       float:right;   .list .pic { float:l...
.list .pic {      .list .content {                                      float:left;       float:right;   .list .pic { float:l...
.list .pic {      .list .content {                                                              float:left;       float:righ...
.list .pic {      .list .content {                                                              float:left;       float:righ...
Friday, November 11, 2011
1    宽                      现                       2 floats suck. CSSLint warning: floats>10Friday, November 11, 2011
inline-block   float                            .list {                              letter-spacing:-0.31em;               ...
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
.more-events li { display:inline-block;*display:inline;zoom:1;margin:0 -2px 0 .5ex;padding:0  1ex 0 1ex;border-left:1px so...
Floats Suck                              float box   总   烦......Friday, November 11, 2011
Incorrect Float Shrink-Wrap Bug                               Float Squeeze Weird Gap Bug               Float Squeeze Dupl...
问题                            时   风险Friday, November 11, 2011
“ 议”                                          http://hikejun.com/blog/2011/10/26/   试    /                                ...
发     论热     对                                                http://www.slideshare.net/kejun/ss-9015786http://www.flickr.c...
为术       术为                              统术      术                                 术   术                             术    ...
说   们      ......                            HTML5 / CSS 3Friday, November 11, 2011
OOCSS                             块   HTML/CSSFriday, November 11, 2011
预编译                            CSS/CSS3渐渐变   级语   ......Friday, November 11, 2011
应       发                                础   ......Friday, November 11, 2011
“                            顺                                                    ”                                       ...
Upcoming SlideShare
Loading in...5
×

永不止步的“重构”

4,267

Published on

Published in: Technology, Design
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
320
Comments
2
Likes
36
Embeds 0
No embeds

No notes for slide

永不止步的“重构”

  1. 1. “ ” Kejun / @kejunz / blog.hikejun.comFriday, November 11, 2011
  2. 2. 05/14/2003Friday, November 11, 2011
  3. 3. 05/14/2003 - 05/2004Friday, November 11, 2011
  4. 4. 7 让 们 ...... HTML 结 CSS 实现 视觉 Javascript 实现 户 为Friday, November 11, 2011
  5. 5. 应 HTML / CSS / Javascript 稳 扩Friday, November 11, 2011
  6. 6. 术 术应 论 术 规 规则Friday, November 11, 2011
  7. 7. 过 hack 仅仅 问题 远远 ...... 满Friday, November 11, 2011
  8. 8. 1. 转过 观 2. 术 视 3. 观Friday, November 11, 2011
  9. 9. HTML 结 结 UI +10086Friday, November 11, 2011
  10. 10. ....................................................Friday, November 11, 2011
  11. 11. Friday, November 11, 2011
  12. 12. Friday, November 11, 2011
  13. 13. Friday, November 11, 2011
  14. 14. Friday, November 11, 2011
  15. 15. Friday, November 11, 2011
  16. 16. Friday, November 11, 2011
  17. 17. Friday, November 11, 2011
  18. 18. Friday, November 11, 2011
  19. 19. 1. 现 发设计HTML结 <span class=”dotline”></span>, <span class=”blank12”></span> 2. 样 彻 <div class=”lay_col bg4 clearfix”>, <li class=”MIB_linedot_l”>, <div class=”feed_att MIB_linkbl MIB_txtbl”> 3. <div id=”QM_Container_11” class=”collet_box fn_myLike”> 4. ! ! http://www.bhwdj.com/14/89.htmlFriday, November 11, 2011
  20. 20. http://site.douban.com/106371/likers/Friday, November 11, 2011
  21. 21. 1. 结 2. 读 3. 4. 稳Friday, November 11, 2011
  22. 22. <div id=”___” class=”__”>Friday, November 11, 2011
  23. 23. HTML “ ” “对 ” <div id=”db-tribe-members” class=”mod”>...</div> <ul class=”list member-list”>...</div> div.mod, ul.list, ul.member-list 对 div#db-tribe-members 页 块Friday, November 11, 2011
  24. 24. Friday, November 11, 2011
  25. 25. Friday, November 11, 2011
  26. 26. float:left; float:left; width:66px; width:316px;Friday, November 11, 2011
  27. 27. position:absolute; margin-left:132px padding-left:132pxFriday, November 11, 2011
  28. 28. block (block formatting context) 满 block 1. float 为none 2. overflow 为visible (IE6 ) 3. display设为‘table-cell’, ‘table-caption’, ‘inline-block’ 4. position static relative 5. IE hasLayout block formatting context block formatting context 1. collapsing margins问题 2. 边缘 float box overflow:hidden; zoom:1; float:left;Friday, November 11, 2011
  29. 29. <div class=”list”> .list .pic { <ul> float: left; <li> margin-right:10px; <div class=”pic”> } <a...><img...></a> </div> .list .content { <div class=”content”>...</div> overflow: hidden; </li> zoom: 1; ... } </ul> </div>Friday, November 11, 2011
  30. 30. Friday, November 11, 2011
  31. 31. .list .pic { float:left; }Friday, November 11, 2011
  32. 32. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻Friday, November 11, 2011
  33. 33. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻Friday, November 11, 2011
  34. 34. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻 发BFC .list .content { overflow: hidden; zoom: 1; /* for IE6/7*/ }Friday, November 11, 2011
  35. 35. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻 发BFC .list .content { overflow: hidden; zoom: 1; /* for IE6/7*/ }Friday, November 11, 2011
  36. 36. Friday, November 11, 2011
  37. 37. 1 宽 现 2 floats suck. CSSLint warning: floats>10Friday, November 11, 2011
  38. 38. inline-block float .list { letter-spacing:-0.31em; 1 inline box 问题 *letter-spacing:normal; word-spacing-0.43em; } .list li { display: inline-block; 2 IE6/7 inline-block *display: inline; zoom: 1; vertical-align: top; letter-spacing: normal; word-spacing: normal; }Friday, November 11, 2011
  39. 39. Friday, November 11, 2011
  40. 40. Friday, November 11, 2011
  41. 41. Friday, November 11, 2011
  42. 42. Friday, November 11, 2011
  43. 43. .more-events li { display:inline-block;*display:inline;zoom:1;margin:0 -2px 0 .5ex;padding:0 1ex 0 1ex;border-left:1px solid #aaa;line-height:10px;_margin-bottom:10px;letter- spacing:normal;word-spacing:normal; } .more-events li a { _position:relative; } /* hack for IE6 */ .more-events ul { margin-left:-1ex;letter-spacing:-0.31em;*letter-spacing:normal;word- spacing-0.43em; }Friday, November 11, 2011
  44. 44. Floats Suck float box 总 烦......Friday, November 11, 2011
  45. 45. Incorrect Float Shrink-Wrap Bug Float Squeeze Weird Gap Bug Float Squeeze Duplicate Last Character Bug Image Float Bullet Chaos Bug Staircase Bug Double Margin Bug Italics Float Bug 3px Jog Bug Scared of Floats Bug Escaping Floats Bug IE6 Peekaboo Bug ...... www.positioniseverything.net haslayout.net/css/Friday, November 11, 2011
  46. 46. 问题 时 风险Friday, November 11, 2011
  47. 47. “ 议” http://hikejun.com/blog/2011/10/26/ 试 / http://hikejun.com/blog/2010/03/19/ html吗/http://www.flickr.com/photos/kejun/6332927507/in/photostreamFriday, November 11, 2011
  48. 48. 发 论热 对 http://www.slideshare.net/kejun/ss-9015786http://www.flickr.com/photos/kejun/6332927507/in/photostreamFriday, November 11, 2011
  49. 49. 为术 术为 统术 术 术 术 术 术Friday, November 11, 2011
  50. 50. 说 们 ...... HTML5 / CSS 3Friday, November 11, 2011
  51. 51. OOCSS 块 HTML/CSSFriday, November 11, 2011
  52. 52. 预编译 CSS/CSS3渐渐变 级语 ......Friday, November 11, 2011
  53. 53. 应 发 础 ......Friday, November 11, 2011
  54. 54. “ 顺 ” 顺 http://site.douban.com/shengyinsuipian/?s=2629Friday, November 11, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×