Demo5：简单登录界面

最新推荐文章于 2023-08-26 23:10:44 发布

ljl_web

最新推荐文章于 2023-08-26 23:10:44 发布

阅读量646

点赞数 1

分类专栏： HTML入门 Demo 文章标签：登录界面

本文链接：https://blog.csdn.net/ljl_web/article/details/50755788

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

简单登录界面的实现

实现效果

这里写图片描述

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
 </head>

 <body>
   <header>
    <h1>
        <img src="logo.png" width="180px" height="80px" />
        欢迎登录
    </h1>
   </header>
   <section>
       <form method="post">
        <table align="center" border="1px" cellspacing="0px">
            <tr>
                <td rowspan="8">
                    <img src="xixi.png" width="450px" height="380px" />
                </td>
                <td width="360px">用户名/邮箱</td>
            </tr>
            <tr>
                <td>
                    <input name="txtUserName" value="xxx@xxx.com" />
                </td>
            </tr>
            <tr>
                <td>密码</td>
            </tr>
            <tr>
                <td>
                    <input type="password" name="txtPwd" value="1234567" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="chkAuto" value="yes" id="chkAuto" /><label for="chkAuto">自动登录</label>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit" value="登录" 
                    />
                    <input type="reset" value="重填" />
                </td>
            </tr>
            <tr>
                <td>使用<mark>百度</mark>合作账号登录</td>
            </tr>
            <tr>
                <td align="right">
                    <input name="counter" type="radio" value="百度" checked />百度
                    <input name="counter" type="radio" value="vollage" />QQ
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <a href="#">
                        <img src="btn_register.jpg" />
                    </a>
                </td>
            </tr>
        </table>
       </form>
   <section>
   <footer>
    <br><br>
    <p align="center">
        关于我们|联系我们|人才招聘|商家入驻|广告服务
    </p>
   </footer>
 </body>
</html>

ljl_web

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Demo5：简单登录界面

简单登录界面的实现实现效果代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> </head> <body> <header> <h1> <img src="logo.png" width="180px" height="80px" /
复制链接

扫一扫