您的位置：首页 > 其它

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

2015-05-16 20:16 381 查看
布局使用的表格<table></table>

table表格可以放置背景图：

布局前可以给border加边界。

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

设计思路：

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



代码：

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

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

<table border=0px  width="540px" height="300px" background="mail.jpg">
<tr height="60px" ><td > </td><td> </td></tr>
<tr ><td width=230px> </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>密 码：</td><td><input type="password" name="pwd" /></td></tr>
<tr align="center"><td colspan="2"><input type="submit" value="登陆邮箱" />  <input type="reset" value="重新填写" /></td></tr>
<tr align="center"><td colspan="2"><a href="">找回密码</a>  <a href="">注册用户</a></td></tr>
</form>
</table>

</td></tr>
<tr><td> </td><td> </td></tr>
</table>

</td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>

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


效果图去除border前：





效果图去除border后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航