实现效果:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS控制表单样式</title><link rel="stylesheet"  type="text/css" href="form.css"></head>
<body><form action="#" method="post"><p><span>账号:</span><input type="text" name="username" value="admin" class="num" pattern="^[a-zA-z][a-zA-Z0-9_]{4,15}$"/></p><p><span>密码:</span><input type="password" name="password" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/></p>
<p><input type="button" class="btn01" value="登录"/><input type="button" class="btn02" value="注册"/>
</p></form>
</body>
</html>

form.css

body{font-size: 12px; font-family: "宋体";}
body,form,input,p{padding: 0; margin: 0;border: 0;}
form{width: 320px;height: 150px;padding-top: 20px;margin: 50px auto;background: #f5f6fd;border-radius: 20px;border: 3px solid #4faccd;
}
p{margin-top: 17px; text-align: center;}
p span{width: 40px;
display: inline-block;
text-align: right;
}
.num,.pass{width: 153px;height: 16px;border:2px solid #35a1df;/* 22px:给图标留出位置 */
padding: 2px 2px 2px 22px  ;
}
.num{background: url(img/1.png) no-repeat left center #fff;background-size: 15px;color: #999;
}
.pass{background: url(img/2.png) no-repeat left center #fff;background-size: 15px;}
.btn01,.btn02{width: 60px;height: 26px;border-radius: 3px;border: 2px solid #6b5b60;margin-left:30px ;
}
.btn01{background: #3bb7ea;}
.btn02{background: #fbbc18;}

复合属性的写法
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;

上述这种写法是对的,我的HTML书本上还包含有background-size属性,我建议这个单独写,
Microsoft Edge这个浏览器就不显示(支持)background-size包含在background这个复合属性里面。

至于正则表达式,我还是喜欢在JS里面单独判定给出提示
对了,图标也放在这里吧:

【HTML/CSS】简单登录注册表单制作相关推荐

  1. java注册登录小程序,详解小程序之简单登录注册表单验证

    这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...

  2. 小程序之简单登录注册表单验证

    这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...

  3. Html+CSS实现简单的注册表单

    目录 预览 教程如下 首先新建一个HTML文件 接下来,我们在body标签的内部编写网页的主题内容 新建一个CSS文件 label: input: .submit_btn: CSS  居中显示: 这就 ...

  4. html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享

    本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查 ...

  5. HTML5 CSS登录注册表单界面示例源码

    先上图 高质量前端技术交流,有问必答q群:579720104 html <!DOCTYPE html> <html lang="zh"> <head& ...

  6. jQuery带背景切换登录注册表单

    jQuery带背景切换登录注册表单 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...

  7. 登录界面转换实现html,html5和css3登录注册表单界面切换动画

    这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...

  8. Graphql 初体验 第十一章 | #13 Hitting the API(实现了登录注册表单)

    对应内容:#13 Hitting the API | Build a Complete App with GraphQL, Node.js, MongoDB and React.js 主要内容: 完成 ...

  9. 使用php创建一个注册表单,如何实现一个简单的注册表单

    创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...

最新文章

  1. 转载 Android 多线程处理之多线程用法大集合
  2. java ee开发技术 上海大学_学院介绍
  3. python实现卡方(Chi-Squared Test)相关性检验
  4. 【Linux】 -bash-4.2#问题和Cannot allocate memory
  5. 试除法的妙用【O(√N) 复杂度】
  6. handlersocket安装配置
  7. 山东旅游学院2021高考成绩查询,2021年山东旅游职业学院录取查询入口,高考录取结果查询网址登录...
  8. (44)System Verilog 类中变量随机激励约束
  9. [我总结]8月第二周总结
  10. 达摩院 2020 预测:感知智能的“天花板”和认知智能的“野望”
  11. python3怎么使用pyrex_python pyrex windows 编译C可执行文件
  12. android内容提供器读取图片,android实现拍照或从相册选取图片
  13. 10a 16a 插座区别_10A和16A的插座能混用吗?
  14. 单链表---建立基本学生信息管理系统
  15. 实用主义学python 云盘_多领域实用主义学Python项目视频教程-2018年麻瓜编程
  16. 流量卡之家:拥有边缘计算的物联网才是真正的物联网
  17. Windows 8/8.1/10 删除微软拼音、微软五笔输入法的方法
  18. IDC发布2021年中国云计算10大预测;Docker 桌面为 M1 推出技术预览版
  19. Crazy Number---3755
  20. 猜数字小游戏 --- 公牛母牛

热门文章

  1. 短视频创作有什么建议吗?直接上干货
  2. 如何使用在线工具将PDF转换为图片
  3. 人工智能在未来是怎样改变大都市生活的?
  4. 用Google看世界,妙用引擎“Index of”
  5. CE修改器入门:代码替换功能
  6. 美颜算法 php,使用face++实现人像美颜
  7. 江湖终于承认, 我是正房
  8. Kubernetes安装系列之heapster安装
  9. 事务的ACID 属性
  10. stm32l051低功耗之stop模式