用HTML制作一个注册界面

1.制作如下图的注册界面要求如下：
体大小均为14px，灰色文字#999，验证码灰色背景#eee，注册按钮为红色背景#e3393c，注册按钮圆角6px

思路分析，根据图片的信息，本题的格式可以看做是一个3X5的表格形式，因此可以用表格的形式进行解答；另外还可以用页面流里的float现将第一行信息转换出来，然后在利用clear让元素主动向下移动，从而达到换行的目的（需要在div标签中选择合适的选择器），在换行完成后要设置每一列的长度；在第五行中的获取验证码出表单比其他的要短，这时需要手动设置表单的长度，最后要对全部文字进行格式设置

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Title</title><style>.line>div{    # 运用后代选择器筛选出符合条件的标签float: left;    # 所有标签内容转换成一行}.line,.register{   #运用并集选择器clear: both;  # 将需要换行处换行}.tt{    # 设置每一行的长度；正常网页的长度都是1000pxwidth: 1000px;height: 25px;}.div1{    # 设置第一列的长度；此处根据实际情况选择，高度同理width: 200px;height: 25px;}.div2{width: 300px;height: 25px;}*{  # 整个文件的信息进行格式设置font-size: 14px;color: #999;}span{background: #eee;}.register{border: 1px solid #f00;position: relative;  # 此处需要熟练使用position的相对位置和绝对位置top: 1px;     # 相对位置的数据设置left: 200px;background: #e3393c;  #设置背景颜色、长度、宽度width: 150px;height: 40px;line-height: 40px;text-align: center;  # 设置居中模式border-radius: 6px;  # 设置圆角值font-size: 16px;color: white;}</style>
</head>
<body>
<div class="tt"><div class="line"><div class="div1">用户名:</div><div class="div2"><input type="text"></div><div class="div3">4-20位字符，不支持汉字，支持字母和数字组合</div></div><div class="line"><div class="div1">请设置密码:</div><div class="div2"><input type="text"></div><div class="div3">6-20位字符，不支持汉字，支持字母和数字组合</div></div><div class="line"><div class="div1">请确认密码:</div><div class="div2"><input type="text"></div><div class="div3">请再次输入密码</div></div><div class="line"><div class="div1">验证手机:</div><div class="div2"><input type="text"></div><div class="div3">完成设置后可以用手机找回密码</div></div><div class="line"><div class="div1">短信验证码:</div><div class="div2"><input type="text"style="width: 100px"><input type="button" value="获取验证码"></input></div>   # 灵活运用button按钮<div class="div3">请输入短信验证码 </div></div><div class="register">立即注册</div>
</div>
</body>
</html>

用HTML制作一个注册界面相关推荐

【PYTHON】tkinter如何设置界面消失当制作一个登陆界面时，登陆成功之后，如何让登陆界面本身消失...
tkinter如何设置界面消失当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 tkinter如何设置界面消失当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 1 if que ...
如何制作一个注册表文件
1.制作一个注册表文件首先要了解注册表的格式:(可先去导出一个注册表文件,用记事本打开做为参照) 第一行:REGEDIT4 或是Windows Registry Editor Version 5.00 ...
HTML/CSS制作阿里巴巴注册界面
HTML/CSS制作阿里巴巴注册界面源代码如下: <!DOCTYPE html> <html lang="en"> <head><met ...
Android学习笔记（十二）——实战：制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
【tk制作一个登陆界面】
简单的用tk写一个登陆界面前言一.安装模块二.敲代码 1.引入库 2.代码思路总结前言看着qq的登陆界面,不知在座的各位有没有想过他是怎么出来的,我今天用python中的tk模块小小的还原 ...
制作一个注册表单页面
制作一个表单注册页面在Dreamweaver中创建一个.html文件,添加一个11行2列的表格,左侧的内容是手动输入(第一行也手动输入),右侧的内容是用代码来写的(最后一行也是用代码来写)(用代码写 ...
python数据写入表格生成图片_使用Python制作一个GUI界面，将随机生成的姓名存入到Excel文件中...
前面内容,我们详细介绍了如何使用Python生成一定数量的随机姓名. 生成一些随机姓名如何用Python生成若干个随机姓名?男女取名有方法,不能千篇一律之前,也提到过,我们在一些项目中,需要若干个 ...
python高手养成百家号_使用Python制作一个GUI界面，将随机生成的姓名存入到Excel文件中...
前面内容,我们详细介绍了如何使用Python生成一定数量的随机姓名. 如何用Python生成若干个随机姓名?男女取名有方法,不能千篇一律之前,也提到过,我们在一些项目中,需要若干个随机姓名,为了节省 ...
使用HTML制作会员注册界面
1.认识表单表单是网页用于输入信息的区域,它的主要功能是收集用户信息,是获取用户输入或选择数据的一种方式. 表单设计表单设计分为,表单界面和应用程序. 表单三部分组成: 1.表单标签包含处理表单 ...

用HTML制作一个注册界面

用HTML制作一个注册界面相关推荐

最新文章

热门文章