软件系统定制开发HTML5设计注册/登录界面

学习目标：

  • 掌握 HTML5入门知识
  • 掌握 CSS入门知识

学习内容：

  1. 掌握 HTML5基本语法
  2. 掌握CSS基本语法
  3. HTML5网页设计
  4. 软件系统定制开发掌握块级标签
  5. 软件系统定制开发掌握行内标签
  6. 软件系统定制开发表单的使用方法
  7. iput常用属性

学习时间：

  • 软件系统定制开发周一至周五早上 7 点—晚上9点
  • 周六上午 9 点-晚上9点
  • 周日下午 3 点-下午 6 点

学习产出：

  • 技术笔记1 篇
  • CSDN 技术博客 1 篇
  • 使用HTML软件系统定制开发设计一个基本登录界面
  • 使用CSS软件系统定制开发对登录界面进行格式设计

HTML代码：

  1. 这里是对登录界面的元素进行初步的设计
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <form action="#" method="post">
  10.         <h2>请注册</h2>
  11.         <span name="yes">已有账号？</span>
  12.         <a href="#">登录</a>
  13.         <br>
  14.         <br>
  15.         用户名：<input type="text" placeholder="请输入用户名" name="user">
  16.         <br>
  17.         <br>
  18.         手机号：
  19.             <select style="width: 50px;height: 40px">
  20.                 <option value="+86">+86</option>
  21.                 <option value="+12">+12</option>
  22.                 <option value="+港澳台">+港澳台</option>
  23.             </select>
  24.             <input type="tel" placeholder="请输入手机号" name="tele">
  25.         <br>
  26.         <br>
  27.         密&emsp;码：<input type="password" placeholder="请设置登录密码" name="pwd">
  28.         <br>
  29.         <br>
  30.         验证码：<input type="text" placeholder="请输入验证码" class="yz">
  31.         <button class="ipt"></button>
  32.         <br>
  33.         <br>
  34.         <input type="checkbox" style="vertical-align: middle">
  35.         <span>阅读并接受协议</span>
  36.         <br>
  37.         <br>
  38.         <center><button type="submit">注册</button></center>
  39.     </form>
  40. </div>
  41. </body>
  42. </html>
  • 因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签
  • span标签是一个基本的文本标签
  • 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转
  • input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果
  • 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的效果
  • 还需要注意的是form标签处的method属性，它有两个不同值。设置post值时提交时网址处不会显示表单内个人信息，而get提交，提交时网址处会显示在设置时有name属性的值。所以我们需要使用post才可以有效防止用户隐私被泄露

CSS代码：

  1. 对界面进行格式的设置
  1. <link rel="stylesheet" href="../CSS/样式文件/样式1.css">
  2. <style>
  3.         div{
  4.             /*居中*/
  5.             margin: auto;
  6.             /*可以通过内边距设置*/
  7.             width: 460px;
  8.             height: 520px;
  9.             border: grey solid 2px;
  10.             border-radius: 5px;
  11.             /*将用户选择时的格式取消*/
  12.             user-select: none;
  13.         }
  14.         form{
  15.             width: 420px;
  16.             height: 520px;
  17.             position: relative;
  18.             left: 20px;
  19.         }
  20.         span{
  21.             color: grey;
  22.         }
  23.         input{
  24.             border-radius: 5px;
  25.             border: lightgrey 1px solid;
  26.             font-size: 7px;
  27.             height: 40px;
  28.             width: 348px;
  29.             /*先设定一个值，在通过页面检查按住width一直加减：上下箭头直到边框突然回缩*/
  30.         }
  31.         input[name="tele"]{
  32.             border-radius: 5px;
  33.             border: lightgrey 1px solid;
  34.             font-size: 7px;
  35.             height: 40px;
  36.             width: 288px;
  37.         }
  38.         input[type="checkbox"]{
  39.             border-radius: 5px;
  40.             border: lightgrey 1px solid;
  41.             height: 15px;
  42.             width: 15px;
  43.         }
  44.         button[type="submit"]{
  45.             border: lightgrey 1px solid;
  46.             border-radius: 5px;
  47.             height: 50px;
  48.             width: 350px;
  49.             background-color: #65bdff;
  50.             text-align: center;
  51.             /*设置字距*/
  52.             letter-spacing: 2px;
  53.             /*移入按钮后变成小手形式*/
  54.             cursor: pointer;
  55.         }
  56.  
  57.         .yz{
  58.             border: lightgrey 1px solid;
  59.             /*百分比是以宽度为基础计算的，用px可以使框圆的匀称*/
  60.             border-radius: 5px;
  61.             font-size: 7px;
  62.             height: 40px;
  63.             width: 241px;
  64.         }
  65.         a{
  66.             text-decoration: none;
  67.         }
  68.         a:hover{
  69.             /*设置下划线*/
  70.             text-decoration: underline;
  71.         }
  72.         .ipt{
  73.             width: 104px;
  74.             height: 44px;
  75.             background: url("images/验证码.jpg") no-repeat center/104px 44px;
  76.             /*设置按钮与前面验证码框居中对齐，否则没有文字的按钮会与前面的文本对齐*/
  77.             vertical-align: middle;
  78.         }
  79.     </style>
  • 这里我自己有一个样式文件，是用来重置浏览器自带的样式界面的，以免造成不同浏览器最终设计结果出现混乱，大家可以参考ResetCSS：这是一个公共的样式重置模板，大家自行复制存储到css文件中，然后将文件路径写入link标签中的href属性内就可以正常使用
  • 这里涉及到多种CSS选择器，大家可以自行学习，然后对我的这段代码才能有理解，比如有 [ ] 是属性选择器，前面加上了 . 是类选择器，什么都不加直接写标签是标签选择器，这里只说到我这里面使用的属性选择器，具体其他使用方法大家自行学习

展示图： 

  1. 在运行HTML文件时电击自己需要使用的浏览器进行效果展示

  2. 这里是设计结果的最终登录界面，这只是最初始的模型图，可以实现提交，但是数据并未有存储，其他功能还需要学习后续知识才能实现

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发