使用CSS完成用户注册页面；

做成这样一个页面；

①设置body的background-image背景图【该背景图是全铺方式，个别网页注册采用指定位置background-position定位背景图在真个页面的位置】；

②分成一个div,分装left ，mid，right 这三部分，mid中使用一个div来装table（以便于调节table在页面的布局或者定位），

最外部div水平居中margin: auto，(margin-top自定义设置，可以在margin: auto中指定)边框width 宽度7-9px最佳，颜色color自定义；

【或者使用框架标签frameset 来布局整个页面的框架，Ps;使用框架标签需要去掉body，不然没有效果】
③分析table表单；

1，首先定义<form ></form> 标签；

2，把table划分为；2列n行，通过colspan等操作，在创建表单时候给每个<td></td>列标签定义class属性，

t-left和t-right，以便后期指定margin-left 的距离再添加时候麻烦；

3，head标签中设置css样式，先把表单border调出来，把整个表单位置定好（也就一个位置margin-top视距离定义即可。）

③针对left，mid ，right 分别设置浮动float（right是右浮动）；

说明；本人外部div指定的width：850px; height:400px;

分装left ，mid，right 的这三部分，是按照百分比来分的，分别是25%；47%；25%，（这三部分加起来不是100%，是因为留了3分给它，怕它骄傲）。也可以通过rule来测量规划各部分占得px的多少。

body部分；

<body>
<!--最外层容器-->
<div><!--左容器--><div class="left"><p class="first">新用户注册</p><p class="third">user register</p></div><!--中容器  插入表格容器--><div class="mid"><div class="table"><!--表格容器中的table需要提交表单，使用form--><form action="#" name="register" method="get"><!--表格9行2列--><table><!--用户名，密码，邮箱姓名，手机号，性别，生日，验证码，提交--><tr><!--第一行--><td class="t-left"><lable for="username">用户名</lable></td><td class="t-right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td></tr><tr><!--第2行--><td class="t-left"><lable for="password">密码</lable></td><td class="t-right"><input type="password" name="password" id="password" placeholder="请输入密码"></td></tr><tr><!--第一行--><td class="t-left"><lable for="email">邮箱</lable></td><td class="t-right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td></tr><tr><!--第一行--><td class="t-left"><lable for="tel">手机号</lable></td><td class="t-right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><!--第一行--><td class="t-left">性别</td><td class="t-right"><input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女<input type="radio" name="gender" value="妖">妖</td></tr><tr><!--第一行--><td class="t-left">生日</td><td class="t-right"><input type="date" name="date"></td></tr><tr><!--第一行--><td class="t-left"><lable for="CAPTCHA">验证码</lable></td><td class="t-right"><input type="text" name="CAPTCHA" placeholder="请输入验证码" class="check"><span><img src="../img/verify_code.jpg" height="30"/></span></td></tr><tr align="center"><!--第一行--><td colspan="2"><button class="submit">提交表单</button></td></tr></table></form></div></div><!--右容器  --><div class="right"><p>已有账号？<a href="#">立即登陆</a></p></div>
</div></body>

head的部分；

<head><meta charset="UTF-8"><title>注册css</title><!--分析；在body中设置背景，插入一个table 或者div ，分为三部分，三部分都浮动，按照百分比来分（或者拿尺子测下像素）左边是p标签，右边是a标签嵌套p标签中间是注册表单首先把位置定好在中间位置；margin ;--><style type="text/css">body {background-image: url("../img/bg.jpg");}/*设置所有元素不会被撑大 ,并且盒子的宽高是边框的宽高 设置margin=0，padding=0*/* {padding: 0px;margin: 0px;box-sizing: border-box;}body > div {/*最外层容器指定大小,边框，水平居中, */width: 850px;height: 400px;background-color: white;border: gray solid 8px;margin: 60px auto;}/* -------------------------------------------------------- *//*左浮动*/.left {float: left;width: 25%;margin-left: 20px;margin-top: 20px;}.first {font-size: 20px;color: orange;}.left p:last-child {font-size: 20px;color: gray;}/* -------------------------------------------------------- */.mid {font-size: 15px;float: left;width: 47%;}.table {margin-top: 25px;float: left;}.t-left {/*文字靠左边*/text-align: left;}.t-right {}/* 表单中的文本框，日期框，密码框使用属性选择器，宽256，高32，行高32，内边距上下6，左右12，圆角4，边框：1 实线 颜色#a6a6a6，右浮动*/input[type="text"], input[type="date"], input[type="password"], input[type="email"],input[type="tel"], input[type="radio"] {padding-top: 6px;padding-bottom: 6px;padding-left: 10px;padding-right: 10px;border-radius: 4px; /*圆角*/border: gray solid 1px;margin-left: 30px; /*指定左边距，调节左边距的距离*/}input[type="radio"] {}/* -------------------------------------------------------- */.right {float: right;width: 25%;}.right p {font-size: 15px;padding: 10px 10px 0px 0px;float: right;margin-left: 30px;}/*验证码*/.check {margin-left: 30px;}</style>
</head>

使用CSS完成用户注册页面；相关推荐

html+css+js用户注册页面简
1)开发一个用户注册界面,要求: 年龄需用 JavaScript 检查格式是否正确. Reg.html<!DOCTYPE html><html><head>< ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
用户注册页面的设计与实现（html+css）
用户注册页面的设计与实现(html+css) 文章目录用户注册页面的设计与实现(html+css) 1.目的 2.内容 3.步骤 4.代码实现 5.页面展示 6.最后 1.目的熟悉HTML+CSS ...
html写注册协议页面,html+css编写用户注册协议页
需求: html+css编写用户注册协议页 html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/h ...
html+css编写用户注册协议页面
需求: html+css编写用户注册协议页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww ...
美多商城之用户注册(展示用户注册页面)
一.展示用户注册页面 1.创建用户模块子应用 1.1. 创建用户模块子应用 1.准备apps包,用于管理所有应用 2.在apps包下创建应用users $ cd ~/projects/meiduo_p ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
【HTML5表单API项目】用户注册页面的设计与实现
用户注册页面的设计与实现功能要求:使用H5表单技术实现用户注册页面,要求可以输入用户名,密码,真实姓名,电子邮箱等信息进行注册. 验证要求:每个输入栏目的文本框均需要显示提示信息,用户在单击按钮提交 ...
用户注册页面的设计与实现
用户注册页面的设计与实现功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名.密码.真实姓名和电子邮箱等信息进行注册. 2.验证要求:每个输入栏目的文本框均需要显示提示信息 ...
利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...

使用CSS完成用户注册页面；

使用CSS完成用户注册页面；相关推荐

最新文章

热门文章