SlideShare a Scribd company logo
“            ”
                            Kejun / @kejunz / blog.hikejun.com




Friday, November 11, 2011
05/14/2003


Friday, November 11, 2011
05/14/2003   -   05/2004


Friday, November 11, 2011
7            让    们        ......




                            HTML         结
                            CSS          实现        视觉
                            Javascript        实现   户            为




Friday, November 11, 2011
应   HTML / CSS / Javascript
                            稳       扩




Friday, November 11, 2011
术   术应

                            论        术   规   规则




Friday, November 11, 2011
过   hack
                            仅仅       问题     远远   ......
                                          满




Friday, November 11, 2011
1.    转过       观
                            2.   术     视

                            3.    观




Friday, November 11, 2011
HTML   结   结   UI   +10086




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
Friday, November 11, 2011
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.html

Friday, November 11, 2011
http://site.douban.com/106371/likers/
Friday, November 11, 2011
1. 结
                            2.   读
                            3.
                            4.     稳




Friday, November 11, 2011
<div id=”___”   class=”__”>




Friday, November 11, 2011
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
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:132px




Friday, November 11, 2011
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
<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
Friday, November 11, 2011
.list .pic { float:left; }




Friday, November 11, 2011
.list .pic {      .list .content {
                                      float:left;       float:right;
   .list .pic { float:left; }          width:160px;     width:300px; /* Bad */
                                   }                 }


                               寻




Friday, November 11, 2011
.list .pic {      .list .content {
                                      float:left;       float:right;
   .list .pic { float:left; }          width:160px;     width:300px; /* Bad */
                                   }                 }


                               寻




Friday, November 11, 2011
.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
.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
Friday, November 11, 2011
1    宽                      现

                       2 floats suck. CSSLint warning: floats>10




Friday, November 11, 2011
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
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 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
Floats Suck
                              float box   总   烦......




Friday, November 11, 2011
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
问题
                            时   风险




Friday, November 11, 2011
“ 议”

                                          http://hikejun.com/blog/2011/10/26/   试    /
                                          http://hikejun.com/blog/2010/03/19/       html吗/




http://www.flickr.com/photos/kejun/6332927507/in/photostream

Friday, November 11, 2011
发     论热     对

                                                http://www.slideshare.net/kejun/ss-9015786




http://www.flickr.com/photos/kejun/6332927507/in/photostream

Friday, November 11, 2011
为术       术为
                              统术      术
                                 术   术
                             术            术




Friday, November 11, 2011
说   们      ......
                            HTML5 / CSS 3




Friday, November 11, 2011
OOCSS
                             块   HTML/CSS




Friday, November 11, 2011
预编译
                            CSS/CSS3渐渐变   级语   ......




Friday, November 11, 2011
应       发
                                础   ......




Friday, November 11, 2011
“
                            顺                                                    ”
                                                         顺
                                http://site.douban.com/shengyinsuipian/?s=2629




Friday, November 11, 2011

More Related Content

Similar to 永不止步的“重构” (9)

Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
 
Layer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigationLayer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigation
 
Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDB
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
 
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updatesExt JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
 

More from Kejun Zhang

More from Kejun Zhang (6)

前端基础架构的实践和思考
前端基础架构的实践和思考前端基础架构的实践和思考
前端基础架构的实践和思考
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
 
响应性设计和开发
响应性设计和开发响应性设计和开发
响应性设计和开发
 
F2e @ douban
F2e @ doubanF2e @ douban
F2e @ douban
 
LSM实践
LSM实践LSM实践
LSM实践
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 

永不止步的“重构”

  • 1. ” Kejun / @kejunz / blog.hikejun.com Friday, November 11, 2011
  • 3. 05/14/2003 - 05/2004 Friday, 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 +10086 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.html 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
  • 26. float:left; float:left; width:66px; width:316px; Friday, November 11, 2011
  • 27. position:absolute; margin-left:132px padding-left:132px Friday, 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
  • 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
  • 37. 1 宽 现 2 floats suck. CSSLint warning: floats>10 Friday, 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
  • 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/photostream Friday, November 11, 2011
  • 48. 论热 对 http://www.slideshare.net/kejun/ss-9015786 http://www.flickr.com/photos/kejun/6332927507/in/photostream Friday, November 11, 2011
  • 49. 为术 术为 统术 术 术 术 术 术 Friday, November 11, 2011
  • 50. 们 ...... HTML5 / CSS 3 Friday, November 11, 2011
  • 51. OOCSS 块 HTML/CSS Friday, November 11, 2011
  • 52. 预编译 CSS/CSS3渐渐变 级语 ...... Friday, November 11, 2011
  • 53. 发 础 ...... Friday, November 11, 2011
  • 54. 顺 ” 顺 http://site.douban.com/shengyinsuipian/?s=2629 Friday, November 11, 2011