- 威望
- 5723 点
- 最后登录
- 2009-9-9
- 贡献
- 2188 点
- 金币
- 670 个
- 经验
- 5970 点
- 注册时间
- 2008-5-21
- 阅读权限
- 80
- 帖子
- 1271
- 主题
- 801
- 精华
- 16
- 积分
- 19464
- UID
- 1
- 积分
- 19464
- UID
- 1
|
演示的代码看这里:
<HTML>
<HEAD>
<TITLE>Vertical Alignment Test</TITLE>
<STYLE>
<!-- BODY {font-family: Verdana, arial, sans-serif;}
SPAN {color: #00dddd; font-family: garamond, serif; }
/* SPANned text is a different color so it is easy to see, and a different font so that the font has, in principle, a different text bottom. */
.base {vertical-align: baseline; }
.middle {vertical-align: middle; }
.subs {vertical-align: sub; }
.sups {vertical-align: super; }
.texttop {vertical-align: text-top; }
.textbot {vertical-align: text-bottom;}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<H2>Vertical Alignment Test</H2>
<P>A paragraph containing
<SPAN CLASS="base">baseline-aligned</SPAN>
text, and also<BR>text that is <SPAN CLASS="middle">middle-aligned</SPAN>, and <BR>text that is <SPAN CLASS="subs">subscripted</SPAN>, and text that is <SPAN CLASS="sups">superscripted</SPAN>, and <BR>text that is <SPAN CLASS="texttop">text-top aligned</SPAN>, and finallytext that is <SPAN CLASS="textbot">text-bottom aligned</SPAN>.That's all, folks!</P>
<P>A paragraph containing:<BR>a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="base">baseline-aligned image, a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="middle">middle-aligned image,and also a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="subs">subscript image, and a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="sups">superscript image,followed by a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="texttop">text-top aligned image,and finally a<IMG SRC="http://club.designbus.cn/attachments/auto/080822/551c93921984b7ed0e027c1fe460dd02.gif" CLASS="textbot">text-bottom aligned image. That's all, folks!</P> </BODY></HTML> |
|
发表于 2008-8-22 16:09
|