2020-10-8 用户注册界面简单代码

用户注册界面代码

运用frameset标签将网页分为两个部分。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frameset标签使用</title>
</head>
<frameset rows="40%,60%">
<frame src="流星雨.html">
<frame src="用户注册界面.html">
</frameset>
<body>
</body>
</html>

在其中一个页面变成用户注册界面。（其他页面可以自己设置）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册界面</title>
<style type="text/css">
body{margin: 0px;padding:0px;background-image:url(j.jpg);background-repeat:no-repeat;background-size:100% auto;
}
#left{border: 1px solid #0099CC;background-color: red;height: 100%;width: 200px;position: absolute;top: 0px;left: 0px;opacity: 0.1;
}
#center{border: 1px solid #0099CC;background: #A8A8A8;margin-left: 200px;margin-right: 200px;height: 100%;text-align:center;line-height:65px;opacity: 0.8;
}
#duiqi{margin-left: 500px;
text-align:left;
}
#right{border: 1px solid #0099CC;background-color: red;height: 100%;width: 200px;position: absolute;top: 0px;right: 0px;opacity: 0.1;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
<p align="left">
<h1>用户注册界面</h1>
<div id="duiqi"><th height="65"><font size="4">用户名</font></th><th><input type="text" name="userName" style="height:40px" size="40" placeholder="请输入用户名"/></th><br><th height="65"><font size="4">请设置密码</font></th><th><input type="password" name="pwd" style="height:40px" size="40" placeholder="密码长度为8~16字符"/></th><br><th height="65"><font size="4">请确认密码</font></th><th><input type="password" name="pwd" style="height:40px" size="40" placeholder="请重新输入密码"/></th><br><th height="65"><font size="4">电子邮件</font></th><th><input type="text" name="email" style="height:40px" size="40" placeholder="请输入电子邮件地址"/></th><br><th height="65"><font size="4">手机号码</font></th><th><input type="text" name="phone" style="height:40px" size="40" placeholder="请输入电话号码"/></th><br><th height="65"><font size="4">短信验证码</font></th><th><input type="text" name="check" style="height:40px" size="40"><input type="button" id="abab" value="获取验证码"/></th><br><th height="65"><font size="4">性别</font></th><th><input type ="radio" value="male" name="sex" checked> 男<input type ="radio" value ="female" name="sex">女</th><br><th height="65"><font size="4">联系地址</font></th><th><input type="text" name="address" style="height:40px" size="40"></th>
</div><br><input type="checkbox" value="我已阅读并同意">我已阅读并同意 <a href="1.html">用户注册协议</a><br><input type="button" value="马上注册" style="height:40px;width:100px;"><input type="reset" value="重置" style="height:40px;width:100px;">
</p>
</div>
</body>
</html>

以上是用户注册界面的完整代码，里面包括页面布局的代码以及页面所需内容的代码。

<style type="text/css">
body{margin: 0px;padding:0px;background-image:url(j.jpg);background-repeat:no-repeat;background-size:100% auto;
}
#left{border: 1px solid #0099CC;background-color: red;height: 100%;width: 200px;position: absolute;top: 0px;left: 0px;opacity: 0.1;
}
#center{border: 1px solid #0099CC;background: #A8A8A8;margin-left: 200px;margin-right: 200px;height: 100%;text-align:center;line-height:65px;opacity: 0.8;
}
#duiqi{margin-left: 500px;
text-align:left;
}
#right{border: 1px solid #0099CC;background-color: red;height: 100%;width: 200px;position: absolute;top: 0px;right: 0px;opacity: 0.1;
}
</style>

以上是页面布局的代码，运用的是三列浮动中间宽度自适应的方法。并且在页面插入背景图片，以下是插入背景图片的部分代码。（图片需跟文件位置一致的文件夹里）

 background-image:url(j.jpg);background-repeat:no-repeat;background-size:100% auto;

以下是注册内容的部分代码，将用户注册所需要操作的步骤和填写内容用代码形式表现出来。

<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
<p align="left">
<h1>用户注册界面</h1>
<div id="duiqi"><th height="65"><font size="4">用户名</font></th><th><input type="text" name="userName" style="height:40px" size="40" placeholder="请输入用户名"/></th><br><th height="65"><font size="4">请设置密码</font></th><th><input type="password" name="pwd" style="height:40px" size="40" placeholder="密码长度为8~16字符"/></th><br><th height="65"><font size="4">请确认密码</font></th><th><input type="password" name="pwd" style="height:40px" size="40" placeholder="请重新输入密码"/></th><br><th height="65"><font size="4">电子邮件</font></th><th><input type="text" name="email" style="height:40px" size="40" placeholder="请输入电子邮件地址"/></th><br><th height="65"><font size="4">手机号码</font></th><th><input type="text" name="phone" style="height:40px" size="40" placeholder="请输入电话号码"/></th><br><th height="65"><font size="4">短信验证码</font></th><th><input type="text" name="check" style="height:40px" size="40"><input type="button" id="abab" value="获取验证码"/></th><br><th height="65"><font size="4">性别</font></th><th><input type ="radio" value="male" name="sex" checked> 男<input type ="radio" value ="female" name="sex">女</th><br><th height="65"><font size="4">联系地址</font></th><th><input type="text" name="address" style="height:40px" size="40"></th>
</div><br><input type="checkbox" value="我已阅读并同意">我已阅读并同意 <a href="1.html">用户注册协议</a><br><input type="button" value="马上注册" style="height:40px;width:100px;"><input type="reset" value="重置" style="height:40px;width:100px;">
</p>
</div>
</body>

以上便是整个代码的分析过程。下面是呈现出来的页面图片，仅供参考。

2020-10-8 用户注册界面简单代码相关推荐

android注册界面高级,Android用户注册界面简单设计
本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 I. 实例目标设计一个用户注册界面,在其中要使用到一些基础控件,如文本框.编辑框.按钮.复选框等控件 II. 技术分 ...
当当网新用户注册界面——JS代码
<span style="color:#ff9966;"><span style="font-size: 32px;"><stro ...
当当网新用户注册界面——CSS代码
<strong><span style="font-size:32px;color:#ff9966;">所有用到的图片都已上传,请在<a target ...
Java图形界面简单代码
public class Frame extends JFrame{public static void JFrameWindow(){JFrame frame=new JFrame("我的 ...
php上传图片到数据库2020,弱鸡养成第三天(2020.10.19)-php连接并简单操作数据库
弱鸡养成第三天(2020.10.19)-php连接并简单操作数据库弱鸡养成第三天(2020.10.19)-php连接并简单操作数据库 php连接数据库连库基本操作首先找到php.ini 文件中的 ...
五行代码实现炫动滑动卡片层叠布局，仿探探、人人影视订阅界面简单优雅
LayoutManagerDemo 项目地址:mcxtzhang/LayoutManagerDemo 简介:五行代码实现炫动滑动卡片层叠布局,仿探探.人人影视订阅界面简单&优雅:Layo ...
python平均工资-2020 10大薪资最高的IT编程语言排名
坊间流传一句俗语: 三百六十行,行行转IT. IT行业自2016年首次超过金融行业以后,一直到现在每年都是稳居高薪第1名的宝座. 本文盘点了2020 10大薪资最高的IT编程语言排名,看看是哪些编码技 ...
html实现iphone桌面,HTML_Html5实现iPhone开机界面示例代码，今天我突发其想，想到可以用H - phpStudy...
Html5实现iPhone开机界面示例代码今天我突发其想,想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios. 当然,要开发出一个操作系统,等我再归山修练一百年再说吧.今天就先娱 ...
10款最著名的代码(文本)编辑器
通常操作系统和软件开发包中都包含文本编辑器,可以用来编辑配置文件,文档文件和源代码. 下面是笔者总结的 10 个最好的免费代码文本编辑器: 1. NOTEPAD++ NOTEPAD++是一款免费又优秀 ...

2020-10-8 用户注册界面简单代码

用户注册界面代码

2020-10-8 用户注册界面简单代码相关推荐

最新文章

热门文章