注册页面的一些记录 - jerrylsxu

php中文网

发布： 2016-05-20 16:50:36

原创

1407人浏览过

注册页面是大多数网站必备的页面，所以很有必要对自己的注册页面做些精心的设计。下面三张图，第一张是注册的展示页面，第二张思维导图就一个简单的逻辑，第三张是通过firebug查看调用的js文件。

注册的展示页面	简单的逻辑	通过firebug查看调用的JS文件

一、给每个输入框写下说明

在用户看到这个输入框的时候，就能非常清晰的明白这个输入框是做啥用的，最大限度的降低他们产生疑惑的可能性。我们需要假设用户毫不了解注册需要输入的内容，随后给他们足够的信息以便帮助他们理解。

二、小图标icon

Icon是增强内容的工具，而且能给访客一个很好的暗示。以前使用小图标都是用图片，用图片的话，很多时候那些对齐、宽度高度搞起来特麻烦，这次我将图标做成字体，操作字体可比操作图片容易很多。可以到国外的一个网站icomoon制作图标字体，不过这个网站打开起来比较慢，需要耐心等待。利用在线资源，接受新思想与新技术，让工作变得越来越简单。

迷你天猫商城

迷你天猫商城是一个基于Spring Boot的综合性B2C电商平台，需求设计主要参考天猫商城的购物流程：用户从注册开始，到完成登录，浏览商品，加入购物车，进行下单，确认收货，评价等一系列操作。作为迷你天猫商城的核心组成部分之一，天猫数据管理后台包含商品管理，订单管理，类别管理，用户管理和交易额统计等模块，实现了对整个商城的一站式管理和维护。所有页面均兼容IE10及以上现代浏览器。部署方式1、项目

查看详情

这些小图标都是从icomoon网站上面导出的。这种方式操作对齐，大小非常方便，不过IE6和IE7不支持选择器before（关于选择器的浏览器兼容可以参考这里），所以在这两个浏览器中将不能显示这个图标。

<span style="color: #0000ff;"><</span><span style="color: #800000;">font </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ficomoon icon-signup"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">font</span><span style="color: #0000ff;">></span>注册新用户

登录后复制

<span style="color: #800000;">@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> 'icomoon'</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;">url('fonts/icomoon.eot?-fl11l')</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;">url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
        url('fonts/icomoon.woff?-fl11l') format('woff'),
        url('fonts/icomoon.ttf?-fl11l') format('truetype'),
        url('fonts/icomoon.svg?-fl11l#icomoon') format('svg')</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;
}<span style="color: #800000;">
.ficomoon</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">'icomoon'</span>;}<span style="color: #800000;">
.icon-print:before </span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;"> "\e601"</span>}

登录后复制