HTML5~用户注册页面的设计与实现

您所在的位置：网站首页 › 用户注册密码有哪些 › HTML5~用户注册页面的设计与实现

HTML5~用户注册页面的设计与实现

2024-07-15 21:31| 来源: 网络整理| 查看: 265

用户注册页面的设计与实现

需要制作的效果图如下在这里插入图片描述大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。 1、设置底色（css 行内式）

body{background:#cccccc;}

2、制作表单

用户注册页面用户名：密码：确认：姓名：邮箱：提交注册

在这里插入图片描述 3、进行CSS设置

#container{ background:white; color:#2289F0; padding:15px; margin:100px auto 0px; width:600px; text-align:center; font-family:"微软雅黑 Light"; box-shadow:10px 10px 15px black ; } hr{width:80%; border:#2289F0 1px solid ; margin-bottom:15px; } body{background:#cccccc;} input{width:180px; height:20px; margin:5px; font-size:16px; font-family:"微软雅黑 Light";} button{width:120px; height:40px; background:#2289F0; border:0px; color:white; margin:10px; font-size:18px; font-family:"微软雅黑 Light"; font-weight:bold;} button:hover{background:#00c8D0;}

代码解释：box-shadow是阴影效果 button:hover是指我们在鼠标悬浮时的样式，可以百度hover进行了解在这里插入图片描述 4、我们可以看到现在表单左边，用户名那里是没有对齐的，以及我们会有一些内容的补充

autocomplete=“on” 根据记忆自动补全，意思就是我们之前输入过的内容，在此输入的时候会提示，这是默认的，如果你改成autocomplete=“off” 就会变成不提示。placeholder=添加提示语句，就是说在文本框里你看看到相应的浅浅的提示required非空验证，意思就是你如果没有输入，也就是如果你没有填写到内容，然后提交，他会提示你此项内容不能为空& ensp;& ensp;这个是补全空格，只是一个& ensp; 相当于半个中文字符的长度，& emsp; 也是补全空格，只是一个& emsp; 相当于一个中文字符的长度，& ensp;& ensp;==& emsp;还有其他补全空格的形式，一共有6种。（注意，这个写博客的时候显示就是空格，所以我在&和e之前敲到了空格，本身是没有空格的）用户注册页面用户名：密码：确认：姓名：邮箱：提交注册

在这里插入图片描述

最后再把代码总的发一次

无标题文档 #container{ background:white; color:#2289F0; padding:15px; margin:100px auto 0px; width:600px; text-align:center; font-family:"微软雅黑 Light"; box-shadow:10px 10px 15px black ; } hr{width:80%; border:#2289F0 1px solid ; margin-bottom:15px; } body{background:#cccccc;} input{width:180px; height:20px; margin:5px; font-size:16px; font-family:"微软雅黑 Light";} button{width:120px; height:40px; background:#2289F0; border:0px; color:white; margin:10px; font-size:18px; font-family:"微软雅黑 Light"; font-weight:bold;} button:hover{background:#00c8D0;} 用户注册页面用户名：密码：确认：姓名：邮箱：提交注册

上面所有内容为个人总结，如有任何不对的地方，可以私聊我，我会马上进行修正，如果进行转载请告知，谢谢。

【本文地址】

HTML5~用户注册页面的设计与实现

HTML5~用户注册页面的设计与实现

今日新闻

推荐新闻