09 使用table布局 设计企业邮箱登陆界面

布局使用的表格<table></table>

table表格可以放置背景图:

布局前可以给border加边界。

布局完成后再将border边界去除。

设计思路:

一共使用了3个table元素,使table中表格的子元素也可以嵌套table

代码:

<html>
<head>
<title>企业邮箱</title>
</head>
<body>
<table  width="100%" border=0px>

<tr height="150px"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td width="350px">&nbsp;</td><td>

<table border=0px  width="540px" height="300px" background="mail.jpg">
<tr height="60px" ><td >&nbsp;</td><td>&nbsp;</td></tr>
<tr ><td width=230px>&nbsp;</td><td>

<!--用form包起来-->

<table height="100%" border=0px >
<form action="main.html" method="post">
<tr ><td>用户名:</td><td><input type="text" name="username" /></td></tr>
<tr ><td>&nbsp;码:</td><td><input type="password" name="pwd" /></td></tr>
<tr align="center"><td colspan="2"><input type="submit" value="登陆邮箱" />&nbsp;&nbsp;<input type="reset" value="重新填写" /></td></tr>
<tr align="center"><td colspan="2"><a href="">找回密码</a>&nbsp;&nbsp;<a href="">注册用户</a></td></tr>
</form>
</table>


</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

</table>
</body>
</html>

效果图去除border前:

效果图去除border后:

原文地址:https://www.cnblogs.com/super90/p/4508556.html