简单制作登录注册页面
在一个网页中,html负责页面布局和内容,css负责组件具体样式,JS则与后台进行交互。
在设计网页前先介绍DIV,简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件,包括另外的DIV。
制作登录界面。登录界面一般有两个文本框,分别用来获取用户的用户名和密码。我们也考虑用户忘记密码和未进行注册的情况,故也要加上这两个功能区域。
首先我们为登录界面设置一个标题:
<title>Welcome!Please write your individual information.</title>
然后在body内设计我们想要用户看见的内容:
<body><div id ="login"><form name="login",method="post",action="*"><div id = "loginDiv"><p style="left:10px">Welcome to login!</p><div id="user"><input type="text" placeholder="手机号\邮箱\昵称" style="height: 30px;"/></div><div id="password"><input type="password" placeholder="请输入密码" style="height: 30px;"/></div><div id="check"><input type="checkbox" /><span style="font-size: x-small;">请勿在公用电脑上勾选此选项 <a href="#">忘记密码?</a></span></div><input type="submit" id="loginbutton" value="登录" /><p id="reg" style="font-size: x-small;left: 70px;"><a href="http://127.0.0.1:8020/Tb/js/register.html">注册</a></p></div></form></div></body>
我们首先建立了一个div里面又建立了一个表单(用户填入的信息一定是全在表单里的,然后由表单发送给后台控制器,故下面的文本框等全部是在表单中)。我们依次建立两个div分别用来装用户名和密码文本框。为什么要把它们用div装起来呢?是为了方便在CSS中对它们的位置,长宽,样式等进行设计。然后就是登录按钮,登录按扭有很多种设立方式,此处给的是具有跳转表单指定地址的提交按钮。
最后两个功能:注册和忘记密码我们用超链接将他们表现出来,用户可以点击文字跳转到指点页面,进行对应操作。超链接一般格式如下:
<a href="http://127.0.0.1:8020/Tb/js/register.html">这里写你想放入的字符,前面的地址即是跳转地址。</a>
具体的div大小 、样式等由CSS决定。我们设置一个,里面为div、表单、按钮和字体等设置样式:
<style type="text/css">#login{}#loginDiv{border: 1px solid #646464;background-color: #E8E8E8;margin-top: 300px;margin-left: 900px;width: 360px;height: 500px;}#user{width: 270px;height: 34px;margin-top: 120px;margin-left: auto;}#password{width: 270px;height: 34px;margin-top: 40px;margin-left: auto;}#check{margin-top: 70px;margin-left: 60px;}#loginbutton{margin-left: 57px;width: 270px;height: 34px;margin-top: 1;background-color: aliceblue;color: burlywood;border:0px solid;border-radius:6px;font: normal 20px/44px "Microsoft Yahei";}#reg{margin-left: 300px;width: 100px;}</style>
再就是文首提到的JS,,制作简单表单并未与其它表单或者底层数据进行交互,因此暂时并未用到,以后涉及到后会展示出来。
接下来就是注册页,注册与登录页类似也是以几个文本框为主体。代码见下:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Welcome to register</title></head><style type="text/css">#house{background-color:#F0F8FF;margin-top: 200px;border:1px solid #646464;;}#register{width: 400px;margin-left: 400px;}#ge{margin-left: 40px;width: 300px;height: 43px;border: coral;}</style><body><p style="font: '微软雅黑';font-size: large;"> Welcome to FIRSTBLOOD!</p><div id="house"><form action="*" method="post" id="register"><table><tr><td><p>手机号码</p></td><td><input placeholder="请输入您的手机号码"> </td></tr><tr><td><p>登录密码</p></td><td><input type="password" placeholder="请输入您的密码"></td></tr><tr><td><p>确认密码</p></td><td><input type="password" placeholder="再次输入密码"></td></tr><tr><td><p>请输入验证码</p></td><td><input ></td></tr></table><input type="submit" id="ge" value="注册"/></form></div></body>
</html>
在注册页面中我们以表格为骨架把内容整齐划分。
以上便是简单制作登录和注册页面。笔者也是初学者有很多也不太明白,在此讲的比较简陋,见谅。
下附页面截图(登录):
(注册)
简单制作登录注册页面相关推荐
- 【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
- 小白教程——Windows下用PHP写一个简单的登录注册页面(二)
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
- html css js制作登录注册页面,【7】使用css/js/html模板来实现一个注册、登录和管理的功能...
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 importtornado.web5 importlogging6 importdatetime ...
- python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
- html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面 发布时间:2020-12-19 14:02:09 来源:亿速云 阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
- HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- jsf登录注册页面_您将在下一个项目中使用JSF吗?
jsf登录注册页面 上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
- php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
- 清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
- 一个简单的登录注册网页的实现
一个简单的登录注册网页的实现 通过 标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
最新文章
- 第二十课.卡尔曼滤波器
- kafka笔记3(生产者)
- MySQL中如何通过修改表实现约束的添加与删除
- 开源数学软件zzllrr Mather小乐数学简介Summary
- 在Java里重写equals和hashCode要注意什么问题
- 在windows下写makefile编译代码
- elementuiDemo1.1
- mqtt协议详解_阿里云物联网平台使用心得(七)MQTT协议14个报文总览
- Oracle 软件的安装
- 采用Angular勾画SVG圆环形进度条
- 今日重磅!恺明大神又一力作!重新思考万能的ImageNet预训练模型
- 明略数据是谁?为何能拿下腾讯在行业AI的高额投资
- gedit增加对指定文件格式(如qml)的识别和启用合适的语法高亮
- [Luogu] 程序自动分析
- Python+大数据技术框架和数仓基础(一)
- 异数OS TCP协议栈测试(五)--关于QOS与延迟
- 电路中负电源的注意事项
- echarts中中国地图飞机路线使用
- 实验项目1 置换密码
- 程序员高效的准备HR面试