Team_Share_090510_Must_or_May

843 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
843
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Team_Share_090510_Must_or_May

  1. 1. 应当,可以 无语
  2. 2. 应当 破坏用户习惯 断裂用户依赖 有碍用户体验
  3. 3. 可以 可以变通的 可以提升的 可以妥协的
  4. 4. 圆角 CSS3 Draft 的新特征: .radius‐s { border‐radius:8px; } .radius‐s‐piece { border‐radius:8px 8px 8px; } .radius‐s‐fragile { border‐radius‐top‐left:8px; border‐radius‐top‐right:8px; border‐radius‐bottom‐left:8px; border‐radius‐bottom‐right:8px; }
  5. 5. 现代浏览器(Modern Browser) Firefox,Safari,Chrome: .radius‐i { ‐moz‐border‐radius:8px; ‐webkit‐border‐radius:8px; /*‐khtml‐border‐radius:8px;*/ }
  6. 6. Internet Explorer 6(above),Opera images/ style.css demo.htm .ex‐border‐t { <div class=“outer”> /*blah blah*/ <div class=“inner”>blah</div> } </div> .outer { <div class=“entity”> /*blah blah*/ <span class=“ex‐border‐t”></div> } </div>
  7. 7. Internet Explorer 6,7 VML = Vector Markup Language <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;  xmlns:v=quot;urn:schemas‐microsoft‐com:vmlquot;> <v:roundrect style=quot;zoom:1;margin:20px;width:300px;height:200px;quot;  fillcolor=quot;#000quot; strokecolor=quot;#f00quot;></v:roundrect> <style style=“text/css”> v:* {behavior:url(#default#VML);} </style>
  8. 8. 按钮,类按钮 Compute Style (button , input) Custom Style (button , input) ! button {/*blah blah*/} button.hover {/*blah blah*/} button.active {/*blah blah*/}
  9. 9. Internet Explorer 6,7 Style.css button.btn‐status‐over { /*blah blah*/ } button.btn‐status‐click { /*blah blah*/ } Action.js el.[‘onmouseover’] = function() { /* blah blah */ }; el.[‘onclick’] = function() { /*blah blah*/ };
  10. 10. 透明 .opacity‐s { opacity:.3; } .opacity‐draft { rgba(0,0,0,0.3) ! } .opacity‐i { filter:alpha(opacity=30); }
  11. 11. 表单元素 1, <textarea>,cols,rows 2, <select>,border 3, … 4, nice-form.html
  12. 12. <textarea> <p><textarea name=quot;quot; rows=quot;8quot; cols=quot;35quot; class=quot;ex‐margin  ex‐fix‐flowquot;>confuse</textarea></p> <p><textarea name=quot;quot; rows=quot;8quot; cols=quot;35quot; class=quot;ex‐margin  fixw100pquot;> confuse </textarea></p> Style.css .fixw600 { width:600px; }
  13. 13. <select> 1,Border问题 2,Select宽度自适应问题 3,Select等级问题
  14. 14. 安全的字体 Windows XP: Arial,Verdana,Tohama…+宋体,明体 Windows Vista: Arial,Verdana,Tohama,Segoe UI…+宋体,微软雅黑,微软正 黑 Leopoard:Helvetica,Lucida,Tohama,华文黑体,华文细黑 Linux:? @font‐face { font‐family:tohama; src:url(tohama.ttf); } ! ! http://devfiles.myopera.com/articles/593/webfonts.html
  15. 15. The End

×