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

用户注册界面代码


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


<html>
<head>
<meta charset="UTF-8">
<title>frameset标签使用title>
head>
<frameset rows="40%,60%">
<frame src="流星雨.html">
<frame src="用户注册界面.html">
frameset>
<body>
body>
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>
 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>
 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)