Team_Share_090510_Must_or_May

应当

破坏用户习惯
断裂用户依赖
有碍用户体验

可以

可以变通的
可以提升的
可以妥协的

圆角
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;
}

现代浏览器(Modern Browser)
Firefox,Safari,Chrome:
.radius‐i {
‐moz‐border‐radius:8px;
‐webkit‐border‐radius:8px;
/*‐khtml‐border‐radius:8px;*/
}

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>

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>

按钮,类按钮
Compute Style (button , input)

Custom Style (button , input)

!
button {/*blah blah*/}
button.hover {/*blah blah*/}
button.active {/*blah blah*/}

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*/
};

透明
.opacity‐s {
opacity:.3;
}
.opacity‐draft {
rgba(0,0,0,0.3)
!
}

.opacity‐i {
filter:alpha(opacity=30);
}

表单元素
1, <textarea>,cols,rows
2, <select>,border
3, …
4, nice-form.html

<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;
}

<select>
1,Border问题
2,Select宽度自适应问题
3,Select等级问题

安全的字体
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

Team_Share_090510_Must_or_May

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (10)

Team_Share_090510_Must_or_May