HTML_案例(注册案例CSS版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会员注册</title>
<style>
/*使用通配符设置margin设置文字行于行之间的宽度*/
*{
margin: 5px;
}
/*设置全页背景*/
body{
background: url("./img/register_bg.png") no-repeat center;
line-height: 1;
}
/*绘制登录框*/
.beijing{
border: 5px solid #EEEEEE;
width: 1000px;
height: 700px;
margin: auto;
background: white;
}
/*设置左上字体*/
.d1{
color: #FFD266;
}
.d2{
color: #ABA9A7;
}
/*设置浮动调格式*/
.zuo{
float: left;
}
.zhong{
float: left;
}
.you{
float: right;
}
/*设置右边字体*/
#p1{
font-size: 10px;
}
#p2{
color: red;
font-size: 10px;
}
/*设置中间格式*/
/*设置文字右对齐颜色灰色*/
.td_left{
width: 100px;
height: 45px;
text-align: right;
color: #ABA9A7;
}
/*设置文本框长度*/
.td_right{
padding-left: 50px;
box-sizing: border-box;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #ABA9A7;
/*设置边框圆角*/
border-radius: 10px;
}
#checkcode{
width: 100px;
}
/*设置按钮*/
#td_sub{
width: 100px;
height: 30px;
background: #FFD266;
}
</style>
</head>
<body>
<div class="beijing">
<div class="zuo">
<p class="d1">新用户注册</p>
<p class="d2">USER REGISTER</p>
</div>
<div class="zhong">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input id="td_sub" type="submit" value="注册"></td>
</tr>
</table>
</div>
<div class="you">
<p id="p1">已有账号？<a id="p2" href="#">立即登录</a></p>
</div>
</div>
</table>
</body>
</html>
HTML_案例(注册案例CSS版)的更多相关文章
- HTML_页面注册案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java基础知识强化之集合框架笔记37：用户登录注册案例
1. 登录注册案例分析图解: 2. 用户登录案例 详细分析 和 分包实现: (1)用户登录案例详细分析(面向对象思想) 按照如下的操作,可以让我们更符合面向对象思想: • 有哪些类呢? ...
- 《实战突击：PHP项目开发案例整合(第2版)(含DVD光盘1张)》
<实战突击:PHP项目开发案例整合(第2版)(含DVD光盘1张)> 基本信息 作者: 徐康明 辛洪郁 出版社:电子工业出版社 ISBN:9787121221378 上架时间:2014 ...
- vue新手入门之使用vue框架搭建用户登录注册案例，手动搭建webpack+Vue项目（附源码，图文详解，亲测有效）
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- 会话跟踪技术 - Cookie 和 Session 快速上手 + 登陆注册案例
目录 1. 会话跟踪技术概述 2. Cookie 2.1 Cookie的概念和工作流程 2.2 Cookie的基本使用 2.3 Cookie的原理分析 2.4 Cookie的使用细节 2.4.1 Co ...
- 安全之路:Web渗透技术及实战案例解析(第2版)
安全之路:Web渗透技术及实战案例解析(第2版)
- 登录注册案例(Servlet+JSP+Maven)
项目案例模板之登录注册的实现 案例演示 案例代码 设计表 pom.xml <dependencies> <dependency> <groupId>jun ...
- 零基础学习java------33---------http协议，tomcat（其如何在eclipse上发布），注册案例
一. HTTP协议 https://www.cnblogs.com/vamei/archive/2013/05/11/3069788.html 二. tomcat---------->web服务 ...
- 用户登陆注册【JDBC版】
前言 在讲解Web开发模式的时候,曾经写过XML版的用户登陆注册案例!现在在原有的项目上,使用数据库版来完成用户的登陆注册!如果不了解的朋友,可以看看我Web开发模式的博文! 本来使用的是XML文件作 ...
随机推荐
- mysql的数据类型int、bigint、smallint 和 tinyint及id 类型变换
bigint 从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字).存储大小为 8 个字节. int 从 ...
- hexo的next主题博客中加入分类页面的js，实现多级目录，并且能够点击展开，隐藏下级目录~（不知道算不算深度优化~~~）
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 多级标题 在自己的xxxx.md文件中做如下修 ...
- touchWX使用 echarts
<button bindtap="init" wx:if="{{!isLoaded}}">加载图表</button> <butto ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- 配置 jaco机械臂 ros环境
---恢复内容开始--- 终于有机械臂了, 首先先下载包 cd ~/catkin_ws/src git clone https://github.com/Kinovarobotics/kinova-r ...
- opencv 图像细化
图像细化多用于机器人视觉,OCR字符识别等领域,细化后的图像经过去毛刺就成为了我们常说的图像的骨架. 该图像细化代码依据论文: T. Y. ZHANG and C. Y. SUEN A Fast P ...
- mfc中的_T
mfc 中的字符串表示常用_T,意为text,定义为宏定义,可以方便的定义所有字符串为UNICODE(16位,长字符)或者ANSI(8位,短字符). 如果对于所有的字符串定义了_T并且定义了预处理标志 ...
- 单个机器部署redis集群模式（一键部署脚本）
一.检查机器是否安装gcc.unzip.wget 二.部署模式 #模式1: 将所有主从节点以及sentinel节点部署在同一台机器上 #模式2: 将一个数据节点和一个sentinel节点部署在一台机器 ...
- 通过js渲染高层级DOM实现网页加水印
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 6361. 【NOIP2019模拟2019.9.18】鲳数
题目 题目大意 给你一个区间\([l,r]\),求这个区间内每个整数的十进制上从高位到低位的逆序对个数之和. 思考历程 一开始就知道这是个数位DP-- 结果一直都没有调出来,心态崩了-- 正解 先讲讲 ...