ice world

There is nothing too difficult if you put your heart into it.
posts - 104, comments - 103, trackbacks - 0, articles - 0
最近经常要调整系统中的一些页面,虽然不是专业的美工,但也要略知一二才能应付得了。

例一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<style type="text/css">
<!--
body
{
margin
: 0px;
}
//
-->
</style>
</head>
<body>
<table height="100%" width="100%" cellSpacing="0" cellPadding="0"
border
="2" bordercolor="black">
<tr>
<td height="100%" width="200px" bgcolor="red">

</td>
<td height="100%" width="10px" bgcolor="green">

</td>
<td height="100%" width="100%" bgcolor="blue">

</td>
</tr>
</table>
</body>
</html>

上面的效果为整个页面呈现蓝色,看起来没什么奇怪的,因为第三个td设置了宽度为100%,所以前两个td的宽度自然被挤没了。只要把红色的100%去掉留空,或者干脆不写宽度,那么正是想看到的结果,第三个td占用剩余的文档宽度。

例二:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<style type="text/css">
<!--
body
{
margin
: 0px;
}
//
-->
</style>
</head>
<body>
<table height="100%" width="100%" cellSpacing="0" cellPadding="0"
border
="2" bordercolor="black">
<tr>
<td height="200px" width="100%" bgcolor="red">

</td>
</tr>
<tr>
<td height="100px" width="100%" bgcolor="green">

</td>
</tr>
<tr>
<td height="100%" width="100%" bgcolor="blue">

</td>
</tr>
</table>
</body>
</html>

这次table改为三行,宽度都为100%,三个tr分整个文档的高度,第三个td的高度100%,根据例一的经验,第三个tr应该会占据其余两个tr的 高度,也就是和例一一样的效果,满屏蓝色。但是结果却不是想象中的那样。接着把100%换为空串或去掉高度的设置,效果都一样。这不能用什么来解释,只能 记住,这就是td设置高度和宽度的差别。


只有注册用户登录后才能发表评论。


网站导航: