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内联框架元素(

posted @ 2025-04-14 15:16  icui4cu  阅读(8)  评论(0)    收藏  举报