查看: 1597|回复: 1

前端网页表格修饰登录界面

[复制链接]

10

主题

11

帖子

70

积分

注册会员

Rank: 2

积分
70
发表于 2021-12-30 11:58:02 | 显示全部楼层 |阅读模式
本帖最后由 胡汉九 于 2021-12-30 13:27 编辑


前端网页表格修饰登录界面
                                                                                                     代码来源:风火轮技术团队

1.网页界面的模板:

捕获.PNG

2.实现的思路:

(1)首先我们需要明白我们需要实现的界面是什么样的界面表格
(2)我们在设计好表格时还需要考虑到我们在表格里面需要存放什么样的数据
(3)也就是说我们需要明白我们的项目的需求
(4)根据需求我们可以设计好表格里面了的登录界面如何实现

3.完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>       <!--网址,表格提交到的位置-->
<form action="https://u.unipus.cn/index.html/" method="post">
    <table width="600px" border="1px" cellspacing="0" >
        <tbody>
        <tr height="40px" align="center">
            <td rowspan="4">总体信息</td>
            <td colspan="2">个人信息登录表单</td>
        </tr>

        <tr height="40px" >
            <td align="right">用户名:</td>
            <td>
                <input type="text" name="账号"><!--type需要有name属性-->
            </td>
        </tr>
        <tr height="40px" >

            <td align="right">密码:</td>
            <td><input type="password" name="密码"></td>
        </tr>
        <tr height="40px">
            <td colspan="2" align="center" >
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td>
        </tr>
        </tbody>

    </table>
</form>

</body>
</html>







回复

使用道具 举报

10

主题

11

帖子

70

积分

注册会员

Rank: 2

积分
70
 楼主| 发表于 2021-12-30 13:35:53 | 显示全部楼层
视频链接:https://www.bilibili.com/video/BV1Qa41167ea/
详情请关注:风火轮技术团队微信公众号
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|风火轮WIKI|手机版|深圳风火轮团队 ( 粤ICP备17095099号

GMT+8, 2022-5-20 13:04 , Processed in 0.063725 second(s), 28 queries .

快速回复 返回顶部 返回列表
 
【客服1】 商务合作 15289193
【客服2】 业务洽谈 13257599
【客服3】 售前咨询 510313198
【邮箱】
smartfire@smartfire.cn