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 永不止步的“重构”

Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
Andrei Zyuzikov
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1
Duda Dornelles
 
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
Maurício Linhares
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
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
Ammar WK
 
Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDB
greach_es
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
StarTech Conference
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
Caridy Patino
 
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
Sencha
 

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

前端基础架构的实践和思考
前端基础架构的实践和思考前端基础架构的实践和思考
前端基础架构的实践和思考Kejun Zhang
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
Kejun Zhang
 
响应性设计和开发
响应性设计和开发响应性设计和开发
响应性设计和开发
Kejun Zhang
 
LSM实践
LSM实践LSM实践
LSM实践
Kejun Zhang
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
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

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
ThomasParaiso2
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 

Recently uploaded (20)

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 

永不止步的“重构”

  • 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