简单小程序：登录页面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

辑导读：移动端产品经理经常会需要绘制APP各页面原型图，那么在绘制页面原型图时，我们需要注意什么？作者与大家分享了一个使用Axure制作实用的验证码登录页面原型，快来一起看一下吧。

一、原型需求

点击获取验证码按钮时手机顶端定时弹出随机验证码

点击获取验证码按钮后，按钮显示倒计时，倒计时自60开始，每秒向后-1，倒计时为0时可手动重新触发

弹出验证码弹窗后，可点击复制验证码按钮，点击后验证码自动按顺序加载至手机页面验证码文本框内，完成加载后跳转至首页

二、效果预览

原型演示地址：https://gduqir.axshare.com

三、制作准备

手动制作或挑选使用手机背景。以下为小编手动绘制手机背景：

绘制任意跳转首页面，以下为小编手动绘制首页：

完成准备后将首页置于空白页下方。

四、制作流程

选择两个文本标签，输入“输入验证码”、“验证码已发送至手机+86 185⭐⭐⭐⭐9905”等文字，可根据需要调整文字内容、大小，布局，色彩等。

文字下方放置6个大小相同的文本框及横线（文本框需分别命名，以便交互时区分）。示例如下：

制作一个验证码弹窗，需注意验证码6个数字部分需加不同矩形框且分别命名（以便交互时区分及随机抽取数字使用）。示例如下：

给验证码弹窗“复制验证码”按钮制作交互（文1等名称是手机背景页面六个文本框的命名，该步骤是为了将验证码弹窗内数字验证码获取至手机页面文本框内，等待是为了有延迟效果，设置页面状态是为了六个文本框验证码都加载完成后将手机首页置顶显示），交互如下：

设置全局变量random_str，该步骤是为了等会验证码弹窗自动抽取数字。

点击验证码弹窗，给6个验证码框增加交互动作，交互动作含义为在页面载入时random_str是0123456789，然后6个验证码文本框分别抽取其中1位数字。抽取的变量为[[random_str.substr(random_str.length*Math.random(),1)]]。

选择一个按钮输入“获取验证码”文字调整大小后，将模块设置为动态面板，在动态面板内增加一个state2，将按钮复制粘贴至state2并修改文字为60（本文中state页面名称错误，理解用意即可）。

在“获取验证码”按钮设置交互动作，该交互是为了点击获取验证码按钮后弹出验证码弹窗，并切换动态面板至倒计时页面，交互如下：

在“60”state页设置交互动作，该交互动作是为了让60每秒向后倒计时-1，=0时文本变为重新获取，点击重新获取后文字变60继续循环。

载入时情形1为：

载入时情形2为：

单击时情形1为：

完成以上操作后，将手机首页输入验证码文本框框线取消，即可完成操作，快来一起试试吧！

本文由 @哪有那么多计较原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

户在网站中的活跃程度是评价网站受欢迎程度的重要标准，正如传统商店注重门面设计的装饰一样，正确设计的门面可以为商店带来大量的流量，吸引更多的顾客。门面就像我们自己的脸，而网站的登录页面就是网站的一张脸，这一点尤为重要。

目前，许多大型网站都将登录页面与网站主页一起设计。由此，我们可以看出登录页面对网站的重要性。一个优秀的登录页面不仅可以提高网站产品的质量，还可以为产品增添独特的气质。登录页面也是网站情感的升华设计，可以提升用户对网站的体验，让网站更贴近用户。那么，登录页面的设计如何为网站赢得更多用户呢？

首先，优雅得体的登录页面设计。我们以Tumblr为例。作为light博客的创始人，它为用户带来了全新的视觉体验。因为它的登录页面没有太多复杂的设计，所以它在视觉上很简单，给人优雅和体面的感觉。它的设计目的是让用户专注于登录，使登录过程更加顺畅，给用户一个非常好的体验。

第二，精致而富有质感的登录页面设计。对于这种设计，我们可以参考icloud。Icloud是苹果提供的同步服务，可以免费为用户提供5g存储空间。你应该知道，icloud登录页面的设计反映了苹果对细节的严格要求。无论是精细的纹理还是细微的阴影，都能反映出细腻的纹理，完美地反映细节。金属光泽可随鼠标指针移动，底部图标可适应分辨率的变化，确保用户对网站的体验。精致而有质感的登录页面给用户带来无与伦比的享受，对网站更有利。因为从细节开始，它可以为用户提供一个充满惊喜的页面。

第三，你可以用一些小而新鲜的插图来装饰。设计师们都知道，插图的表现力在网站建设中是非常明显的，与艺术密切相关。当插图与网站建设相结合时，它将使网站更具吸引力和表现力。因此，许多设计师开始在网站建设中使用插图，尤其是登录页面，这将使登录页面更加生动和温暖。一些小而新鲜的插图可以为登录页面添加很多颜色，吸引用户的注意力，使登录页面更加柔软友好。就像163邮箱的登录页面一样，使用带有故事的大型插图唤起了一代人的记忆，引起了用户的共鸣，让用户找到了自己的目的地。

第四，人文情怀的传达，品牌传播的设计。其实，网站的建设应该以人为本，不仅要保证产品的质量，还要提高艺术水平。登录页面设计是体现人文情怀的最佳页面。例如，在QQ邮箱的登录页面上，每次登录都会看到不同的内容，有时是海子的诗，有时是歌词。设计方法非常简单，主要内容到位，给用户更清晰的引导，在每一个细节的设计中都体现人文情怀。

第五，大型登录框。登录框的设计比传统的登录框更大，给用户非常舒适的感觉，在输入过程中也更愉悦。

第六，简单但不简单的设计。网站的设计风格趋于简洁。登录页面的设计使用了大量空白来突出显示输入框，并将用户的注意力集中在登录上。简单的设计反映出它并不简单。

了解更多

在线咨询

上一篇：HTML问题：如何实现分享URL预览？
下一篇：HTML DOM Input Date 对象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。