• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,921
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
310
Comments
2
Likes
35

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