-
实现一个简单的注册页面注册
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"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js">script> <title>用户注册页面title> <style type="text/css"> /* 整个boby页面的样式 */ body { background:url(./login.a6245adb.png) no-repeat; background-size: 100% 100%; height: 100vh; } /* 盒子外围的样式设置 */ .box2 { width: 100%; height: 100vh; /* 弹性布局 */ display: flex; /* 上下居中对齐 */ align-items: center; /* 左右居中对齐 */ justify-content: center; } /* 整个注册界面的样式设置 */ .register_mark { width: 600px; height: 550px; /* 圆角边框 */ border-radius: 30px; text-align: center; background: white; } /* 注册标识文字的样式设置 */ .user_register { font-size: 40px; color:#145dff; font-weight: bold; font-family: "microsoft yahei"; line-height: 100px; } /* 提示语文字的样式设置 */ .mark_files{ font-size: 16px; margin-top: 10px; text-align: left; padding-left: 86px; } /* 输入框的样式设置 */ .input_mark input { width: 70%; height: 40px; margin-bottom: 30px; } /* 提交按钮的样式设置 */ button { font-size:17px; color: white; background: #145dff; border: none; height: 50px; width: 71.5%; } /* 协议整体文字的样式设置 */ .pact_mark{ font-size: 16px; margin-top: 10px; text-align: left; padding-left: 86px; } /* 用户协议文字的样式设置 */ .pact_mark a { color: #145dff; font-weight: bold; } /* 提示语文字的样式设置 */ .mark{ font-size: 16px; margin-top: 20px; line-height: 40px; } /* 立即登录的样式设置 */ .mark a { color: #145dff; } /* 底部文字的样式设置 */ .mark_mass{ font-size: 20px; line-height: 30px; color: white; text-align: center; margin: 10px; /* 绝对定位 */ position: absolute; bottom: 0; left: 49%; transform: translate(-49%, 0); } /* 图片的样式设置 */ .login-form{ height: auto; width: auto; text-align: top left; background-repeat: no-repeat; } /* 其他登录方式的样式设计 */ .other_login p{ font-size: 15px; line-height: 40px; text-align: center; } /* qq登录的样式设计 */ .other_login .img_png img{ width: 35px; height: 35px; background-repeat: no-repeat; margin-top: -100px; margin-left: -160px; } /* qq登录:当鼠标悬浮在元素上方时,给元素设定的样式 */ .other_login .img_png img:hover{ width: 35px; height: 35px; background-repeat: no-repeat; margin-top: -100px; margin-left: -160px; background: #1E90FF; cursor: pointer; } /* wx登录方式的样式设计 */ .other_login .img_png1 img{ width: 35px; height: 35px; background-repeat: no-repeat; margin-top: -100px; margin-right: -160px; } /* wx登录方式:当鼠标悬浮在元素上方时,给元素设定的样式 */ .other_login .img_png1 img:hover{ width: 35px; height: 35px; background-repeat: no-repeat; margin-top: -100px; margin-right: -160px; background: #1E90FF; cursor: pointer; } .img_list { display: flex; justify-content: center; } style> head> <body> <form action="" method="get"> <div class="box2"> <div class="register_mark"> <div class="user_register">注册Eolinkdiv> <div class="mark_files"> <p>手机号或者邮箱注册p> div> <div class="input_mark"> <input type="text" placeholder="请输入手机号或邮箱"> div> <div class="input_mark"> <input type="password" placeholder="请输入密码"> div> <button type="button" onclick="tank()">完 成 注 册button> <div class="pact_mark"> <input type="checkbox" value="1">同意 <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/">用户服务协议a> div> <div class="mark"> <p>已有账号？<a href="https://shimo.im/docs/i3XNF2FxolUvs9rH/">立即登录a>p> div> <div class="other_login"> <div class="form-others-title"> <div class="mlr10 fs14">————————— 其他登录方式 —————————div> <div class="img_list"> <div class="img_png"> <p class="ut-01"> <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/"> <img src="./qq.png" alt="qq登录"> a> p> div> <div class="img_png1"> <p class="ut-02"> <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/"> <img src="./wx.png" alt="wx登录"> a> p> div> div> div> div> div> div> form> <div class="mark_mass"> <div class="name"> <p>版权所有©2022 Eolink-有限公司p> div> div> <script type="text/javascript"> function tank() { alert("欢迎登录！！！") } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
最终页面：
-
相关阅读:
在Ubuntu14.0系统中安装arm-2009q3.tar.bz2交叉编译器
具有 1 个射频链的 OFDM-MIMO 系统的波束训练（Matlab代码实现）
9、8锁现象彻底的理解锁（锁的只有两个东西，一个是对象，一个是Class模板（static修饰））
【组件传参】返回e和传入的参数 - uniapp中this.$emit回传多个值 - uniapp组件中带事件参数event和多个参数
JavaScript中的this
SQL 基础入门教程
[微信小程序踩坑]微信小程序editor富文本组件渲染字符串时，内部图片超出大小导致无法正常渲染或回显(数据传输长度为 3458 KB，存在有性能问题！)
Vue中常用的指令
Linux基础命令[25]-groupadd
短视频矩阵系统源代码开发|技术源代码部署/OEM贴牌搭建
- 原文地址：https://blog.csdn.net/qq_40236497/article/details/125744000
