Your SlideShare is downloading. ×
0
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
永不止步的“重构”
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

永不止步的“重构”

4,208

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. “ ” Kejun / @kejunz / blog.hikejun.comFriday, November 11, 2011
  • 2. 05/14/2003Friday, November 11, 2011
  • 3. 05/14/2003 - 05/2004Friday, November 11, 2011
  • 4. 7 让 们 ...... HTML 结 CSS 实现 视觉 Javascript 实现 户 为Friday, November 11, 2011
  • 5. 应 HTML / CSS / Javascript 稳 扩Friday, November 11, 2011
  • 6. 术 术应 论 术 规 规则Friday, November 11, 2011
  • 7. 过 hack 仅仅 问题 远远 ...... 满Friday, November 11, 2011
  • 8. 1. 转过 观 2. 术 视 3. 观Friday, November 11, 2011
  • 9. HTML 结 结 UI +10086Friday, November 11, 2011
  • 10. ....................................................Friday, November 11, 2011
  • 11. Friday, November 11, 2011
  • 12. Friday, November 11, 2011
  • 13. Friday, November 11, 2011
  • 14. Friday, November 11, 2011
  • 15. Friday, November 11, 2011
  • 16. Friday, November 11, 2011
  • 17. Friday, November 11, 2011
  • 18. Friday, November 11, 2011
  • 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. http://site.douban.com/106371/likers/Friday, November 11, 2011
  • 21. 1. 结 2. 读 3. 4. 稳Friday, November 11, 2011
  • 22. <div id=”___” class=”__”>Friday, November 11, 2011
  • 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. Friday, November 11, 2011
  • 25. Friday, November 11, 2011
  • 26. float:left; float:left; width:66px; width:316px;Friday, November 11, 2011
  • 27. position:absolute; margin-left:132px padding-left:132pxFriday, November 11, 2011
  • 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. <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. Friday, November 11, 2011
  • 31. .list .pic { float:left; }Friday, November 11, 2011
  • 32. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻Friday, November 11, 2011
  • 33. .list .pic { .list .content { float:left; float:right; .list .pic { float:left; } width:160px; width:300px; /* Bad */ } } 寻Friday, November 11, 2011
  • 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. .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. Friday, November 11, 2011
  • 37. 1 宽 现 2 floats suck. CSSLint warning: floats>10Friday, November 11, 2011
  • 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. Friday, November 11, 2011
  • 40. Friday, November 11, 2011
  • 41. Friday, November 11, 2011
  • 42. Friday, November 11, 2011
  • 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. Floats Suck float box 总 烦......Friday, November 11, 2011
  • 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. 问题 时 风险Friday, November 11, 2011
  • 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. 发 论热 对 http://www.slideshare.net/kejun/ss-9015786http://www.flickr.com/photos/kejun/6332927507/in/photostreamFriday, November 11, 2011
  • 49. 为术 术为 统术 术 术 术 术 术Friday, November 11, 2011
  • 50. 说 们 ...... HTML5 / CSS 3Friday, November 11, 2011
  • 51. OOCSS 块 HTML/CSSFriday, November 11, 2011
  • 52. 预编译 CSS/CSS3渐渐变 级语 ......Friday, November 11, 2011
  • 53. 应 发 础 ......Friday, November 11, 2011
  • 54. “ 顺 ” 顺 http://site.douban.com/shengyinsuipian/?s=2629Friday, November 11, 2011

×