提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
本界面采用表格及表单标签完成。
提示：以下是本篇文章正文内容，下面案例可供参考
一、界面展示
二、界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿会员登陆界面</title>
<style>
table {
padding: 0;
margin: 50px auto;
}
table tr th {
font-size: 20px;
color: #4d5aa1;
}
.img input{
width: 90px;
height: 40px;
}
a {
color: rgb(56, 152, 56);
}
a:visited {
color: #9195ab;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<form action="#" method="get" name="会员登陆">
<table width="400" height="300">
<tr>
<th colspan="2" class="title">会员登陆</th>
</tr>
<tr>
<td>登录账号</td>
<td><input type="text" name="登录账号" placeholder="邮箱/ID/手机号"></td>
</tr>
<tr>
<td><label for="pwd">密码</label></td>
<td><input id="pwd" type="password" name="密码" placeholder="密码">
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked>两周内自动登录</td>
</tr>
<tr>
<td></td>
<td class="img"><input type="image" src="img/R-C.png" width="573" height="291"><a href="#" alt="忘记密码" target="_blank">忘记密码</a></td>
</tr>
<tr>
<td>其他账号登陆</td>
<td><a href="#" alt="qq" target="_blank">qq登录</a> <a href="#" alt="微博" target="_blank">微博登录</a> <a href="#" alt="百度" target="_blank">百度账号</a></td>
</tr>
<tr>
<td></td>
<td><a href="#" alt="注册会员" target="_blank">还不是会员？立即注册</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>三、代码简述
1.首先用div盒子标签将内容框起来，然后加入表单域form，最后在table大标签里些写内容
2.table结构如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>在table结构中对应插入需要的元素
3.表单元素（详细的会在笔记中呈现）
4.style中用css修改格式，包括整体内容居中：margin：50px auto；a标签的样式等
因为使用的是表格格式，所以不用担心元素对齐问题。
总结
表格得用法为我们的界面书写带来了更大得提升，一起用起来吧！
扫一扫
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
