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

永不止步的“重构”

on

  • 4,175 views

 

Statistics

Views

Total Views
4,175
Views on SlideShare
4,166
Embed Views
9

Actions

Likes
35
Downloads
304
Comments
2

1 Embed 9

http://a0.twimg.com 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    永不止步的“重构” 永不止步的“重构” Presentation Transcript

    • “ ” 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 实现 视觉 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 +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> 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
    • 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:132pxFriday, 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>10Friday, 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/photostreamFriday, November 11, 2011
    • 发 论热 对 http://www.slideshare.net/kejun/ss-9015786http://www.flickr.com/photos/kejun/6332927507/in/photostreamFriday, November 11, 2011
    • 为术 术为 统术 术 术 术 术 术Friday, November 11, 2011
    • 说 们 ...... HTML5 / CSS 3Friday, November 11, 2011
    • OOCSS 块 HTML/CSSFriday, November 11, 2011
    • 预编译 CSS/CSS3渐渐变 级语 ......Friday, November 11, 2011
    • 应 发 础 ......Friday, November 11, 2011
    • “ 顺 ” 顺 http://site.douban.com/shengyinsuipian/?s=2629Friday, November 11, 2011