实现效果:

<!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. release优化和不优化结果不一致_您了解网站优化吗?优化效果不明显?排名不稳定是为什么?...
  2. CentOS7环境下搭建Kafka
  3. layui遇见的问题
  4. 蚂蚁金服上市诞生千个亿万富翁,财富自由,离你不远!
  5. linq To DataTable
  6. 欧盟:2020年之前普及免费WiFi网络
  7. 一次完整的react hooks实践
  8. Chrom调试移动端页面
  9. 聊一聊云电脑、云游戏以及阿里云的“无影”
  10. FlashFXP中文破解解压版
  11. 【知识兔】两列Excel数据快速合并为一列,你会哪种方法?
  12. windows系统C盘扩容详解
  13. 关于Quartus+Modelsim 门级仿真 Warning (vopt-2216) Cannot find instance 'NA' specified in sdf.的解决办法...
  14. 基于Patachmatch的stereo matching笔记(一):《PatchMatch Stereo》
  15. 2019全球智博会将于苏州召开,三大重磅奖项候选项目火热征集中...
  16. matlab--蒙特卡罗Monte Carlo
  17. 免费云总机IPPBX电话交换系统
  18. YYGH-2-排班管理
  19. Python生成三年级数学竖式计算并用Python-pptx写入PPT
  20. linux软链接与硬链接

热门文章

  1. 面试常见问题之TopK
  2. windows 不能自动升级 BITS 错误 1083 后台智能传输服务 金山毒霸 反间谍
  3. [读点书吧]近期书单
  4. redis源码阅读-持久化之aof与aof重写详解
  5. WebConfig中常用的connectionStrings配置
  6. AppStore 审核中文版 --- 程序员必看
  7. 爱踢门之锤子自由截屏快捷键配置(下)
  8. python 公主连接,公主连接打金牛座四王有什么小技巧吗 一阶段四王图文攻略
  9. Java中的数据结构:数组与链表的区别
  10. 转 暴雪总裁总结游戏十条经验