永不止步的“重构”

“ ” 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

1. 现发设计HTML结 <span class=”dotline”></span>, <span class=”blank12”></span> 2. 样彻 <div class=”lay_col bg4 clearﬁx”>, <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

ﬂoat:left; ﬂoat: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> ﬂoat: left; <li> margin-right:10px; <div class=”pic”> } <a...><img...></a> </div> .list .content { <div class=”content”>...</div> overﬂow: hidden; </li> zoom: 1; ... } </ul> </div>Friday, November 11, 2011

.list .pic { ﬂoat: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 */ } } 寻发BFC .list .content { overflow: hidden; zoom: 1; /* for IE6/7*/ }Friday, November 11, 2011

1 宽现 2 ﬂoats suck. CSSLint warning: ﬂoats>10Friday, November 11, 2011

inline-block ﬂoat .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

.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 ﬂoat 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.ﬂickr.com/photos/kejun/6332927507/in/photostreamFriday, November 11, 2011

发论热对 http://www.slideshare.net/kejun/ss-9015786http://www.ﬂickr.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

永不止步的“重构”

by kejun on Nov 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 9

Statistics

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