当当网注册页面

已于 2022-11-27 14:27:08 修改
阅读量602 收藏 2
点赞数 2
文章标签： 网页设计 注册流程 用户体验 表单验证 电商网站
于 2022-11-27 11:46:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/128062407
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
  <style>
    .div2>label{
      display: inline-block;
      width: 100px;
    }
    .div2{
      margin-top: 10px;
    }
  </style>
</head>
<body >
<div  style="width:60%;margin-left: 20%">
  <!--页面头信息-->
  <div>
    <div style="background-image: url('img/register_tag_right.gif');width: 100%;height: 60px">
      <img style="margin-top: 10px;margin-left: 30px" src="img/logo.gif">
      <span style="float: right;line-height: 60px;margin-right: 30px"><a href="#">首页</a>|<a href="#">商品展示区</a>|<a href="#">购物车</a>|<a href="#">登录</a> </span>
    </div>
  </div>
  <!--操作步骤导航-->
  <div style="margin-top: 15px">
    <div style="background-image: url('img/register_tag_left.gif');display: inline-block;float:left;width: 34%;height: 33px;color: chocolate;text-align: center">填写注册信息</div>
    <div style="background-image: url('img/register_tag_mid.gif');display: inline-block;float:left;width: 34%;height: 33px;text-align: center">2·邮箱验证</div>
    <div style="background-image: url('img/register_tag_right.gif');display: inline-block;float:left;width: 32%;height: 33px;text-align: center">3·完成注册</div>
  </div>
  <!--注册说明-->
  <div>
    <img style="margin-left: 100px;margin-top: 30px" src="img/register_pic_01.gif">
    <div style="display: inline-block;margin-left: 5px">
      <h3>HI,欢迎注册当当网！尽享多重优惠服务。</h3>
      <p style="color: red">您所提供的资料不会做其他用途，敬请安心填写</p>
    </div>
    <div>..............................................................................................................................................................................................................................................</div>
  </div>
  <!--注册页面-->
  <div style="width: 100%;">
    <div  style="margin-top: 30px;margin-left: 30%">
      <form action="">
        <div class="div2">
          <label>Email地址：</label><input type="email" required placeholder="输入邮箱">
        </div>
        <div class="div2">
          <label>设置昵称：</label><input type="text" required placeholder="输入昵称">
        </div>
        <div class="div2">
          <label>设置密码：</label><input type="password" required placeholder="密码">
        </div>
        <div class="div2">
          <label>输入密码：</label><input type="password" required placeholder="密码">
        </div>
        <div style="margin-top: 10px;">
          <label style="display: inline-block;width: 100px;">性别：</label>
          <input type="radio" name="sex" checked="checked" value="1"/><label>男</label>
          <input type="radio" name="sex" value="0"/><label>女</label>
        </div>
        <div style="margin-top: 10px;">
          <label style="display: inline-block;width: 100px;">所在地区：</label>
          <select>
            <option>请选择省份/城市</option>
          </select>
          <select>
            <option>请选择城市/地区</option>
          </select>
        </div>
        <div style="margin-top: 30px">
          <img style="margin-left: 15%" src="img/register_btn_out.gif">
        </div>
      </form>
    </div>
  </div>
  <!--页面尾部-->
  <div>
    <div>
        <span>Copyfight(c)当当网 2004-2009， All Rights Reserved
            <img src="img/validate.gif"/>
            京ICP证041189号 音像制作经营许可证 京音网8号
        </span>
    </div>
  </div>
</div>
</body>
</html>

qianmingmaoyao
关注
【课设】Web前端-当当网企业用户注册页面设计
走向CTO的路上...
09-01 761
作为企业网站的一部分，用户注册页面的设计对于企业的用户体验和品牌形象有着至关重要的影响。因此，本文旨在探讨Web前端开发技术在企业用户注册页面设计中的应用，并以当当网企业用户注册页面为例，进行设计和开发。本文的设计目的是通过应用Web前端开发技术，实现当当网企业用户注册页面的优化和改进，提高用户体验和企业品牌形象。数据验证：利用前端技术对用户输入的数据进行验证，并给出相应的提示和错误信息，减少用户注册过程中可能遇到的问题。交互设计：通过交互设计，提高用户与网站的互动性和体验感，增强用户黏性，促进用户留存。
当当网注册页面html源代码,当当网HTML源代码
weixin_35876682的博客
06-03 1679
【实例简介】上课时做的一个小项目，当当网的实现，挺好玩的，希望大家把它完善一下【实例截图】【核心代码】bf03a50f-dde2-4ae6-8084-577afb0c18fa└── 当当网├── npaliedit.exe└── T46当当网├── dang│ ├── 110715_tonglan_960.gif│ ├── 20178848L.jpg│ ├── 20226100-1_t...
当当网注册页面HTML,当当网.html
weixin_42110469的博客
06-03 992
* {margin: 0;padding: 0;}a {text-decoration: none;}li {display: inline-block;}body {width: 1366px;font-size: 14px;color: black;}img{vertical-align: middle;}.all {width: 960px;margin: 0 auto;}.li1 {hei...
当当网新用户注册界面——界面源码
穆雄雄的博客
10-30 1546
&lt;strong&gt;&lt;span style="font-size:32px;color:#ff9966;"&gt;所有用到的图片都已上传，请在&lt;a target=_blank href="http://download.csdn.net/detail/qq_34137397/9667142"&gt;这里&lt;/a&gt;下载&lt;/span&gt;&lt;/
当当网新用户注册界面——CSS代码
穆雄雄的博客
10-31 981
&lt;strong&gt;&lt;span style="font-size:32px;color:#ff9966;"&gt;所有用到的图片都已上传，请在&lt;a target=_blank href="http://download.csdn.net/detail/qq_34137397/9667142"&gt;这里&lt;/a&gt;下载&lt;/span&gt;&lt;/
当当网注册页面网页作品
01-25
学习作品《当当网注册页面》帮助页面，北大青鸟项目实战2
练习-制作当当网注册页面.zip
12-16
在本项目中，“练习-制作当当网注册页面.zip”是一个包含资源的压缩包，用于指导用户学习如何设计和创建一个类似于当当网的在线注册页面。制作这样的页面需要掌握前端开发的基础知识，包括HTML、CSS和JavaScript。...
当当网完整项目、包括js、css、html
11-05
在项目中，CSS文件可能包含当当网页面的颜色方案、字体、布局、响应式设计等内容。通过学习CSS，开发者可以理解如何使页面美观、易读，并适应不同的设备和屏幕尺寸。此外，CSS预处理器如Sass或Less也可能被使用，...
html+css静态页面当当网案例
07-21
3. **导航栏**：当当网的页面通常有一个顶部导航栏，这可以通过`<nav>`元素实现，包含链接到其他页面的`<a>`元素。 4. **段落与标题**：HTML提供了`<h1>`到`<h6>`的一系列标题元素，以及`<p>`元素来组织文本内容。 ...
当当网注册界面
11-12
关于div+css布局的问题，关于div+css布局的问题，关于div+css布局的问题，关于div+css布局的问题，
自己设计的当当网
12-13
自己设计的当当网和原版不同，用到了js、css，注册，登陆、主页、购物车页面
当当网全套源码(附带邮箱验证功能)
03-18
1.项目介绍 典型电子商务系统（在线购物平台）。模拟了当当系统部分功能。 2.功能需求 1）用户管理模块（3天）user 实现登录、注册功能 2）产品浏览模块（2天）main 实现主界面和类别浏览功能 3）购物车模块（1.5天）cart 实现购买、变更数量、删除等功能 4）生成订单模块（1.5天）order 订单确认、填写送货地址、生成订单功能 3.技术应用 1）技术架构 Struts2，JDBC(连接池)，jQuery，Ajax 2）设计思想 MVC和分层设计思想 a.显示层：JSP组件(jQuery,Ajax) b.控制层：Struts2控制器组件、Action组件 c.业务层：Bean组件 d.数据访问层：DAO组件(JDBC) 4.数据库设计 1）数据库导入 create database dangdang; //创建库 use dangdang; //进入dangdang库 set names utf8; //设置连接和发送SQL编码 source 路径/dangdang.sql; //导入sql文件 2）数据表功能 a.d_user（用户信息表） 存储了用户信息，涉及登录和注册功能 b.d_receive_address（收货地址信息表） 存储了收货地址信息，涉及填写送货地址功能 c.d_category（类别信息表） 存储了图书的类别信息，涉及主界面左侧类别菜单功能 d.d_book（图书信息表） 存储了图书的特有信息，涉及产品浏览等功能 e.d_product（产品信息表） 存储了各类型产品的共通信息字段。 f.d_category_product（类别和产品对应关系表） 存储了类别和产品之间包含关系，涉及产品浏览功能 g. d_order（订单信息表） 存储了订单信息，涉及创建订单功能 h. d_item（订单明细表） 存储了订单中所购买的商品信息，涉及创建订单功能。 5. 搭建工程结构 1）引入需要的开发包 struts2开发包 jdbc开发包 dbcp连接池开发包 2）src文件结构 org.tarena.dang.action ：控制层 org.tarena.dang.action.user ：用户模块的action org.tarena.dang.action.main ：产品浏览的action org.tarena.dang.action.order ：订单的action org.tarena.dang.action.cart ：购物车的action org.tarena.dang.service ：业务层 org.tarena.dang.dao ：数据访问层 org.tarena.dang.entity ：实体类 org.tarena.dang.util ：工具类 org.tarena.dang.interceptor ：拦截器 3）struts配置文件结构 web.xml（配置Filter控制器） struts.xml （struts主配置文件） struts-user.xml（用户模块配置文件） struts-main.xml（浏览模块配置文件） struts-order.xml（订单模块配置文件） struts-cart.xml（购物车模块配置文件） 4）WebRoot文件结构 /user/* ：用户管理的JSP /cart/* ：购物车的JSP /order/* ：订单的JSP /main/* ：产品浏览的JSP /common/* ：页眉、页脚等共同JSP /js/* ： 放置js脚本文件 /css/* ：放置css样式文件 /images/* ：放置页面图片文件 /productImages/* ：放置产品图片 -----------------连接池的优点----------------- a.可以管理Connection对象，并且将Connection数量控制在一个安全范围内。提高数据库的访问安全性。 b.连接池中的Connection对象与数据库保持连接状态，避免频繁的建立和销毁连接。 ============用户管理模块============== 1.注册需求 1）表单验证（采用js+Ajax） 邮箱：非空、格式、唯一性(ajax) 昵称：非空、格式 密码：非空、格式 确认密码：非空、与密码一致 验证码：非空、正确性(ajax) 2）将表单信息写入数据表d_user 编写实体类、DAO、Action 3）给用户邮箱发送验证码 引入commons-email.jar,email.jar 参考EmailUtil工具类代码 4）进入邮箱验证页面verify_form.jsp 2.邮箱验证 1）表单验证 验证码：非空、正确性(ajax) 正确后跳转到成功提示界面：window.location = "register_ok.jsp"; 2）Action逻辑 a.利用验证码去d_user检查 b.如果正确，将d_user的is_email_verify字段更新成Y；不正确在verify_form.jsp提示“验证失败” c.跳转到register_ok.jsp 3.用户登录 1）表单验证 邮箱：非空、格式 密码：非空 2）Action逻辑 a.检测Email和密码是否正确，失败回到login_form.jsp提示 b.检测is_email_verify邮箱是否通过验证，未通过进入verify_form.jsp c.更新最后一次登录时间last_login_time和IP地址last_login_ip。 d.将用户信息放入session。 e.都正确进入/main/main.jsp 4.main.jsp页面的页眉部分，显示用户是否登录的状态 如果用户已登录，显示"欢迎XXX,【登出】" 如果用户未登录，显示"【登录】【注册】" 数据库 模型 其实项目目 还有不少缺陷 需要完整、大家可以自行修改、里面有一处bug关于购物车的，注入问题、大家自己找找吧
当当网静态HTML
01-31
当当网静态HTML，需要的可以参考。达内当当网项目。
当当网新用户注册界面——JS代码
穆雄雄的博客
10-31 1300
&lt;span style="color:#ff9966;"&gt;&lt;span style="font-size: 32px;"&gt;&lt;strong&gt;所有用到的图片都已上传，请在&lt;/strong&gt;&lt;/span&gt;&lt;/span&gt;&lt;a target=_blank href="http://downl
Web前端开发技术实验与实践（第3版）储久良编著实训8
热门推荐
weixin_45867761的博客
11-22 2万+
实训8 HTML5基础与CSS3应用 项目22 当当网企业用户注册页面设计 项目23 HTML5结构元素页面布局设计 项目24 H3C-新华三集团行业案例CSS3特效页面设计 项目25 纯CSS3偏光图像画廊
作业10-绑定事件
时刻的慌张的博客
02-13 284
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author&
网页设计（八）HTML5基础与CSS3应用
最新发布
.正函数.的博客
01-16 2157
这是一篇关于HTML5和CSS3的文章。文章详细介绍了HTML5的新特性，如语义化标签和多媒体支持，并探讨了如何正确应用这些特性来构建现代化的网页。同时，文章还深入讲解了CSS3的常用属性和效果，如过渡、动画和阴影，以及如何利用它们为网页增加吸引力和交互性。通过提供实际案例和最佳实践，读者将学习如何将HTML5和CSS3应用到网页设计中，提升设计水平，创造出令人印象深刻的网页作品。
登录界面设计
Reserve_Scale的博客
03-18 4392
效果图： 1、UI界面设计 采用RelativeLayout布局，主要说中间这块输入账号与密码的设计。 分别采用两个LinearLayout，在往里加上控件，调整位置。 那条灰色的线通过控件View实现。 这里首先隐藏了删除按钮的图片，如果输入数据的 时候，自然会显示出来。 android:visibility="invisible" 还有一些自己添加的style与col...
用html+css+js做一个当当网注册页面
06-09
好的，以下是一个简单的当当网注册页面的示例代码： ```html <!DOCTYPE html> 当当网注册页面 body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; } ....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值