5.综合案例
本章目标
- table布局实现人事管理系统后台
本章内容
一、table布局实现人事管理系统后台
通过表格可以实现布局,但优化调整比较麻烦
1、登录页面
1.1、效果图
1.2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="static/css/mycss.css">
<body>
<form action="index.html" method="get">
<table class="table">
<tr>
<td>
<h1>欢迎回来</h1>
</td>
<td>没有账号,<a href="#">前往注册</a></td>
</tr>
<tr>
<td class="td">手机号:</td>
<td><input class="input" type="text" name="tel" id=""></td>
</tr>
<tr>
<td class="td">密码:</td>
<td><input class="input" type="password" name="password" id=""></td>
</tr>
<tr>
<td class="td">验证码:</td>
<td><img src="static/images/captcha.jpg">
<input class="input" style="width: 166px;" type="text" name="validate" id="">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="登录" class="btn">
</td>
</tr>
<tr>
<td colspan="2">
忘记密码? <a href="#">前往重置 </a>
</td>
</tr>
</table>
</form>
</body>
</html>
2、iframe标签
内联框架 HTML内联框架元素(
本文来自博客园,作者:icui4cu,转载请注明原文链接:https://www.cnblogs.com/icui4cu/p/18824914