无标题文档

├── README.md ├── registered.html ├── login.html ├── login.css └── registered.css /README.md: -------------------------------------------------------------------------------- 1 | # web-landing-registration-interface-design 2 | JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计 3 | 4 | 登陆界面设计 5 | 6 | 登陆界面由一个简单的表单（头像、用户名、密码、登陆按钮、记住我、取消、忘记密码），创建了一个CSS3的缩放效果构成。需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件，运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。 7 | 8 | 注册界面设计 9 | 10 | 注册界面由一个简单的表单（Email、用户名、密码、重复密码、注册按钮、记住我、取消），创建了一个CSS3的缩放效果构成。同样需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件，运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。 11 | 12 | 详细的操作过程可以参考本博主的原文：https://blog.csdn.net/qq_38931949/article/details/86737173 13 | 14 | -------------------------------------------------------------------------------- /registered.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 23 | 24 | 25 | 26 | 27 | 28 |

登录表单

29 | 30 | 31 | 32 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /login.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | 4 | /* Full-width input fields */ 5 | input[type=text], input[type=password] { 6 | width: 100%; 7 | padding: 12px 20px; 8 | margin: 8px 0; 9 | display: inline-block; 10 | border: 1px solid #ccc; 11 | box-sizing: border-box; 12 | } 13 | 14 | /* Set a style for all buttons */ 15 | button { 16 | background-color: #4CAF50; 17 | color: white; 18 | padding: 14px 20px; 19 | margin: 8px 0; 20 | border: none; 21 | cursor: pointer; 22 | width: 100%; 23 | } 24 | 25 | button:hover { 26 | opacity: 0.8; 27 | } 28 | 29 | /* Extra styles for the cancel button */ 30 | .cancelbtn { 31 | width: auto; 32 | padding: 10px 18px; 33 | background-color: #f44336; 34 | } 35 | 36 | /* Center the image and position the close button */ 37 | .imgcontainer { 38 | text-align: center; 39 | margin: 24px 0 12px 0; 40 | position: relative; 41 | } 42 | 43 | img.avatar { 44 | width: 40%; 45 | border-radius: 50%; 46 | } 47 | 48 | .container { 49 | padding: 16px; 50 | } 51 | 52 | span.psw { 53 | float: right; 54 | padding-top: 16px; 55 | } 56 | 57 | /* The Modal (background) */ 58 | .modal { 59 | display: none; /* Hidden by default */ 60 | position: fixed; /* Stay in place */ 61 | z-index: 1; /* Sit on top */ 62 | left: 0; 63 | top: 0; 64 | width: 100%; /* Full width */ 65 | height: 100%; /* Full height */ 66 | overflow: auto; /* Enable scroll if needed */ 67 | background-color: rgb(0,0,0); /* Fallback color */ 68 | background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 69 | padding-top: 60px; 70 | } 71 | 72 | /* Modal Content/Box */ 73 | .modal-content { 74 | background-color: #fefefe; 75 | margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ 76 | border: 1px solid #888; 77 | width: 80%; /* Could be more or less, depending on screen size */ 78 | } 79 | 80 | /* The Close Button (x) */ 81 | .close { 82 | position: absolute; 83 | right: 25px; 84 | top: 0; 85 | color: #000; 86 | font-size: 35px; 87 | font-weight: bold; 88 | } 89 | 90 | .close:hover, 91 | .close:focus { 92 | color: red; 93 | cursor: pointer; 94 | } 95 | 96 | /* Add Zoom Animation */ 97 | .animate { 98 | -webkit-animation: animatezoom 0.6s; 99 | animation: animatezoom 0.6s 100 | } 101 | 102 | @-webkit-keyframes animatezoom { 103 | from {-webkit-transform: scale(0)} 104 | to {-webkit-transform: scale(1)} 105 | } 106 | 107 | @keyframes animatezoom { 108 | from {transform: scale(0)} 109 | to {transform: scale(1)} 110 | } 111 | 112 | /* Change styles for span and cancel button on extra small screens */ 113 | @media screen and (max-width: 300px) { 114 | span.psw { 115 | display: block; 116 | float: none; 117 | } 118 | .cancelbtn { 119 | width: 100%; 120 | } 121 | } -------------------------------------------------------------------------------- /registered.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | 4 | /* 宽屏输入字段 */ 5 | input[type=text], input[type=password] { 6 | width: 100%; 7 | padding: 12px 20px; 8 | margin: 8px 0; 9 | display: inline-block; 10 | border: 1px solid #ccc; 11 | box-sizing: border-box; 12 | } 13 | 14 | /* 为所有按钮设置样式 */ 15 | button { 16 | background-color: #4CAF50; 17 | color: white; 18 | padding: 14px 20px; 19 | margin: 8px 0; 20 | border: none; 21 | cursor: pointer; 22 | width: 100%; 23 | } 24 | 25 | /* 取消按钮的其他样式 */ 26 | .cancelbtn { 27 | padding: 14px 20px; 28 | background-color: #f44336; 29 | } 30 | 31 | /* 浮动取消和注册按钮，并添加一个相同的宽度 */ 32 | .cancelbtn,.signupbtn {float:left;width:50%} 33 | 34 | /* 向容器元素添加填充 */ 35 | .container { 36 | padding: 16px; 37 | } 38 | 39 | /* 注册弹框模型 */ 40 | .modal { 41 | display: none; /* 在默认情况下隐藏 */ 42 | position: fixed; /* 生成绝对定位的元素，相对于浏览器窗口进行定位。 */ 43 | /* z-index、left、top共同控制模型在所有内容的上方 */ 44 | z-index: 1; 45 | left: 0; 46 | top: 0; 47 | width: 100%; /* Full width */ 48 | height: 100%; /* Full height */ 49 | overflow: auto; /* 如果需要，启用滚动条 */ 50 | background-color: rgb(0,0,0); /* 回退颜色 */ 51 | background-color: rgba(0,0,0,0.4); /* 黑色 */ 52 | padding-top: 60px; 53 | } 54 | 55 | /* 模型内容 */ 56 | .modal-content { 57 | background-color: #fefefe; 58 | margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ 59 | border: 1px solid #888; 60 | width: 50%; /* Could be more or less, depending on screen size */ 61 | } 62 | 63 | /* 定位关闭按钮 */ 64 | .close { 65 | position: absolute; 66 | right: 35px; 67 | top: 15px; 68 | color: #000; 69 | font-size: 40px; 70 | font-weight: bold; 71 | } 72 | 73 | /* 光标移动到关闭按钮 */ 74 | .close:hover, 75 | .close:focus { 76 | color: red; 77 | /*光标呈现为指示链接的指针（一只手）*/ 78 | cursor: pointer; 79 | } 80 | 81 | /* 设置浮动*/ 82 | .clearfix::after { 83 | content: ""; 84 | clear: both; 85 | display: table; /*此元素会作为块级表格来显示（类似），表格前后带有换行符。*/ 86 | } 87 | 88 | /* 添加缩放动画 */ 89 | .animate { 90 | 91 | -webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/ 92 | -moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/ 93 | -o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/ 94 | animation: animatezoom 0.6s 95 | } 96 | 97 | /* 98 | 1. transform:scale(x,y) 99 | x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。 100 | 注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。 101 | 102 | 2. 关键词 "from" 和 "to"，等同于 0% 和 100%。 103 | 0% 是动画的开始，100% 是动画的完成。 104 | */ 105 | 106 | /*创建动画animatezoom,把它绑定到 animate 选择器*/ 107 | @keyframes animatezoom { 108 | from {transform: scale(0)} 109 | to {transform: scale(1)} 110 | } 111 | 112 | /* 设置动画兼容-webkit-引擎浏览器 Firefox */ 113 | @-webkit-keyframes animatezoom { 114 | from {transform: scale(0)} 115 | to {transform: scale(1)} 116 | } 117 | 118 | /*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/ 119 | @-moz-keyframes animatezoom { 120 | from {transform: scale(0)} 121 | to {transform: scale(1)} 122 | } 123 | 124 | /*设置动画兼容-o-引擎浏览器 Opera*/ 125 | @-o-keyframes animatezoom { 126 | from {transform: scale(0)} 127 | to {transform: scale(1)} 128 | } 129 | 130 | /* 131 | @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 132 | 这里，如果文档宽度小于 300 像素则操作修改，在额外的小屏幕上更改取消和注册按钮的样式 */ 133 | @media screen and (max-width: 300px) { 134 | .cancelbtn, .signupbtn { 135 | width: 100%; 136 | } 137 | } --------------------------------------------------------------------------------