註冊頁面的一些記錄

来源:http://www.cnblogs.com/shouce/archive/2016/04/25/5429278.html
-Advertisement-
Play Games

註冊頁面是大多數網站必備的頁面,所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖,第一張是註冊的展示頁面,第二張思維導圖就一個簡單的邏輯,第三張是通過firebug查看調用的JS文件。 註冊的展示頁面 簡單的邏輯 通過firebug查看調用的JS文件 一、給每個輸入框寫下說明 在用戶看到這個輸 ...


註冊頁面是大多數網站必備的頁面,所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖,第一張是註冊的展示頁面,第二張思維導圖就一個簡單的邏輯,第三張是通過firebug查看調用的JS文件。

 

註冊的展示頁面 簡單的邏輯 通過firebug查看調用的JS文件

 

一、給每個輸入框寫下說明

在用戶看到這個輸入框的時候,就能非常清晰的明白這個輸入框是做啥用的,最大限度的降低他們產生疑惑的可能性。我們需要假設用戶毫不瞭解註冊需要輸入的內容,隨後給他們足夠的信息以便幫助他們理解。

 

二、小圖標icon

Icon是增強內容的工具,而且能給訪客一個很好的暗示。以前使用小圖標都是用圖片,用圖片的話,很多時候那些對齊、寬度高度搞起來特麻煩,這次我將圖標做成字體,操作字體可比操作圖片容易很多。可以到國外的一個網站icomoon製作圖標字體,不過這個網站打開起來比較慢,需要耐心等待。利用線上資源,接受新思想與新技術,讓工作變得越來越簡單。

這些小圖標都是從icomoon網站上面導出的。這種方式操作對齊,大小非常方便,不過IE6和IE7不支持選擇器before(關於選擇器的瀏覽器相容可以參考這裡),所以在這兩個瀏覽器中將不能顯示這個圖標。

<font class="ficomoon icon-signup"></font>註冊新用戶
複製代碼
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-fl11l');
    src: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');
    font-weight: normal;
    font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-print:before {content: "\e601"}
複製代碼

 

三、輸入框還可輸入的字元數

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、拋一塊問題磚(display: block)先看現象: 分析HTML代碼結構: 分析CSS代碼樣式: 這裡沒有給最外層的DIV.outer 設置高度,但是我們知道如果它裡面的元素不浮動的話,那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後,就出現了一下影響: (1):背景不能顯示 (2): ...
  • //參數為消息提示層對應的對象,通常為表單里的對象 //特別註意:當使用擴展方法里的type=radio或者type=checkbox時,因為當時設置消息提示層的對象為obj.parentElement.parentElement,所以傳入的對象也應為其上2級父節點 function hiddenM ...
  • CSS3作為新興的前端技術可以實現很多複雜變化的效果,比如文字描邊。 這裡主要用到text-shadow屬性,顧名思義就是為文字加上陰影效果。例: 其中:x位移和y位移表示陰影相對文字的偏移值,可以為負值。 思路其實很簡單:對四個方向都作出模糊程度為零的1px陰影。 原則上,text-shadow支 ...
  • 第七章是入門篇的倒數第二篇文章了,明天整個APP將進入收官。 本節教程主要要教會大家使用二維碼掃描和用do_WebView組件加在html頁面。 導入項目 do_WebView組件 掃描功能 自定義事件 將要學習的demo效果圖如下所示 1. 導入完整項目 本節示例demo請參考下載地址,可以導入到 ...
  • 隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動互聯應用開發也越來越受到人們的重視,用html5開發移動應用是最好的選擇。然而,每一款手機有不同的解析度,不同屏幕大小,如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢?學習html5 viewport的 ...
  • 協議 WebSocket是一種基於TCP之上的客戶端與伺服器全雙工通訊的協議,它在HTML5中被定義,也是新一代webapp的基礎規範之一。 它突破了早先的AJAX的限制,關鍵在於實時性,伺服器可以主動推送內容 到客戶端!可能的應用有:多人線上游戲,即時聊天,實時監控,遠程桌面,新聞伺服器等等。 對 ...
  • 最近在項目中使用jQuery.query.js這個插件進行頁面間URL傳值,遇到如下兩點問題: 1. 參數中存在空格時取到的值中空格被替換為加號:+ 2. 當參數某個key的value不存在時,獲取到的value並不是空/null 而是true。 在網上找到了個解決方案,可以參考下(是否有其他副作用 ...
  • 一、顯示信息的命令 console.log(); //控制台輸入 網頁中不會輸出 console.info(); //一般信息 console.debug(); //除錯信息 console.warn(); //警告提示 console.error(); //錯誤提示 “console.log(); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...