Contenu connexe
Similaire à 永不止步的“重构” (9)
永不止步的“重构”
- 1. “ ”
Kejun / @kejunz / blog.hikejun.com
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
- 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
- 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
- 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