今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了。
总体设计思路:整个页面设计可以分为主体(content)、头部(content-header)、内容(content-body)三个部分组成,其中是主体是根部,包含了头部和内容,头部和内容各自下设两个盒子(div)。
1、最终效果图:
2、代码部分:
(1)HTML代码部分(包含点击头部自动切换登录和注册页):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--主体-->
<section id="content">
<!--头部-->
<div class="content-header clearfix">
<a href="javaScript:;" class="current">我要登录</a>
<a href="javaScript:;" >我要注册</a>
</div>
<!--内容-->
<div class="content-body">
<div class="dom" style="display: block">
<form action="">
<div class="s1">
<h4>账号</h4>
<input type="text" name="user" placeholder="用户名/手机/邮箱">
</div>
<div class="s1">
<h4>密码</h4>
<input type="text" name="pwd" placeholder="请输入密码">
</div>
<div class="s2">
<input type="checkbox">
<span> 记住密码</span>
</div>
<input type="submit" value="登 录" class="btn">
</form>
<div class="dom-footer">
<div class="login-another">
<a href="#">找回密码</a>
<span>|</span>
<span>还没有注