html制作注册页面导航栏的效果图（HTML5设计注册/登录界面）
导读：学习目标： 掌握 HTML5入门知识 掌握 CSS入门知识 学习内容：...
学习目标：
掌握 HTML5入门知识 掌握 CSS入门知识学习内容：
掌握 HTML5基本语法 掌握CSS基本语法 HTML5网页设计 掌握块级标签 掌握行内标签 表单的使用方法 iput常用属性学习时间：
周一至周五早上 7 点—晚上9点 周六上午 9 点-晚上9点 周日下午 3 点-下午 6 点学习产出：
技术笔记1 篇 CSDN 技术博客 1 篇 使用HTML设计一个基本登录界面 使用CSS对登录界面进行格式设计HTML代码：
这里是对登录界面的元素进行初步的设计 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <div> <form action="#" method="post"> <h2>请注册</h2> <span name="yes">已有账号？</span> <a href="#">登录</a> <br> <br> 用户名：<input type="text" placeholder="请输入用户名" name="user"> <br> <br> 手机号： <select style="width: 50px;height: 40px"> <option value="+86">+86</option> <option value="+12">+12</option> <option value="+港澳台">+港澳台</option> </select> <input type="tel" placeholder="请输入手机号" name="tele"> <br> <br> 密 码：<input type="password" placeholder="请设置登录密码" name="pwd"> <br> <br> 验证码：<input type="text" placeholder="请输入验证码" class="yz"> <button class="ipt"></button> <br> <br> <input type="checkbox" style="vertical-align: middle"> <span>阅读并接受协议</span> <br> <br> <center><button type="submit">注册</button></center> </form> </div> </body> </html> 因为我们注册或者登录时是需要提交信息给后台的 ，所以需要用到表单form标签 span标签是一个基本的文本标签 如果需要登录是要点登录进行页面跳转的 ，所以我们需要使用a标签进行网址跳转 input标签也就是需要用户进行自行输入信息 ，并且可以通过type属性进行指定输入文本框的类型 ，比如我们输入密码时需要进行屏蔽 ，因而可以设置password属性 ，在输入密码期间可以不显示具体文本 ，达到隐私隐藏效果 设置按钮需要用到button标签 ，其实也可以用input标签 ，然后设置属性为button ，也可以达到同样的效果 还需要注意的是form标签处的method属性 ，它有两个不同值 。设置post值时提交时网址处不会显示表单内个人信息 ，而get提交 ，提交时网址处会显示在设置时有name属性的值 。所以我们需要使用post才可以有效防止用户隐私被泄露CSS代码：
对界面进行格式的设置 <link rel="stylesheet" href="../CSS/样式文件/样式1.css"> <style> div{ /*居中*/ margin: auto; /*可以通过内边距设置*/ width: 460px; height: 520px; border: grey solid 2px; border-radius: 5px; /*将用户选择时的格式取消*/ user-select: none; } form{ width: 420px; height: 520px; position: relative; left: 20px; } span{ color: grey; } input{ border-radius: 5px; border: lightgrey 1px solid; font-size: 7px; height: 40px; width: 348px; /*先设定一个值 ，在通过页面检查按住width一直加减：上下箭头直到边框突然回缩*/ } input[name="tele"]{ border-radius: 5px; border: lightgrey 1px solid; font-size: 7px; height: 40px; width: 288px; } input[type="checkbox"]{ border-radius: 5px; border: lightgrey 1px solid; height: 15px; width: 15px; } button[type="submit"]{ border: lightgrey 1px solid; border-radius: 5px; height: 50px; width: 350px; background-color: #65bdff; text-align: center; /*设置字距*/ letter-spacing: 2px; /*移入按钮后变成小手形式*/ cursor: pointer; } .yz{ border: lightgrey 1px solid; /*百分比是以宽度为基础计算的 ，用px可以使框圆的匀称*/ border-radius: 5px; font-size: 7px; height: 40px; width: 241px; } a{ text-decoration: none; } a:hover{ /*设置下划线*/ text-decoration: underline; } .ipt{ width: 104px; height: 44px; background: url("images/验证码.jpg") no-repeat center/104px 44px; /*设置按钮与前面验证码框居中对齐 ，否则没有文字的按钮会与前面的文本对齐*/ vertical-align: middle; } </style> 这里我自己有一个样式文件 ，是用来重置浏览器自带的样式界面的 ，以免造成不同浏览器最终设计结果出现混乱 ，大家可以参考ResetCSS：CSS Tools: Reset CSS这是一个公共的样式重置模板 ，大家自行复制存储到css文件中 ，然后将文件路径写入link标签中的href属性内就可以正常使用 这里涉及到多种CSS选择器 ，大家可以自行学习 ，然后对我的这段代码才能有理解 ，比如有 [ ] 是属性选择器 ，前面加上了 . 是类选择器 ，什么都不加直接写标签是标签选择器 ，这里只说到我这里面使用的属性选择器 ，具体其他使用方法大家自行学习展示图：
在运行HTML文件时电击自己需要使用的浏览器进行效果展示 这里是设计结果的最终登录界面 ，这只是最初始的模型图 ，可以实现提交 ，但是数据并未有存储 ，其他功能还需要学习后续知识才能实现创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！