18910140161

Html

首页 >> 前端开发 >> Html

Html学习之十九（表格与表单学习--邮箱注册页面设计）

顺晟科技

2022-09-15 20:43:08

42

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>邮箱注册</title>
        <style type="text/css">
            h1{
                border: 1px solid white;
                width: 100%;
                height: 50px;
                background: lightblue;
                color: white;
                padding-top: 10px;
                font-family: "微软雅黑";
            }
            .a{
                border: 1px solid black;
                margin: 0px;
                /*background-color: darkgray;*/
                font-family: verdana,sans-serif;
                font-size: 14px;
                padding: 10px;
                font-weight: bold;
                text-decoration: none;
                cursor: default;
                text-align: center;
                outline: none;
                
            }
            .txt-tips{
                font-family: verdana,sans-serif;
                text-align: left;
                line-height: 8px;
                color: darkgray;
                font-size: smaller;
            }
            .a1,.a2,.a3{
                font-weight: bold;
                color: black;
                cursor: default;
                /*display: block;*/
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                outline: none;
                list-style: none;
                font-family: verdana,sans-serif;
            }
            .d{
                border: solid darkgray 1px;
                color: #555;
                font-size: 14px;
                text-align: left;
                font-family: verdana,sans-serif;
                line-height: 28px;
            }
        </style>
    </head>
    <body>
        <form action="#" method="post">
            <h1>欢迎注册无限容量的网易云邮箱！邮箱地址可以登录其它网易云旗下产品。</h1>
            <br />
            <br />
            <a tabindex="-1" class="a1" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;">
                <span class="a">注册字母邮箱</span>
            </a>
            <a tabindex="-1" class="a2" style="text-decoration: none;" onclick="_Global.main.turnOn(null,\'tab\');return false;" href="#;">
                <span class="a">注册手机号码邮箱</span>
            </a>
            <a tabindex="-1" class="a3" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;">
                <span class="a" >注册VIP邮箱</span>
            </a>
            <br />
            <br />
            *邮件地址&nbsp;&nbsp;
            <input type="email" value="" />@
            <select size="1">
                <option>163.com</option>
                <option>163.com</option>
                <option selected="selected">163.com</option>
            </select>
            <br />
            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
            <br />
            <br />
            *密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="password" value=""/>
            <br />
            <span class="txt-tips">6~16个字符，区分大小写</span>
            <br />
            <br />
            *确认密码&nbsp;&nbsp;
            <input type="password" value=""/>
            <br />
            <span class="txt-tips">请再次填写密码</span>
            <br />
            <br />
            *手机号码&nbsp;&nbsp;
            <input type="tel" value=""/>
            <br />
            <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
            <br />
            <br />
            *验证码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" autocomplete="off" value=""/>
            <br />
            <span class="txt-tips">请填写图中字符，不区分大小写</span>
            <br />
            <img width="120" height="50"style="cursor: pointer;" alt="验证码" src="../img/call.jpg">
            <a tabindex="-1"   href="javascript:void(0);">看不清楚？换张图片</a>
            <br />
            <br />
            <span class="d">免费获取验证码</span>
            <br />
            *短信验证码
            <input  type="text" autocomplete="off">
            <br />
            <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
            <br />
            <br />
            <input tabindex="-1"  type="checkbox" checked="checked">同意
            <a tabindex="-1" href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a>和
            <a tabindex="-1" href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a>
            <br />
            <br />
            <input type="submit" value="立即注册">
        </form>
    </body>
</html>

结果：

 

上一篇：vs2013 中如何如何让html页 下一篇：验证HTML CSS JavaScr
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！