我是一个刚学前端的小菜鸟，今天斗胆分享一下最近学到的，做个简单的登录注册页面，献献丑。
登录页面：
用到了html和css，比较简单粗糙，然后能链接到注册页面
<!DOCTYPE >
<html><html lang="ch"><head><meta charset="utf-8"><title>三千博客</title><style type="text/css">#title{font-family:"新宋体";position: absolute;color: brown;font-size: 60px;text-align-last: center;left: 40%;top: 10%;}#content{position: absolute;top: 50%;/*顶部到元素*/left:30%;width: 40%;height:400px;margin-top:-200;/*边缘到底部*/ background-color: #34495e;text-align-last: center;/*这里做一个半透明效果*/filter:alpha(Opacity=60);-moz-opacity:0.8;opacity: 0.8;}#userid{color: #3498db;font-size: 30px;text-align: center;border-radius: 25px;/*边框圆角*/}#password{color: #3498db;font-size: 30px;text-align: center;border-radius: 25px;}#denglu{background-color: pink;border-radius:10px;border:0;/*边框宽度0*/height:50px;width:90px;padding:5px 10px;/*上下填充10 左右5*/font-size: 20px;}#zhuce{background-color: pink;border-radius:10px;border:0;/*边框宽度0*/height:50px;width:90px;padding:5px 10px;/*上下填充10 左右5*/font-size: 20px;}#content h1{color: white;font-size: 50px; }</style></head><body background="img/bg.png"><div id="title"><svg t="1585894995769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3410" width="50" height="50"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="3411"></path><path d="M212 80c-44.112 0-80 35.888-80 80v704c0 44.112 35.888 80 80 80h600c44.112 0 80-35.888 80-80V160c0-44.112-35.888-80-80-80H212m0-80h600c88.366 0 160 71.634 160 160v704c0 88.366-71.634 160-160 160H212c-88.366 0-160-71.634-160-160V160c0-88.366 71.634-160 160-160z" fill="#707070" p-id="3412"></path><path d="M322 12v1000a12 12 0 0 1-12 12h-56a12 12 0 0 1-12-12V12a12 12 0 0 1 12-12h56a12 12 0 0 1 12 12z" fill="#707070" p-id="3413"></path><path d="M678 80v199.11h88V80h-88m-60-60h208v283.652c0 19.582-17.908 35.458-40 35.458h-128c-22.092 0-40-15.876-40-35.458V20z" fill="#707070" p-id="3414"></path></svg>三千博客 </div><div id="content"> <h1 >Welcome</h1><br /><form action="#"method="post" ><input type="text" name="userid" id="userid" placeholder="请输入账号" /><br /><br /><input type="password" name="password" id="password" placeholder="请输入密码" /><br /><br /><input type="submit" name="denglu" id="denglu" value="登录" /> <a href="zc.html" target="_blank"><input type="button" name="zhuce"id="zhuce"value="注册"/></a></form></div></body>
</html>
注册页面：
这里用到html、css、js的东西，我只会一点点，做出来的页面比较粗糙，欢迎大家评论区一起讨论。
<!DOCTYPE >
<html><html lang="ch"><head><title>注册</title><script type="text/javascript">function fun(){alert("默认代表您同意《用户服务协议》和《隐私政策》");}function onclickfun(){var nameobj=document.getElementById("zcname");var nametext=nameobj.value;var namespanobj=document.getElementById("namespan");var natt=/^\w{3,5}$/;if(natt.test(nametext)!=true){namespanobj.innerHTML="用户名不合要求";}var passobj=document.getElementById("zcpass");var passtext=passobj.value;var passspanobj=document.getElementById("passspan");var patt=/^\w{6,12}$/;if(patt.test(passtext)!=true){passspanobj.innerHTML="密码不合要求";}var passrobj=document.getElementById("zcrpass");var passrtext=passrobj.value;var passrspanobj=document.getElementById("passrspan");if(passrtext!=passtext){passrspanobj.innerHTML="密码不正确";}}</script><meta charset="utf-8"><style type="text/css">#lunkuo{position: absolute;top: 50%;/*顶部到元素*/left:30%;width: 40%;height:420px;margin-top:-200;/*边缘到底部*/ background-color: #f0a1a8;text-align-last: center;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}#lunkuo input{font-size: 20px;text-align: center;border-radius: 25px;}</style></head><body background="img/zcbg.jpg" onload="fun()"><div id="lunkuo"><h1>注册</h1><br /><form action="#" method="post"><svg t="1586146954028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2643" width="23" height="23"><path d="M904.4 346.2c-21.5-50.7-52.2-96.3-91.3-135.4-39.1-39.1-84.6-69.8-135.4-91.3C625.3 97.4 569.5 86.1 512 86.1s-113.3 11.3-165.8 33.5c-50.7 21.5-96.3 52.2-135.4 91.3-39.1 39.1-69.8 84.6-91.3 135.4C97.4 398.7 86.1 454.5 86.1 512c0 57.5 11.3 113.3 33.5 165.8 21.5 50.7 52.2 96.3 91.3 135.4 39.1 39.1 84.6 69.8 135.4 91.3 52.5 22.2 108.3 33.5 165.8 33.5s113.3-11.3 165.8-33.5c50.7-21.5 96.3-52.2 135.4-91.3 39.1-39.1 69.8-84.6 91.3-135.4 22.2-52.5 33.5-108.3 33.5-165.8-0.2-57.5-11.5-113.3-33.7-165.8zM770.7 770.7c-69.1 69.1-161 107.2-258.7 107.2s-189.6-38.1-258.7-107.2-107.2-161-107.2-258.7 38.1-189.6 107.2-258.7 161-107.2 258.7-107.2 189.6 38.1 258.7 107.2 107.2 161 107.2 258.7-38.1 189.6-107.2 258.7z" p-id="2644"></path><path d="M618.9 552.8c47.3-33.6 78.2-88.7 78.2-151 0-102-83-185.1-185.1-185.1s-185.1 83-185.1 185.1c0 62.3 30.9 117.4 78.2 151-67.5 32.9-118.4 96-133.4 173.5-3.1 16.3 7.5 32 23.8 35.1 1.9 0.4 3.8 0.5 5.7 0.5 14.1 0 26.7-10 29.4-24.3 16.7-86.6 93-149.5 181.3-149.5 88.4 0 164.6 62.9 181.3 149.5 3.1 16.3 18.9 26.9 35.1 23.8 16.3-3.1 26.9-18.9 23.8-35.1-14.8-77.6-65.7-140.7-133.2-173.5zM512 276.7c69 0 125.1 56.1 125.1 125.1s-56.1 125-125.1 125-125.1-56.1-125.1-125.1 56.1-125 125.1-125z" p-id="2645"></path></svg><input type="text" name="username" id="zcname" placeholder="3-5位,数字字母下划线"/><span id="namespan"style="color: red;"></span><br /><br /> <svg t="1586146995954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3403" width="23" height="23"><path d="M512 128a170.666667 170.666667 0 0 0-170.666667 170.666667v128h341.333334V298.666667a170.666667 170.666667 0 0 0-162.133334-170.453334L512 128z m298.666667 384H213.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v298.666666a42.666667 42.666667 0 0 0 42.666666 42.666667h597.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-298.666666a42.666667 42.666667 0 0 0-42.666666-42.666667zM512 42.666667a256 256 0 0 1 256 256v128h42.666667a128 128 0 0 1 128 128v298.666666a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128v-298.666666a128 128 0 0 1 128-128h42.666667V298.666667a256 256 0 0 1 246.4-255.829334L512 42.666667z" p-id="3404"></path></svg><input type="password" name="password1" id="zcpass" placeholder="密码:6-12位" /><span id="passspan"style="color: red;"></span><br /><br /> <svg t="1586147123231" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5214" width="23" height="23"><path d="M512 572.8c-48 0-88 40-88 88 0 41.6 28.8 76.8 67.2 84.8v75.2c0 11.2 8 19.2 19.2 19.2h3.2c11.2 0 19.2-8 19.2-19.2v-75.2c38.4-9.6 67.2-44.8 67.2-84.8 0-48-40-88-88-88z m0 134.4c-25.6 0-46.4-20.8-46.4-46.4s20.8-46.4 46.4-46.4 46.4 20.8 46.4 46.4-20.8 46.4-46.4 46.4z" fill="#3E3A39" p-id="5215"></path><path d="M780.8 448h-3.2v-118.4c0-145.6-118.4-264-264-264s-264 118.4-264 264V448h-4.8C188.8 448 144 492.8 144 547.2v313.6c0 54.4 44.8 99.2 99.2 99.2h537.6c54.4 0 99.2-44.8 99.2-99.2V547.2c0-54.4-44.8-99.2-99.2-99.2z m-484.8-118.4c0-120 97.6-216 216-216s216 97.6 216 216V448h-432v-118.4zM832 860.8c0 28.8-22.4 51.2-51.2 51.2H243.2c-28.8 0-51.2-22.4-51.2-51.2V547.2c0-28.8 22.4-51.2 51.2-51.2h537.6c28.8 0 51.2 22.4 51.2 51.2v313.6z" fill="#3E3A39" p-id="5216"></path></svg><input type="password" name="password2" id="zcrpass" placeholder="请再次确认密码" /><span id="passrspan"style="color: red;"></span><br /><br /><svg t="1586147028498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="23" height="23"><path d="M971.52 412.672a49.152 49.152 0 0 0-20.096-39.616L540.992 73.024a49.792 49.792 0 0 0-57.984 0L72.64 373.056a48.64 48.64 0 0 0-13.568 15.552 16.576 16.576 0 0 0-4.16 4.736 18.816 18.816 0 0 0-1.792 13.952c-0.192 1.792-0.64 3.52-0.64 5.376v498.496c0 27.072 22.016 49.152 49.152 49.152h820.736a49.408 49.408 0 0 0 49.152-49.152V412.672zM504.832 102.848c2.048-1.536 4.544-2.368 7.168-2.368s5.12 0.768 7.168 2.368l403.2 294.72L512 632.192 100.8 398.208l404.032-295.36z m426.176 816.96a12.288 12.288 0 0 1-8.64 3.584H101.632a12.16 12.16 0 0 1-12.16-12.16V434.304l413.376 235.264a18.688 18.688 0 0 0 18.368 0l413.312-236.352 0.064 477.952a12.8 12.8 0 0 1-3.584 8.64z m0 0" fill="#333333" p-id="4246"></path></svg><input type="text" name="email" id="zcemail" placeholder="请输入邮箱" /><br /><br /><svg t="1586147067477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5047" width="23" height="23"><path d="M690.08 128l-356.448 0.128a23.168 23.168 0 0 0-22.72 23.392l0.256 721.056c0 12.864 10.24 23.36 22.752 23.392l356.48-0.16a23.104 23.104 0 0 0 22.72-23.392l-0.256-721.024A23.104 23.104 0 0 0 690.08 128z m-141.792 711.648c0 20.576-16.224 37.312-36.256 37.312-20 0-36.288-16.672-36.256-37.28-0.032-20.576 16.192-37.312 36.224-37.312 20.032-0.032 36.288 16.736 36.288 37.28zM695.36 229.504l0.192 530.528c0 12.864-10.24 23.392-22.72 23.392l-321.632 0.064a23.2 23.2 0 0 1-22.784-23.36l-0.16-530.528c0-12.832 10.24-23.36 22.752-23.36l321.632-0.096c12.48-0.032 22.72 10.464 22.72 23.36z" fill="" p-id="5048"></path></svg><input type="tel" name="phone" id="zcpgone" placeholder="请输入手机号" /><br /><br /><input type="image" src="img/zc.png"onclick="onclickfun()"></form></div></body>
</html>
用到的图片：
不多说上效果图：
欢迎大家一起讨论学习前端的知识!
